Skip to content

Commit 21ac852

Browse files
ManishearthManishearth
authored
Merge pull request #1343 from apiraino/dark-mode
Add dark mode scss
2 parents dff7a88 + 614b18b commit 21ac852

File tree

8 files changed

+264
-32
lines changed

8 files changed

+264
-32
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,4 @@ site
55
static/styles/vendor.css
66
static/styles/app.css
77
static/styles/fonts.css
8+
static/styles/noscript.css

‎src/lib.rs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ impl<'a> Generator<'a> {
8888
self.render_blog(blog)?;
8989
}
9090
self.compile_sass("app")?;
91+
self.compile_sass("noscript")?;
9192
self.compile_sass("fonts")?;
9293
self.concat_vendor_css(vec!["skeleton", "tachyons"])?;
9394
self.copy_static_files()?;

‎src/styles/app.scss

Lines changed: 131 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,66 @@
33
$body-font: 'Fira Sans', Helvetica, Arial, sans-serif;
44
$header-font: 'Alfa Slab One', serif;
55

6-
$gray: #2a3439;
7-
$red: #a72145;
8-
$green: #0b7261;
9-
$purple: #2e2459;
10-
$yellow: #ffc832;
6+
// Switching theme will only work if JavaScript is enabled as well
7+
8+
// Default light theme
9+
:root, :root:not([data-theme]) {
10+
--gray: #2a3439;
11+
--red: #a72145;
12+
--yellow: #ffc832;
13+
--code-color: black;
14+
--code-bg-color: rgba(42, 52, 57, 0.05);
15+
--code-border-color: rgba(42, 52, 57, 0.25);
16+
--blockquote-color: black;
17+
--blockquote-bg-color: rgb(247, 249, 249);
18+
--blockquote-left-border-color: rgb(195, 205, 210);
19+
--body-background-color: white;
20+
--body-foreground-color: white;
21+
--body-color: rgb(34,34,34);
22+
--div-brand-a-color: black;
23+
--white-elem-color: black;
24+
--white-a: #2a3439;
25+
--nav-links-a: #2a3439;
26+
--publish-date-author: #2a3439;
27+
--section-header-h2-color: black;
28+
--theme-icon: #43484d;
29+
--theme-popup-border: #43484d;
30+
--theme-popup-bg: white;
31+
--theme-hover: #cacaca;
32+
--theme-choice-color: black;
33+
--rust-logo-filter: initial;
34+
}
35+
36+
// Dark theme
37+
:root[data-theme='dark'] {
38+
--gray: #2a3439;
39+
--red: #a72145;
40+
--yellow: #ffc832;
41+
--code-color: white;
42+
--code-bg-color: rgba(213, 203, 198, 0.05);
43+
--code-border-color: rgba(213, 203, 198, 0.25);
44+
--blockquote-color: rgb(195, 205, 210);
45+
--blockquote-bg-color: rgba(213, 203, 198, 0.05);
46+
--blockquote-left-border-color: rgb(195, 205, 210);
47+
--body-background-color: #181a1b;
48+
--body-foreground-color: #e8e6e3;
49+
--body-color: white;
50+
--div-brand-a-color: white;
51+
--white-elem-color: white;
52+
--white-elem-a: #d5cbc6;
53+
--nav-links-a: #d5cbc6;
54+
--publish-date-author: #d5cbc6;
55+
--section-header-h2-color: white;
56+
--theme-icon: #43484d;
57+
--theme-popup-border: #43484d;
58+
--theme-popup-bg: #141617;
59+
--theme-hover: #474c51;
60+
--theme-choice-color: #d5cbc6;
61+
--rust-logo-filter: drop-shadow(1px 0 0px #fff) drop-shadow(0 1px 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 -1px 0 #fff);
62+
}
1163

1264
html {
13-
font-size: 62.5%
65+
font-size: 62.5%;
1466
}
1567

1668
@media screen and (min-width: 30em) {
@@ -21,7 +73,8 @@ html {
2173

2274
body {
2375
font-family: $body-font;
24-
background-color: white;
76+
background-color: var(--body-background-color);
77+
color: var(--body-color);
2578

2679
/* Ensure the footer is always at the bottom of the screen */
2780
min-height: 100vh;
@@ -35,8 +88,8 @@ body {
3588
blockquote {
3689
font-style: italic;
3790
position: relative;
38-
background-color: lighten($gray, 78%);
39-
border-left: 8px solid lighten($gray, 60%);
91+
background-color: var(--blockquote-bg-color);
92+
border-left: 8px solid var(--blockquote-left-border-color);
4093
border-radius: 5px;
4194
margin: 0;
4295
margin-bottom: 2rem;
@@ -80,6 +133,7 @@ section {
80133
margin: 0;
81134
padding: 0;
82135
letter-spacing: 1px;
136+
color: var(--section-header-h2-color);
83137
}
84138
}
85139
}
@@ -110,7 +164,8 @@ ul.nav, ul.nav li {
110164
}
111165

112166
.nav a {
113-
color: $gray;
167+
color: var(--gray);
168+
color: var(--nav-links-a);
114169
}
115170

116171
div.brand {
@@ -123,7 +178,7 @@ div.brand {
123178
margin-top: $v-top;
124179

125180
& a {
126-
color: black;
181+
color: var(--div-brand-a-color);
127182
text-decoration: none;
128183
}
129184

@@ -139,30 +194,30 @@ div.brand {
139194
}
140195

141196
.white {
142-
color: black;
197+
color: var(--white-elem-color);
143198
.highlight {
144-
background-color: $yellow;
199+
background-color: var(--yellow);
145200
}
146201
a {
147-
color: $gray;
202+
color: var(--white-elem-a);
148203
text-decoration: underline;
149204
}
150205
.button.button-secondary {
151-
background-color: $yellow;
152-
border: 1px solid $yellow;
153-
color: $gray;
206+
background-color: var(--yellow);
207+
color: var(--gray);
208+
border: 1px solid var(--yellow);
154209
text-decoration: none;
155210
display: block;
156211
overflow: hidden;
157212
text-overflow: ellipsis;
158213
&:hover, &:focus {
159-
border-color: $gray;
214+
border-color: var(--gray);
160215
}
161216
}
162217
code {
163-
color: black;
164-
background-color: rgba($gray, 0.05);
165-
border: 1px solid rgba($gray, 0.25);
218+
color: var(--code-color);
219+
background-color: var(--code-bg-color);
220+
border: 1px solid var(--code-border-color);
166221
}
167222

168223
a.anchor::before {
@@ -173,7 +228,7 @@ div.brand {
173228
margin-left: -1em;
174229
text-decoration: none;
175230
opacity: 0.7;
176-
color: $gray;
231+
color: var(--gray);
177232
font-weight: normal;
178233
}
179234
:hover > a.anchor::before {
@@ -194,18 +249,18 @@ ul {
194249
}
195250

196251
.posts {
197-
background-color: $gray;
198-
color: white;
252+
background-color: var(--gray);
253+
color: var(--body-foreground-color);
199254
.highlight {
200-
background-color: $red;
255+
background-color: var(--red);
201256
}
202257
a {
203-
color: white;
258+
color: var(--body-foreground-color);
204259
text-decoration: underline;
205260
}
206261
.button.button-secondary {
207-
background-color: $red;
208-
border: 1px solid $red;
262+
background-color: var(--red);
263+
border: 1px solid var(--red);
209264
color: white;
210265
text-decoration: none;
211266
display: block;
@@ -230,7 +285,7 @@ table.post-list a:hover {
230285
}
231286

232287
.publish-date-author {
233-
color: $gray;
288+
color: var(--publish-date-author);
234289
margin: -60px 0 60px 0;
235290
}
236291

@@ -245,11 +300,11 @@ footer {
245300
}
246301

247302
a {
248-
color: $yellow;
303+
color: var(--yellow);
249304
text-decoration: none;
250305

251306
&:hover {
252-
color: $yellow;
307+
color: var(--yellow);
253308
text-decoration: underline;
254309
}
255310
}
@@ -324,3 +379,48 @@ header h1 {
324379
}
325380
}
326381

382+
// Theme switch popup
383+
// theme selector visible only if JavaScript is available
384+
385+
.theme-icon {
386+
display: none;
387+
line-height: 2em;
388+
border: 2px solid var(--theme-icon);
389+
border-radius: 5px;
390+
padding: 0px 5px;
391+
color: var(--theme-choice-color);
392+
&:hover {
393+
color: var(--theme-choice-color);
394+
}
395+
}
396+
397+
#theme-choice {
398+
display: none;
399+
border: 2px solid var(--theme-popup-border);
400+
border-radius: 5px;
401+
color: var(--theme-choice-color);
402+
background: var(--theme-popup-bg);
403+
position: absolute;
404+
list-style: none;
405+
font-weight: 400;
406+
padding: 0px;
407+
// counterbalance vendored skeleton.css
408+
margin: 0.2em -0.5em;
409+
}
410+
411+
.theme-item {
412+
padding: 0px 5px;
413+
}
414+
415+
#theme-choice.showThemeDropdown {
416+
display: block;
417+
z-index: 1;
418+
}
419+
420+
li.theme-item:hover {
421+
background-color: var(--theme-hover);
422+
}
423+
424+
.rust-logo {
425+
filter: var(--rust-logo-filter);
426+
}

‎src/styles/noscript.scss

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
// This stylesheet is used when the user agent has no JavaScript capabilities (or has it disabled)
2+
// Sets dark theme according to user agent preferences
3+
4+
// Default light theme
5+
:root, :root:not([data-theme]) {
6+
--gray: #2a3439;
7+
--red: #a72145;
8+
--yellow: #ffc832;
9+
--code-color: black;
10+
--code-bg-color: rgba(42, 52, 57, 0.05);
11+
--code-border-color: rgba(42, 52, 57, 0.25);
12+
--blockquote-color: black;
13+
--blockquote-bg-color: rgb(247, 249, 249);
14+
--blockquote-left-border-color: rgb(195, 205, 210);
15+
--body-background-color: white;
16+
--body-foreground-color: white;
17+
--body-color: rgb(34,34,34);
18+
--div-brand-a-color: black;
19+
--white-elem-color: black;
20+
--white-a: #2a3439;
21+
--nav-links-a: #2a3439;
22+
--publish-date-author: #2a3439;
23+
--section-header-h2-color: black;
24+
--rust-logo-filter: initial;
25+
}
26+
27+
// Dark theme (probed from user prefs)
28+
@media (prefers-color-scheme: dark) {
29+
:root, :root:not([data-theme]) {
30+
--gray: #2a3439;
31+
--red: #a72145;
32+
--yellow: #ffc832;
33+
--code-color: white;
34+
--code-bg-color: rgba(213, 203, 198, 0.05);
35+
--code-border-color: rgba(213, 203, 198, 0.25);
36+
--blockquote-color: rgb(195, 205, 210);
37+
--blockquote-bg-color: rgba(213, 203, 198, 0.05);
38+
--blockquote-left-border-color: rgb(195, 205, 210);
39+
--body-background-color: #181a1b;
40+
--body-foreground-color: #e8e6e3;
41+
--body-color: white;
42+
--div-brand-a-color: white;
43+
--white-elem-color: white;
44+
--white-elem-a: #d5cbc6;
45+
--nav-links-a: #d5cbc6;
46+
--publish-date-author: #d5cbc6;
47+
--section-header-h2-color: white;
48+
--rust-logo-filter: drop-shadow(1px 0 0px #fff) drop-shadow(0 1px 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 -1px 0 #fff);
49+
}
50+
}
51+
52+
// Don't show the theme selector button when JavaScript is disabled
53+
#theme-icon {
54+
display: none !important;
55+
}

0 commit comments

Comments
 (0)