Skip to content

Commit 7a62c72

Browse files
dschodscho
committed
Offer a dark mode if indicated by the operating system
Many operating systems let users choose between light and dark themes directly in the system settings. Web browsers can react to that via a @media query, which we do here. This commit draws heavily on the excellent guidance provided in https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/ as well as on SASS' `@mixin` feature (for more details, see https://sass-lang.com/documentation/at-rules/mixin/). Signed-off-by: Johannes Schindelin <[email protected]>
1 parent d45e972 commit 7a62c72

File tree

3 files changed

+67
-42
lines changed

3 files changed

+67
-42
lines changed

‎assets/sass/application.scss

Lines changed: 1 addition & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ $baseurl: "{{ .Site.BaseURL }}{{ if (and (ne .Site.BaseURL "/") (ne .Site.BaseUR
2727
@import 'book2';
2828
@import 'lists';
2929
@import 'about';
30+
@import 'dark-mode';
3031

3132
code {
3233
display: inline;
@@ -50,30 +51,3 @@ pre {
5051
.d-flex{
5152
display: flex;
5253
}
53-
54-
html {
55-
--orange: #{$orange};
56-
--orange-darker-5: #{darken($orange, 5%)};
57-
--blue: #{$blue};
58-
--font-color: #{$font-color};
59-
--aside-font-color: #{lighten($font-color, 20%)};
60-
--light-font-color: #{$light-font-color};
61-
--light-font-color-darker-10: #{darken($light-font-color, 10%)};
62-
--light-font-color-darker-25: #{darken($light-font-color, 25%)};
63-
--light-font-color-darker-35: #{darken($light-font-color, 35%)};
64-
--light-font-color-darker-55: #{darken($light-font-color, 55%)};
65-
--light-font-color-lighter-20: #{lighten($light-font-color, 20%)};
66-
--link-color: #{$link-color};
67-
--link-hover-color: #{lighten($link-color, 10%)};
68-
--fixed-width-font-color: #{$fixed-width-font-color};
69-
--base-border-color: #{$base-border-color};
70-
--base-border-color-darker-8: #{darken($base-border-color, 8%)};
71-
--base-border-color-lighter-10: #{lighten($base-border-color, 10%)};
72-
--callout-color: #{$callout-color};
73-
--highlight-bg-color: #{$highlight-bg-color};
74-
75-
--black-3: #{$black-3};
76-
--main-bg: #{$main-bg};
77-
--button-bg-color: #{$button-bg-color};
78-
--button-bg-hover-color: #{$button-bg-hover-color};
79-
}

‎assets/sass/dark-mode.css

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
@mixin mode($mode: light) {
2+
// Palette
3+
$orange: #f14e32;
4+
$blue: #009099;
5+
$font-color: #4e443c;
6+
$aside-font-color: lighten($font-color, 20%);
7+
$light-font-color: #9a9994;
8+
$link-color: #0388a6;
9+
$fixed-width-font-color: #4e443c;
10+
$button-bg-color: #dfddd554;
11+
$button-bg-hover-color: #fafafae5;
12+
$base-border-color: #d8d7cf;
13+
$callout-color: #e9e8e0;
14+
$highlight-bg-color: #eee0b5;
15+
$black-3: #333333;
16+
$main-bg: #fcfcfa;
17+
18+
@if $mode == dark {
19+
$orange: #d7834f;
20+
$blue: #007a7e;
21+
$font-color: #b3b1b1;
22+
$aside-font-color: darken($font-color, 10%);
23+
$light-font-color: #bdbbb0;
24+
$link-color: #d7834f;
25+
$fixed-width-font-color: #afa7a0;
26+
$button-bg-hover-color: #dfddd599;
27+
$base-border-color: #b3b2a7;
28+
$callout-color: #555555;
29+
$highlight-bg-color: #47412d;
30+
$black-3: #cccccc;
31+
$main-bg: #333333;
32+
}
33+
34+
:root {
35+
--orange: #{$orange};
36+
--orange-darker-5: #{darken($orange, 5%)};
37+
--blue: #{$blue};
38+
--font-color: #{$font-color};
39+
--aside-font-color: #{$aside-font-color};
40+
--light-font-color: #{$light-font-color};
41+
--light-font-color-darker-10: #{darken($light-font-color, 10%)};
42+
--light-font-color-darker-25: #{darken($light-font-color, 25%)};
43+
--light-font-color-darker-35: #{darken($light-font-color, 35%)};
44+
--light-font-color-darker-55: #{darken($light-font-color, 55%)};
45+
--light-font-color-lighter-20: #{lighten($light-font-color, 20%)};
46+
--link-color: #{$link-color};
47+
--link-hover-color: #{lighten($link-color, 10%)};
48+
--fixed-width-font-color: #{$fixed-width-font-color};
49+
--button-bg-color: #{$button-bg-color};
50+
--button-bg-hover-color: #{$button-bg-hover-color};
51+
--base-border-color: #{$base-border-color};
52+
--base-border-color-darker-8: #{darken($base-border-color, 8%)};
53+
--base-border-color-lighter-10: #{lighten($base-border-color, 10%)};
54+
--callout-color: #{$callout-color};
55+
--highlight-bg-color: #{$highlight-bg-color};
56+
57+
--black-3: #{$black-3};
58+
--main-bg: #{$main-bg};
59+
}
60+
}
61+
62+
@include mode
63+
64+
@media screen and (prefers-color-scheme: dark) {
65+
@include mode($mode: dark)
66+
}

‎assets/sass/variables.scss

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,3 @@
1-
// Palette
2-
$orange: #f14e32;
3-
$blue: #009099;
4-
$font-color: #4e443c;
5-
$light-font-color: #9a9994;
6-
$link-color: #0388a6;
7-
$fixed-width-font-color: #4e443c;
8-
$base-border-color: #d8d7cf;
9-
$callout-color: #e9e8e0;
10-
$highlight-bg-color: #eee0b5;
11-
$black-3: #333333;
12-
$main-bg: #fcfcfa;
13-
$button-bg-color: rgba(223, 221, 213, 0.33);
14-
$button-bg-hover-color: rgba(250, 250, 250, 0.9);
15-
161
// breakpoints
172
$mobile-xs: 480px;
183
$mobile-s: 576px;

0 commit comments

Comments
 (0)