Skip to content

Commit a6bd7ae

Browse files
ZMYaroZMYaro
committed
Add dark theme
1 parent 5b42889 commit a6bd7ae

File tree

3 files changed

+225
-0
lines changed

3 files changed

+225
-0
lines changed

‎index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
<link rel="stylesheet" type="text/css" href="styles/material-elements.css" />
1515
<link rel="stylesheet" type="text/css" href="styles/material-depth.css" />
1616
<link rel="stylesheet" type="text/css" href="styles/material-widgets.css" />
17+
<link rel="stylesheet" type="text/css" href="styles/material-dark.css" media="(prefers-color-scheme: dark)" />
1718
<link rel="stylesheet" type="text/css" href="styles/styles.css" />
1819

1920
<script type="text/javascript" src="scripts/material-touch.js"></script>

‎styles/material-dark.css

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
/* Base Material styles for dark theme
2+
* Part of the MaterialZ CSS library
3+
*
4+
* Copyright 2015-2021 Zachary Yaro
5+
* Released under the MIT license
6+
* https://materialz.dev/LICENSE.txt
7+
*/
8+
9+
@charset "UTF-8";
10+
11+
body {
12+
background-color: #121212;
13+
color: #ffffff;
14+
}
15+
16+
/* --------======== BUTTONS and DROP-DOWNS ========-------- */
17+
select {
18+
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAIAgMAAADCRZTUAAAACVBMVEUAAAD///////9zeKVjAAAAAnRSTlMAgJsrThgAAAAySURBVAjXY8hatWolAwxIrVq1BM5hW7VqApzDuGqVAwMcZAG1IDQBtSA0AbUgNCG0AAD8iAqhtDTiaAAAAABJRU5ErkJggg==);
19+
}
20+
button:not(:disabled):hover,
21+
button:focus,
22+
[role="button"]:not(:disabled):hover,
23+
[role="button"]:focus,
24+
input[type="button"]:not(:disabled):hover,
25+
input[type="button"]:focus,
26+
input[type="submit"]:not(:disabled):hover,
27+
input[type="submit"]:focus,
28+
input[type="reset"]:not(:disabled):hover,
29+
input[type="reset"]:focus,
30+
select:not(:disabled):hover,
31+
select:focus {
32+
background-color: #313131;
33+
background-color: rgba(128, 128, 128, 0.2);
34+
}
35+
/* The “active” class is used to force the appearance of the active/pressed state */
36+
button:not(:disabled):active,
37+
button:not(:disabled).active,
38+
[role="button"]:not(:disabled):active,
39+
[role="button"]:not(:disabled).active,
40+
input[type="button"]:not(:disabled):active,
41+
input[type="button"]:not(:disabled).active,
42+
input[type="submit"]:not(:disabled):active,
43+
input[type="submit"]:not(:disabled).active,
44+
input[type="reset"]:not(:disabled):active,
45+
input[type="reset"]:not(:disabled).active,
46+
select:not(:disabled):active,
47+
select:not(:disabled).active {
48+
background-color: #444444;
49+
background-color: rgba(128, 128, 128, 0.4);
50+
}
51+
52+
/* --------======== RADIO BUTTONS AND CHECKBOXES ========-------- */
53+
input[type="checkbox"]::after {
54+
border-color: #1d1d1d;
55+
}
56+
57+
/* --------======== TEXT FIELDS ========-------- */
58+
input[type="text"],
59+
input[type="search"],
60+
input[type="password"],
61+
input[type="email"],
62+
input[type="url"],
63+
input[type="number"],
64+
textarea,
65+
select[size] {
66+
border-bottom-color: #c8c8c8;
67+
}
68+
69+
70+
/* --------======== LISTS ========-------- */
71+
.list li {
72+
border-color: #363636;
73+
border-color: rgba(128, 128, 128, 0.25);
74+
}
75+
76+
/* --------======== CARDS ========-------- */
77+
.card,
78+
.card.z1 {
79+
background-color: #1d1d1d;
80+
}
81+
button.z1,
82+
button.z2,
83+
button.z3,
84+
button.z4,
85+
button.z5,
86+
[role="button"].z1,
87+
[role="button"].z2,
88+
[role="button"].z3,
89+
[role="button"].z4,
90+
[role="button"].z5 ,
91+
input[type="button"].z1,
92+
input[type="button"].z2,
93+
input[type="button"].z3,
94+
input[type="button"].z4,
95+
input[type="button"].z5,
96+
input[type="submit"].z1,
97+
input[type="submit"].z2,
98+
input[type="submit"].z3,
99+
input[type="submit"].z4,
100+
input[type="submit"].z5,
101+
input[type="reset"].z1,
102+
input[type="reset"].z2,
103+
input[type="reset"].z3,
104+
input[type="reset"].z4,
105+
input[type="reset"].z5 {
106+
background-color: #212121;
107+
}
108+
.card.z2,
109+
button.z1:hover,
110+
button.z2:hover,
111+
button.z3:hover,
112+
button.z4:hover,
113+
button.z5:hover,
114+
[role="button"].z1:hover,
115+
[role="button"].z2:hover,
116+
[role="button"].z3:hover,
117+
[role="button"].z4:hover,
118+
[role="button"].z5:hover,
119+
input[type="button"].z1:hover,
120+
input[type="button"].z2:hover,
121+
input[type="button"].z3:hover,
122+
input[type="button"].z4:hover,
123+
input[type="button"].z5:hover,
124+
input[type="submit"].z1:hover,
125+
input[type="submit"].z2:hover,
126+
input[type="submit"].z3:hover,
127+
input[type="submit"].z4:hover,
128+
input[type="submit"].z5:hover,
129+
input[type="reset"].z1:hover,
130+
input[type="reset"].z2:hover,
131+
input[type="reset"].z3:hover,
132+
input[type="reset"].z4:hover,
133+
input[type="reset"].z5:hover,
134+
button.z1:focus,
135+
button.z2:focus,
136+
button.z3:focus,
137+
button.z4:focus,
138+
button.z5:focus,
139+
[role="button"].z1:focus,
140+
[role="button"].z2:focus,
141+
[role="button"].z3:focus,
142+
[role="button"].z4:focus,
143+
[role="button"].z5:focus,
144+
input[type="button"].z1:focus,
145+
input[type="button"].z2:focus,
146+
input[type="button"].z3:focus,
147+
input[type="button"].z4:focus,
148+
input[type="button"].z5:focus,
149+
input[type="submit"].z1:focus,
150+
input[type="submit"].z2:focus,
151+
input[type="submit"].z3:focus,
152+
input[type="submit"].z4:focus,
153+
input[type="submit"].z5:focus,
154+
input[type="reset"].z1:focus,
155+
input[type="reset"].z2:focus,
156+
input[type="reset"].z3:focus,
157+
input[type="reset"].z4:focus,
158+
input[type="reset"].z5:focus {
159+
background-color: #272727;
160+
}
161+
.card.z3,
162+
button.z1:not(:disabled):active,
163+
button.z2:not(:disabled):active,
164+
button.z3:not(:disabled):active,
165+
button.z4:not(:disabled):active,
166+
button.z5:not(:disabled):active,
167+
[role="button"].z1:active,
168+
[role="button"].z2:active,
169+
[role="button"].z3:active,
170+
[role="button"].z4:active,
171+
[role="button"].z5:active,
172+
input[type="button"].z1:not(:disabled):active,
173+
input[type="button"].z2:not(:disabled):active,
174+
input[type="button"].z3:not(:disabled):active,
175+
input[type="button"].z4:not(:disabled):active,
176+
input[type="button"].z5:not(:disabled):active,
177+
input[type="submit"].z1:not(:disabled):active,
178+
input[type="submit"].z2:not(:disabled):active,
179+
input[type="submit"].z3:not(:disabled):active,
180+
input[type="submit"].z4:not(:disabled):active,
181+
input[type="submit"].z5:not(:disabled):active,
182+
input[type="reset"].z1:not(:disabled):active,
183+
input[type="reset"].z2:not(:disabled):active,
184+
input[type="reset"].z3:not(:disabled):active,
185+
input[type="reset"].z4:not(:disabled):active,
186+
input[type="reset"].z5:not(:disabled):active,
187+
button.z1:not(:disabled).active,
188+
button.z2:not(:disabled).active,
189+
button.z3:not(:disabled).active,
190+
button.z4:not(:disabled).active,
191+
button.z5:not(:disabled).active,
192+
[role="button"].z1.active,
193+
[role="button"].z2.active,
194+
[role="button"].z3.active,
195+
[role="button"].z4.active,
196+
[role="button"].z5.active,
197+
input[type="button"].z1:not(:disabled).active,
198+
input[type="button"].z2:not(:disabled).active,
199+
input[type="button"].z3:not(:disabled).active,
200+
input[type="button"].z4:not(:disabled).active,
201+
input[type="button"].z5:not(:disabled).active,
202+
input[type="submit"].z1:not(:disabled).active,
203+
input[type="submit"].z2:not(:disabled).active,
204+
input[type="submit"].z3:not(:disabled).active,
205+
input[type="submit"].z4:not(:disabled).active,
206+
input[type="submit"].z5:not(:disabled).active,
207+
input[type="reset"].z1:not(:disabled).active,
208+
input[type="reset"].z2:not(:disabled).active,
209+
input[type="reset"].z3:not(:disabled).active,
210+
input[type="reset"].z4:not(:disabled).active,
211+
input[type="reset"].z5:not(:disabled).active {
212+
background-color: #2d2d2d;
213+
}
214+
.card.z4 {
215+
background-color: #353535;
216+
}
217+
.card.z5 {
218+
background-color: #373737;
219+
}

‎styles/styles.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@ body {
22
background-color: #e8e8e8;
33
padding-top: 48px;
44
}
5+
@media (prefers-color-scheme: dark) {
6+
body {
7+
background-color: #121212;
8+
}
9+
}
510
.card {
611
max-width: 512px;
712
}

0 commit comments

Comments
 (0)