Skip to content

Commit 4d25e7c

Browse files
ZMYaroZMYaro
committed
Add dark theme
1 parent 658238f commit 4d25e7c

6 files changed

Lines changed: 259 additions & 6 deletions

File tree

‎imgs/info.png‎

-1.28 KB
Binary file not shown.

‎imgs/info.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎index.html‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,19 @@
1212
<link rel="stylesheet" type="text/css" href="styles/material-elements.css" />
1313
<link rel="stylesheet" type="text/css" href="styles/material-depth.css" />
1414
<link rel="stylesheet" type="text/css" href="styles/material-widgets.css" />
15+
<link rel="stylesheet" type="text/css" href="styles/material-dark.css" media="(prefers-color-scheme: dark)" />
1516
<link rel="stylesheet" type="text/css" href="styles/styles.css" />
1617

1718
<script type="text/javascript" src="scripts/material-touch.js"></script>
1819
<script type="text/javascript" src="scripts/game.js"></script>
1920
</head>
2021
<body>
2122
<div role="toolbar" class="appBar">
22-
<button title="About" id="aboutBtn"><img src="imgs/info.png" alt="About" /></button>
23+
<button title="About" id="aboutBtn">
24+
<svg role="img" aria-label="About">
25+
<use href="imgs/info.svg#icon" xlink:href="imgs/info.svg#icon"></use>
26+
</svg>
27+
</button>
2328
</div>
2429
<div class="view active" id="gameScreen">
2530
<h1>Choose one.</h1>

‎manifest.appcache‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
CACHE MANIFEST
2-
# 2017-01-01, v1
2+
# 2020-05-03, v1
33
index.html
4-
imgs/info.png
4+
imgs/info.svg
55
scripts/game.js
66
scripts/material-touch.js
7-
styles/material-elements.css
7+
styles/material-dark.css
88
styles/material-depth.css
9+
styles/material-elements.css
910
styles/material-widgets.css
1011
styles/styles.css

‎styles/material-dark.css‎

Lines changed: 227 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
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+
/* --------======== TOOLBARS ========-------- */
70+
[role="toolbar"] button [role="img"],
71+
[role="toolbar"] [role="button"] [role="img"],
72+
[role="toolbar"] input[type="button"] [role="img"],
73+
[role="toolbar"] input[type="submit"] [role="img"],
74+
[role="toolbar"] input[type="reset"] [role="img"] {
75+
fill: rgba(255, 255, 255, 0.9);
76+
}
77+
78+
/* --------======== LISTS ========-------- */
79+
.list li {
80+
border-color: #363636;
81+
border-color: rgba(128, 128, 128, 0.25);
82+
}
83+
84+
/* --------======== CARDS ========-------- */
85+
.card,
86+
.card.z1 {
87+
background-color: #1d1d1d;
88+
}
89+
button.z1,
90+
button.z2,
91+
button.z3,
92+
button.z4,
93+
button.z5,
94+
[role="button"].z1,
95+
[role="button"].z2,
96+
[role="button"].z3,
97+
[role="button"].z4,
98+
[role="button"].z5 ,
99+
input[type="button"].z1,
100+
input[type="button"].z2,
101+
input[type="button"].z3,
102+
input[type="button"].z4,
103+
input[type="button"].z5,
104+
input[type="submit"].z1,
105+
input[type="submit"].z2,
106+
input[type="submit"].z3,
107+
input[type="submit"].z4,
108+
input[type="submit"].z5,
109+
input[type="reset"].z1,
110+
input[type="reset"].z2,
111+
input[type="reset"].z3,
112+
input[type="reset"].z4,
113+
input[type="reset"].z5 {
114+
background-color: #212121;
115+
}
116+
.card.z2,
117+
button.z1:hover,
118+
button.z2:hover,
119+
button.z3:hover,
120+
button.z4:hover,
121+
button.z5:hover,
122+
[role="button"].z1:hover,
123+
[role="button"].z2:hover,
124+
[role="button"].z3:hover,
125+
[role="button"].z4:hover,
126+
[role="button"].z5:hover,
127+
input[type="button"].z1:hover,
128+
input[type="button"].z2:hover,
129+
input[type="button"].z3:hover,
130+
input[type="button"].z4:hover,
131+
input[type="button"].z5:hover,
132+
input[type="submit"].z1:hover,
133+
input[type="submit"].z2:hover,
134+
input[type="submit"].z3:hover,
135+
input[type="submit"].z4:hover,
136+
input[type="submit"].z5:hover,
137+
input[type="reset"].z1:hover,
138+
input[type="reset"].z2:hover,
139+
input[type="reset"].z3:hover,
140+
input[type="reset"].z4:hover,
141+
input[type="reset"].z5:hover,
142+
button.z1:focus,
143+
button.z2:focus,
144+
button.z3:focus,
145+
button.z4:focus,
146+
button.z5:focus,
147+
[role="button"].z1:focus,
148+
[role="button"].z2:focus,
149+
[role="button"].z3:focus,
150+
[role="button"].z4:focus,
151+
[role="button"].z5:focus,
152+
input[type="button"].z1:focus,
153+
input[type="button"].z2:focus,
154+
input[type="button"].z3:focus,
155+
input[type="button"].z4:focus,
156+
input[type="button"].z5:focus,
157+
input[type="submit"].z1:focus,
158+
input[type="submit"].z2:focus,
159+
input[type="submit"].z3:focus,
160+
input[type="submit"].z4:focus,
161+
input[type="submit"].z5:focus,
162+
input[type="reset"].z1:focus,
163+
input[type="reset"].z2:focus,
164+
input[type="reset"].z3:focus,
165+
input[type="reset"].z4:focus,
166+
input[type="reset"].z5:focus {
167+
background-color: #272727;
168+
}
169+
.card.z3,
170+
button.z1:not(:disabled):active,
171+
button.z2:not(:disabled):active,
172+
button.z3:not(:disabled):active,
173+
button.z4:not(:disabled):active,
174+
button.z5:not(:disabled):active,
175+
[role="button"].z1:active,
176+
[role="button"].z2:active,
177+
[role="button"].z3:active,
178+
[role="button"].z4:active,
179+
[role="button"].z5:active,
180+
input[type="button"].z1:not(:disabled):active,
181+
input[type="button"].z2:not(:disabled):active,
182+
input[type="button"].z3:not(:disabled):active,
183+
input[type="button"].z4:not(:disabled):active,
184+
input[type="button"].z5:not(:disabled):active,
185+
input[type="submit"].z1:not(:disabled):active,
186+
input[type="submit"].z2:not(:disabled):active,
187+
input[type="submit"].z3:not(:disabled):active,
188+
input[type="submit"].z4:not(:disabled):active,
189+
input[type="submit"].z5:not(:disabled):active,
190+
input[type="reset"].z1:not(:disabled):active,
191+
input[type="reset"].z2:not(:disabled):active,
192+
input[type="reset"].z3:not(:disabled):active,
193+
input[type="reset"].z4:not(:disabled):active,
194+
input[type="reset"].z5:not(:disabled):active,
195+
button.z1:not(:disabled).active,
196+
button.z2:not(:disabled).active,
197+
button.z3:not(:disabled).active,
198+
button.z4:not(:disabled).active,
199+
button.z5:not(:disabled).active,
200+
[role="button"].z1.active,
201+
[role="button"].z2.active,
202+
[role="button"].z3.active,
203+
[role="button"].z4.active,
204+
[role="button"].z5.active,
205+
input[type="button"].z1:not(:disabled).active,
206+
input[type="button"].z2:not(:disabled).active,
207+
input[type="button"].z3:not(:disabled).active,
208+
input[type="button"].z4:not(:disabled).active,
209+
input[type="button"].z5:not(:disabled).active,
210+
input[type="submit"].z1:not(:disabled).active,
211+
input[type="submit"].z2:not(:disabled).active,
212+
input[type="submit"].z3:not(:disabled).active,
213+
input[type="submit"].z4:not(:disabled).active,
214+
input[type="submit"].z5:not(:disabled).active,
215+
input[type="reset"].z1:not(:disabled).active,
216+
input[type="reset"].z2:not(:disabled).active,
217+
input[type="reset"].z3:not(:disabled).active,
218+
input[type="reset"].z4:not(:disabled).active,
219+
input[type="reset"].z5:not(:disabled).active {
220+
background-color: #2d2d2d;
221+
}
222+
.card.z4 {
223+
background-color: #353535;
224+
}
225+
.card.z5 {
226+
background-color: #373737;
227+
}

‎styles/styles.css‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@
1010
}
1111
.appBar[role="toolbar"] button:enabled:hover,
1212
.appBar[role="toolbar"] button:enabled:focus {
13-
background-color: rgba(0,0,0,0.07);
13+
background-color: rgba(0, 0, 0, 0.07);
1414
}
1515
.appBar[role="toolbar"] button:enabled:active {
16-
background-color: rgba(0,0,0,0.13);
16+
background-color: rgba(0, 0, 0, 0.13);
1717
}
1818

1919
#aboutBtn {
@@ -75,6 +75,25 @@
7575
width: 256px;
7676
}
7777

78+
@media (prefers-color-scheme: dark) {
79+
.appBar[role="toolbar"] button:enabled:hover,
80+
.appBar[role="toolbar"] button:enabled:focus {
81+
background-color: rgba(255, 255, 255, 0.07);
82+
}
83+
.appBar[role="toolbar"] button:enabled:active {
84+
background-color: rgba(255, 255, 255, 0.13);
85+
}
86+
.view {
87+
background-color: #121212; /* MaterialZ dark background */
88+
}
89+
.view button {
90+
background-color: #2d2d2d;
91+
}
92+
.view button.z1:active,
93+
.view button.z1.active {
94+
background-color: #353535;
95+
}
96+
}
7897
@media (max-width: 600px) {
7998
.view h1 {
8099
font-size: 300%;

0 commit comments

Comments
 (0)