Skip to content

Commit 448dff2

Browse files
equinusociomarijnh
equinusocio
authored and
marijnh
committed
[material theme] Update to the official version, add darker, palenight, ocean variants
1 parent 650e975 commit 448dff2

File tree

5 files changed

+531
-38
lines changed

5 files changed

+531
-38
lines changed

‎demo/theme.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,9 @@
2929
<link rel="stylesheet" href="../theme/liquibyte.css">
3030
<link rel="stylesheet" href="../theme/lucario.css">
3131
<link rel="stylesheet" href="../theme/material.css">
32+
<link rel="stylesheet" href="../theme/material-darker.css">
33+
<link rel="stylesheet" href="../theme/material-palenight.css">
34+
<link rel="stylesheet" href="../theme/material-ocean.css">
3235
<link rel="stylesheet" href="../theme/mbo.css">
3336
<link rel="stylesheet" href="../theme/mdn-like.css">
3437
<link rel="stylesheet" href="../theme/midnight.css">
@@ -124,6 +127,9 @@ <h2>Theme Demo</h2>
124127
<option>liquibyte</option>
125128
<option>lucario</option>
126129
<option>material</option>
130+
<option>material-darker</option>
131+
<option>material-palenight</option>
132+
<option>material-ocean</option>
127133
<option>mbo</option>
128134
<option>mdn-like</option>
129135
<option>midnight</option>
@@ -181,4 +187,4 @@ <h2>Theme Demo</h2>
181187
if (theme) { input.value = theme; selectTheme(); }
182188
});
183189
</script>
184-
</article>
190+
</article>

‎theme/material-darker.css‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
/*
2+
Name: material
3+
Author: Mattia Astorino (http://github.com/equinusocio)
4+
Website: https://material-theme.site/
5+
*/
6+
7+
.cm-s-material-darker.CodeMirror {
8+
background-color: #212121;
9+
color: #EEFFFF;
10+
}
11+
12+
.cm-s-material-darker .CodeMirror-gutters {
13+
background: #212121;
14+
color: #545454;
15+
border: none;
16+
}
17+
18+
.cm-s-material-darker .CodeMirror-guttermarker,
19+
.cm-s-material-darker .CodeMirror-guttermarker-subtle,
20+
.cm-s-material-darker .CodeMirror-linenumber {
21+
color: #545454;
22+
}
23+
24+
.cm-s-material-darker .CodeMirror-cursor {
25+
border-left: 1px solid #FFCC00;
26+
}
27+
28+
.cm-s-material-darker div.CodeMirror-selected {
29+
background: rgba(97, 97, 97, 0.2);
30+
}
31+
32+
.cm-s-material-darker.CodeMirror-focused div.CodeMirror-selected {
33+
background: rgba(97, 97, 97, 0.2);
34+
}
35+
36+
.cm-s-material-darker .CodeMirror-line::selection,
37+
.cm-s-material-darker .CodeMirror-line>span::selection,
38+
.cm-s-material-darker .CodeMirror-line>span>span::selection {
39+
background: rgba(128, 203, 196, 0.2);
40+
}
41+
42+
.cm-s-material-darker .CodeMirror-line::-moz-selection,
43+
.cm-s-material-darker .CodeMirror-line>span::-moz-selection,
44+
.cm-s-material-darker .CodeMirror-line>span>span::-moz-selection {
45+
background: rgba(128, 203, 196, 0.2);
46+
}
47+
48+
.cm-s-material-darker .CodeMirror-activeline-background {
49+
background: rgba(0, 0, 0, 0.5);
50+
}
51+
52+
.cm-s-material-darker .cm-keyword {
53+
color: #C792EA;
54+
}
55+
56+
.cm-s-material-darker .cm-operator {
57+
color: #89DDFF;
58+
}
59+
60+
.cm-s-material-darker .cm-variable-2 {
61+
color: #EEFFFF;
62+
}
63+
64+
.cm-s-material-darker .cm-variable-3,
65+
.cm-s-material-darker .cm-type {
66+
color: #f07178;
67+
}
68+
69+
.cm-s-material-darker .cm-builtin {
70+
color: #FFCB6B;
71+
}
72+
73+
.cm-s-material-darker .cm-atom {
74+
color: #F78C6C;
75+
}
76+
77+
.cm-s-material-darker .cm-number {
78+
color: #FF5370;
79+
}
80+
81+
.cm-s-material-darker .cm-def {
82+
color: #82AAFF;
83+
}
84+
85+
.cm-s-material-darker .cm-string {
86+
color: #C3E88D;
87+
}
88+
89+
.cm-s-material-darker .cm-string-2 {
90+
color: #f07178;
91+
}
92+
93+
.cm-s-material-darker .cm-comment {
94+
color: #545454;
95+
}
96+
97+
.cm-s-material-darker .cm-variable {
98+
color: #f07178;
99+
}
100+
101+
.cm-s-material-darker .cm-tag {
102+
color: #FF5370;
103+
}
104+
105+
.cm-s-material-darker .cm-meta {
106+
color: #FFCB6B;
107+
}
108+
109+
.cm-s-material-darker .cm-attribute {
110+
color: #C792EA;
111+
}
112+
113+
.cm-s-material-darker .cm-property {
114+
color: #C792EA;
115+
}
116+
117+
.cm-s-material-darker .cm-qualifier {
118+
color: #DECB6B;
119+
}
120+
121+
.cm-s-material-darker .cm-variable-3,
122+
.cm-s-material-darker .cm-type {
123+
color: #DECB6B;
124+
}
125+
126+
127+
.cm-s-material-darker .cm-error {
128+
color: rgba(255, 255, 255, 1.0);
129+
background-color: #FF5370;
130+
}
131+
132+
.cm-s-material-darker .CodeMirror-matchingbracket {
133+
text-decoration: underline;
134+
color: white !important;
135+
}

‎theme/material-ocean.css‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
/*
2+
Name: material
3+
Author: Mattia Astorino (http://github.com/equinusocio)
4+
Website: https://material-theme.site/
5+
*/
6+
7+
.cm-s-material-ocean.CodeMirror {
8+
background-color: #0F111A;
9+
color: #8F93A2;
10+
}
11+
12+
.cm-s-material-ocean .CodeMirror-gutters {
13+
background: #0F111A;
14+
color: #464B5D;
15+
border: none;
16+
}
17+
18+
.cm-s-material-ocean .CodeMirror-guttermarker,
19+
.cm-s-material-ocean .CodeMirror-guttermarker-subtle,
20+
.cm-s-material-ocean .CodeMirror-linenumber {
21+
color: #464B5D;
22+
}
23+
24+
.cm-s-material-ocean .CodeMirror-cursor {
25+
border-left: 1px solid #FFCC00;
26+
}
27+
28+
.cm-s-material-ocean div.CodeMirror-selected {
29+
background: rgba(113, 124, 180, 0.2);
30+
}
31+
32+
.cm-s-material-ocean.CodeMirror-focused div.CodeMirror-selected {
33+
background: rgba(113, 124, 180, 0.2);
34+
}
35+
36+
.cm-s-material-ocean .CodeMirror-line::selection,
37+
.cm-s-material-ocean .CodeMirror-line>span::selection,
38+
.cm-s-material-ocean .CodeMirror-line>span>span::selection {
39+
background: rgba(128, 203, 196, 0.2);
40+
}
41+
42+
.cm-s-material-ocean .CodeMirror-line::-moz-selection,
43+
.cm-s-material-ocean .CodeMirror-line>span::-moz-selection,
44+
.cm-s-material-ocean .CodeMirror-line>span>span::-moz-selection {
45+
background: rgba(128, 203, 196, 0.2);
46+
}
47+
48+
.cm-s-material-ocean .CodeMirror-activeline-background {
49+
background: rgba(0, 0, 0, 0.5);
50+
}
51+
52+
.cm-s-material-ocean .cm-keyword {
53+
color: #C792EA;
54+
}
55+
56+
.cm-s-material-ocean .cm-operator {
57+
color: #89DDFF;
58+
}
59+
60+
.cm-s-material-ocean .cm-variable-2 {
61+
color: #EEFFFF;
62+
}
63+
64+
.cm-s-material-ocean .cm-variable-3,
65+
.cm-s-material-ocean .cm-type {
66+
color: #f07178;
67+
}
68+
69+
.cm-s-material-ocean .cm-builtin {
70+
color: #FFCB6B;
71+
}
72+
73+
.cm-s-material-ocean .cm-atom {
74+
color: #F78C6C;
75+
}
76+
77+
.cm-s-material-ocean .cm-number {
78+
color: #FF5370;
79+
}
80+
81+
.cm-s-material-ocean .cm-def {
82+
color: #82AAFF;
83+
}
84+
85+
.cm-s-material-ocean .cm-string {
86+
color: #C3E88D;
87+
}
88+
89+
.cm-s-material-ocean .cm-string-2 {
90+
color: #f07178;
91+
}
92+
93+
.cm-s-material-ocean .cm-comment {
94+
color: #464B5D;
95+
}
96+
97+
.cm-s-material-ocean .cm-variable {
98+
color: #f07178;
99+
}
100+
101+
.cm-s-material-ocean .cm-tag {
102+
color: #FF5370;
103+
}
104+
105+
.cm-s-material-ocean .cm-meta {
106+
color: #FFCB6B;
107+
}
108+
109+
.cm-s-material-ocean .cm-attribute {
110+
color: #C792EA;
111+
}
112+
113+
.cm-s-material-ocean .cm-property {
114+
color: #C792EA;
115+
}
116+
117+
.cm-s-material-ocean .cm-qualifier {
118+
color: #DECB6B;
119+
}
120+
121+
.cm-s-material-ocean .cm-variable-3,
122+
.cm-s-material-ocean .cm-type {
123+
color: #DECB6B;
124+
}
125+
126+
127+
.cm-s-material-ocean .cm-error {
128+
color: rgba(255, 255, 255, 1.0);
129+
background-color: #FF5370;
130+
}
131+
132+
.cm-s-material-ocean .CodeMirror-matchingbracket {
133+
text-decoration: underline;
134+
color: white !important;
135+
}

0 commit comments

Comments
 (0)