Skip to content

Commit 8db178d

Browse files
senekorsenekor
committed
Avoid theme flicker if system setting is dark
1 parent d23b993 commit 8db178d

File tree

2 files changed

+83
-75
lines changed

2 files changed

+83
-75
lines changed

‎src/styles/app.scss

Lines changed: 83 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ $header-font: 'Alfa Slab One', serif;
66
// Switching theme will only work if JavaScript is enabled as well
77

88
// Default light theme
9-
:root, :root:not([data-theme]) {
9+
:root {
1010
--gray: #2a3439;
1111
--red: #a72145;
1212
--yellow: #ffc832;
@@ -33,32 +33,89 @@ $header-font: 'Alfa Slab One', serif;
3333
--rust-logo-filter: initial;
3434
}
3535

36-
// Dark theme
36+
// Dark theme variables
37+
:root {
38+
--dark-theme-gray: #2a3439;
39+
--dark-theme-red: #a72145;
40+
--dark-theme-yellow: #ffc832;
41+
--dark-theme-code-color: white;
42+
--dark-theme-code-bg-color: rgba(213, 203, 198, 0.05);
43+
--dark-theme-code-border-color: rgba(213, 203, 198, 0.25);
44+
--dark-theme-blockquote-color: rgb(195, 205, 210);
45+
--dark-theme-blockquote-bg-color: rgba(213, 203, 198, 0.05);
46+
--dark-theme-blockquote-left-border-color: rgb(195, 205, 210);
47+
--dark-theme-body-background-color: #181a1b;
48+
--dark-theme-body-foreground-color: #e8e6e3;
49+
--dark-theme-body-color: white;
50+
--dark-theme-div-brand-a-color: white;
51+
--dark-theme-white-elem-color: white;
52+
--dark-theme-white-elem-a: #d5cbc6;
53+
--dark-theme-nav-links-a: #d5cbc6;
54+
--dark-theme-publish-date-author: #d5cbc6;
55+
--dark-theme-section-header-h2-color: white;
56+
--dark-theme-theme-icon: #43484d;
57+
--dark-theme-theme-popup-border: #43484d;
58+
--dark-theme-theme-popup-bg: #141617;
59+
--dark-theme-theme-hover: #474c51;
60+
--dark-theme-theme-choice-color: #d5cbc6;
61+
--dark-theme-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+
}
63+
64+
// Obey dark theme system preference unless data-theme is set explicitly
65+
@media (prefers-color-scheme: dark) {
66+
:root:not([data-theme]) {
67+
--gray: var(--dark-theme-gray);
68+
--red: var(--dark-theme-red);
69+
--yellow: var(--dark-theme-yellow);
70+
--code-color: var(--dark-theme-code-color);
71+
--code-bg-color: var(--dark-theme-code-bg-color);
72+
--code-border-color: var(--dark-theme-code-border-color);
73+
--blockquote-color: var(--dark-theme-blockquote-color);
74+
--blockquote-bg-color: var(--dark-theme-blockquote-bg-color);
75+
--blockquote-left-border-color: var(--dark-theme-blockquote-left-border-color);
76+
--body-background-color: var(--dark-theme-body-background-color);
77+
--body-foreground-color: var(--dark-theme-body-foreground-color);
78+
--body-color: var(--dark-theme-body-color);
79+
--div-brand-a-color: var(--dark-theme-div-brand-a-color);
80+
--white-elem-color: var(--dark-theme-white-elem-color);
81+
--white-elem-a: var(--dark-theme-white-elem-a);
82+
--nav-links-a: var(--dark-theme-nav-links-a);
83+
--publish-date-author: var(--dark-theme-publish-date-author);
84+
--section-header-h2-color: var(--dark-theme-section-header-h2-color);
85+
--theme-icon: var(--dark-theme-theme-icon);
86+
--theme-popup-border: var(--dark-theme-theme-popup-border);
87+
--theme-popup-bg: var(--dark-theme-theme-popup-bg);
88+
--theme-hover: var(--dark-theme-theme-hover);
89+
--theme-choice-color: var(--dark-theme-theme-choice-color);
90+
--rust-logo-filter: var(--dark-theme-rust-logo-filter);
91+
}
92+
}
93+
// Set dark theme based on explicit data-theme setting
3794
: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);
95+
--gray: var(--dark-theme-gray);
96+
--red: var(--dark-theme-red);
97+
--yellow: var(--dark-theme-yellow);
98+
--code-color: var(--dark-theme-code-color);
99+
--code-bg-color: var(--dark-theme-code-bg-color);
100+
--code-border-color: var(--dark-theme-code-border-color);
101+
--blockquote-color: var(--dark-theme-blockquote-color);
102+
--blockquote-bg-color: var(--dark-theme-blockquote-bg-color);
103+
--blockquote-left-border-color: var(--dark-theme-blockquote-left-border-color);
104+
--body-background-color: var(--dark-theme-body-background-color);
105+
--body-foreground-color: var(--dark-theme-body-foreground-color);
106+
--body-color: var(--dark-theme-body-color);
107+
--div-brand-a-color: var(--dark-theme-div-brand-a-color);
108+
--white-elem-color: var(--dark-theme-white-elem-color);
109+
--white-elem-a: var(--dark-theme-white-elem-a);
110+
--nav-links-a: var(--dark-theme-nav-links-a);
111+
--publish-date-author: var(--dark-theme-publish-date-author);
112+
--section-header-h2-color: var(--dark-theme-section-header-h2-color);
113+
--theme-icon: var(--dark-theme-theme-icon);
114+
--theme-popup-border: var(--dark-theme-theme-popup-border);
115+
--theme-popup-bg: var(--dark-theme-theme-popup-bg);
116+
--theme-hover: var(--dark-theme-theme-hover);
117+
--theme-choice-color: var(--dark-theme-theme-choice-color);
118+
--rust-logo-filter: var(--dark-theme-rust-logo-filter);
62119
}
63120

64121
html {

‎src/styles/noscript.scss

Lines changed: 0 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,4 @@
11
// 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-
}
512

523
// Don't show the theme selector button when JavaScript is disabled
534
#theme-icon {

0 commit comments

Comments
 (0)