Skip to content

Commit 6f7ec98

Browse files
cotes2020cotes2020
committed
Optimized the dark-mode toggle
1 parent b61ae31 commit 6f7ec98

5 files changed

Lines changed: 78 additions & 53 deletions

File tree

_includes/dark-mode-toggle.html renamed to _includes/mode-toggle.html

Lines changed: 36 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
MIT License
88
-->
99

10-
<i id="mode-toggle"></i>
10+
<i class="mode-toggle fas fa-sun" light-mode-invisible></i>
11+
<i class="mode-toggle fas fa-moon" dark-mode-invisible></i>
1112

1213
<script type="text/javascript">
1314

@@ -17,63 +18,62 @@
1718
static get LIGHT_MODE() { return "light"; }
1819

1920
constructor() {
20-
if (this.isSysDarkMode) {
21-
ModeToggle.setLightIcon();
22-
} else {
23-
ModeToggle.setDarkIcon();
24-
}
25-
2621
if (this.mode != null) {
2722
if (this.mode == ModeToggle.DARK_MODE) {
28-
ModeToggle.setDark();
29-
} else if (this.mode == ModeToggle.LIGHT_MODE) {
30-
ModeToggle.setLight();
23+
if (!this.isDarkPrefer) {
24+
this.setDark();
25+
}
26+
} else {
27+
if (this.isDarkPrefer) {
28+
this.setLight();
29+
}
3130
}
3231
}
3332

3433
var self = this;
3534

36-
/* always follow system prefers */
35+
/* always follow the system prefers */
3736
this.sysDarkPrefers.addListener(function() {
38-
if (self.isSysDarkMode) {
39-
ModeToggle.setDark();
40-
} else {
41-
ModeToggle.setLight();
37+
38+
if (self.mode != null) {
39+
if (self.mode == ModeToggle.DARK_MODE) {
40+
if (!self.isDarkPrefer) {
41+
self.setDark();
42+
}
43+
44+
} else {
45+
if (self.isDarkPrefer) {
46+
self.setLight();
47+
}
48+
}
49+
50+
self.clearMode();
4251
}
43-
ModeToggle.clearMode();
4452
});
4553

4654
} /* constructor() */
4755

48-
static setDarkIcon() {
49-
$("#mode-toggle").removeClass("fas fa-sun").addClass("fas fa-moon");
50-
}
5156

52-
static setLightIcon() {
53-
$("#mode-toggle").removeClass("fas fa-moon").addClass("fas fa-sun");
54-
}
55-
56-
static setDark() {
57-
ModeToggle.setLightIcon();
57+
setDark() {
58+
$('html').attr(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
5859
sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
59-
$('html').removeClass('light-mode').addClass('dark-mode');
6060
}
6161

62-
static setLight() {
63-
ModeToggle.setDarkIcon();
62+
setLight() {
63+
$('html').attr(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
6464
sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
65-
$('html').removeClass('dark-mode').addClass('light-mode');
6665
}
6766

68-
static clearMode() {
67+
clearMode() {
68+
$('html').removeAttr(ModeToggle.MODE_KEY);
6969
sessionStorage.removeItem(ModeToggle.MODE_KEY);
7070
}
7171

7272
get sysDarkPrefers() {
7373
return window.matchMedia("(prefers-color-scheme: dark)");
7474
}
7575

76-
get isSysDarkMode() {
76+
get isDarkPrefer() {
7777
return this.sysDarkPrefers.matches;
7878
}
7979

@@ -82,19 +82,20 @@
8282
}
8383

8484
flipMode() {
85-
if ((this.mode == null && this.isSysDarkMode) ||
85+
if ((this.mode == null && this.isDarkPrefer) ||
8686
this.mode == ModeToggle.DARK_MODE) {
87-
ModeToggle.setLight();
87+
this.setLight();
88+
8889
} else { /* light mode or default-light */
89-
ModeToggle.setDark();
90+
this.setDark();
9091
}
9192
}
9293

9394
} /* ModeToggle */
9495

9596
let toggle = new ModeToggle();
9697

97-
$("#mode-toggle").click(function() {
98+
$(".mode-toggle").click(function() {
9899
toggle.flipMode();
99100
});
100101

‎_includes/sidebar.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
<div class="sidebar-bottom d-flex justify-content-around mt-4">
5959

6060
<span id="mode-toggle-wrapper" class="d-flex justify-content-center align-items-center">
61-
{% include dark-mode-toggle.html %}
61+
{% include mode-toggle.html %}
6262
</span>
6363

6464
<a href="https://github.com/{{ site.github.username }}" target="_blank">

‎assets/css/_dark/dark-main.scss‎

Lines changed: 34 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -100,19 +100,43 @@
100100

101101
}
102102

103-
/* Light scheme prefered (= dark scheme not prefered)
104-
* -> dark scheme triggered with <html class="dark-mode">
105-
*/
106-
html.dark-mode {
107-
@include dark-scheme;
103+
104+
@mixin light-mode-invisible {
105+
*[light-mode-invisible] {
106+
display: none;
107+
}
108+
}
109+
110+
@mixin dark-mode-invisible {
111+
*[dark-mode-invisible] {
112+
display: none;
113+
}
108114
}
109115

116+
@media (prefers-color-scheme: light) {
117+
118+
html:not([mode]), html[mode=light] {
119+
@include light-mode-invisible;
120+
}
121+
122+
html[mode=dark] {
123+
@include dark-scheme;
124+
@include dark-mode-invisible;
125+
}
126+
127+
} // light prefers
128+
110129

111130
@media (prefers-color-scheme: dark) {
112-
/* Dark scheme prefered
113-
* -> light scheme triggered with <html class="light-mode">
114-
*/
115-
html:not(.light-mode) {
131+
132+
html:not([mode]), html[mode=dark] {
116133
@include dark-scheme;
134+
@include dark-mode-invisible;
117135
}
118-
}
136+
137+
html[mode=light] {
138+
@include light-mode-invisible;
139+
}
140+
141+
} // dark prefers
142+

‎assets/css/_dark/dark-syntax.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* MIT Licensed
77
*/
88

9-
@mixin dark-sheme {
9+
@mixin dark-scheme {
1010
/* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */
1111
--highlight-pre-bg: #272822;
1212
--highlight-hll-bg: #272822;
@@ -86,13 +86,13 @@
8686
}
8787

8888
@media (prefers-color-scheme: dark) {
89-
html:not(.light-mode) { /* could be html.dark-mode */
90-
@include dark-sheme;
89+
html:not([mode]), html[mode=dark] {
90+
@include dark-scheme;
9191
}
9292
}
9393

9494
@media (prefers-color-scheme: light) {
95-
html.dark-mode {
96-
@include dark-sheme;
95+
html[mode=dark] {
96+
@include dark-scheme;
9797
}
9898
}

‎assets/css/syntax.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -182,13 +182,13 @@ div.language-terminal.highlighter-rouge td.rouge-code {
182182
}
183183

184184
@media (prefers-color-scheme: light) {
185-
html:not(.dark-mode) {
185+
html:not([mode=dark]) {
186186
@include light-syntax-base;
187187
}
188188
}
189189

190190
@media (prefers-color-scheme: dark) {
191-
html.light-mode {
191+
html[mode=light] {
192192
@include light-syntax-base;
193193
}
194194
}

0 commit comments

Comments
 (0)