Skip to content

Commit d04f538

Browse files
cotes2020cotes2020
committed
Finished the rest dark mode toggle job.
1 parent c1a8abb commit d04f538

7 files changed

Lines changed: 154 additions & 90 deletions

File tree

‎_includes/dark-mode-toggle.html‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<!--
2+
Switch the mode between dark and light.
3+
4+
v2.1
5+
https://github.com/cotes2020/jekyll-theme-chirpy
6+
© 2020 Cotes Chung
7+
MIT License
8+
-->
9+
10+
<i id="mode-toggle"></i>
11+
12+
<script type="text/javascript">
13+
14+
class ModeToggle {
15+
static get MODE_KEY() { return "mode"; }
16+
static get DARK_MODE() { return "dark"; }
17+
static get LIGHT_MODE() { return "light"; }
18+
19+
constructor() {
20+
if (this.isSysDarkMode) {
21+
ModeToggle.setLightIcon();
22+
} else {
23+
ModeToggle.setDarkIcon();
24+
}
25+
26+
if (this.mode != null) {
27+
if (this.mode == ModeToggle.DARK_MODE) {
28+
ModeToggle.setDark();
29+
} else if (this.mode == ModeToggle.LIGHT_MODE) {
30+
ModeToggle.setLight();
31+
}
32+
}
33+
34+
var self = this;
35+
36+
/* always follow system prefers */
37+
this.sysDarkPrefers.addListener(function() {
38+
if (self.isSysDarkMode) {
39+
ModeToggle.setDark();
40+
} else {
41+
ModeToggle.setLight();
42+
}
43+
ModeToggle.clearMode();
44+
});
45+
46+
} /* constructor() */
47+
48+
static setDarkIcon() {
49+
$("#mode-toggle").removeClass("fas fa-sun").addClass("fas fa-moon");
50+
}
51+
52+
static setLightIcon() {
53+
$("#mode-toggle").removeClass("fas fa-moon").addClass("fas fa-sun");
54+
}
55+
56+
static setDark() {
57+
ModeToggle.setLightIcon();
58+
sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
59+
$('html').removeClass('light-mode').addClass('dark-mode');
60+
}
61+
62+
static setLight() {
63+
ModeToggle.setDarkIcon();
64+
sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
65+
$('html').removeClass('dark-mode').addClass('light-mode');
66+
}
67+
68+
static clearMode() {
69+
sessionStorage.removeItem(ModeToggle.MODE_KEY);
70+
}
71+
72+
get sysDarkPrefers() {
73+
return window.matchMedia("(prefers-color-scheme: dark)");
74+
}
75+
76+
get isSysDarkMode() {
77+
return this.sysDarkPrefers.matches;
78+
}
79+
80+
get mode() {
81+
return sessionStorage.getItem(ModeToggle.MODE_KEY);
82+
}
83+
84+
flipMode() {
85+
if ((this.mode == null && this.isSysDarkMode) ||
86+
this.mode == ModeToggle.DARK_MODE) {
87+
ModeToggle.setLight();
88+
} else { /* light mode or default-light */
89+
ModeToggle.setDark();
90+
}
91+
}
92+
93+
} /* ModeToggle */
94+
95+
let toggle = new ModeToggle();
96+
97+
$("#mode-toggle").click(function() {
98+
toggle.flipMode();
99+
});
100+
101+
</script>

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

Lines changed: 39 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,38 @@
4646
--tb-odd-bg: rgba(52, 53, 42, 0.52); /* odd rows of the posts' table */
4747
--tb-even-bg: rgb(31, 31, 34); /* even rows of the posts' table */
4848

49+
/* posts' toc */
50+
nav[data-toggle=toc] .nav-link.active,
51+
nav[data-toggle=toc] .nav-link.active:focus,
52+
nav[data-toggle=toc] .nav-link.active:hover,
53+
nav[data-toggle=toc] .nav>li>a:focus,
54+
nav[data-toggle=toc] .nav>li>a:hover {
55+
/* Override BS */
56+
color: var(--toc-highlight)!important;
57+
border-left-color: var(--toc-highlight)!important;
58+
}
59+
60+
/* categories */
61+
.categories.card,
62+
.list-group-item {
63+
background-color: var(--card-bg);
64+
}
65+
66+
.categories .card-header {
67+
background-color: var(--card-header-bg);
68+
}
69+
70+
.categories .list-group-item {
71+
border-left: none;
72+
border-right: none;
73+
padding-left: 2rem;
74+
border-color: var(--main-border);
75+
}
76+
77+
.categories .list-group-item:last-child {
78+
border-bottom-color: var(--card-bg);
79+
}
80+
4981
/* tags */
5082
--tag-border: rgb(59, 79, 88);
5183
--tag-shadow: rgb(32, 33, 33);
@@ -55,67 +87,27 @@
5587

5688
/* archives */
5789
--timeline-node-bg: rgb(150, 152, 156);
90+
91+
#archives li:nth-child(odd) {
92+
background-image: linear-gradient(to left,
93+
rgb(26, 26, 30), rgb(39, 39, 45), rgb(39, 39, 45), rgb(39, 39, 45), rgb(26, 26, 30));
94+
}
95+
5896
}
5997

6098
/* Light scheme prefered (= dark scheme not prefered)
6199
* -> dark scheme triggered with <html class="dark-mode">
62100
*/
63101
html.dark-mode {
64-
/* Dark scheme */
65102
@include dark-scheme;
66-
67-
// Hide element in dark color scheme
68-
// (visible in light scheme)
69-
.dark-mode-hidden {
70-
display: none;
71-
}
72-
73-
.light-mode-hidden {
74-
display: initial;
75-
}
76-
}
77-
78-
html:not(.dark-mode) {
79-
// Hide element in dark color scheme
80-
// (visible in light scheme)
81-
.light-mode-hidden {
82-
display: none;
83-
}
84-
85-
.dark-mode-hidden {
86-
display: initial;
87-
}
88103
}
89104

90105

91106
@media (prefers-color-scheme: dark) {
92107
/* Dark scheme prefered
93-
* -> light scheme triggered with <html class="light-mode">
108+
* -> light scheme triggered with <html class="light-mode">
94109
*/
95110
html:not(.light-mode) {
96-
/* Dark scheme */
97111
@include dark-scheme;
98-
// Hide element in dark color scheme
99-
// (visible in light scheme)
100-
.dark-mode-hidden {
101-
display: none;
102-
}
103-
104-
.light-mode-hidden {
105-
display: initial;
106-
}
107112
}
108-
109-
html.light-mode {
110-
/* Light scheme */
111-
// Hide element in dark color scheme
112-
// (visible in light scheme)
113-
.light-mode-hidden {
114-
display: none;
115-
}
116-
.dark-mode-hidden {
117-
display: initial;
118-
}
119-
}
120-
121113
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@
8686
}
8787

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

‎assets/css/archives.scss‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -147,10 +147,3 @@
147147
letter-spacing: 0;
148148
}
149149
}
150-
151-
@media (prefers-color-scheme: dark) {
152-
#archives li:nth-child(odd) {
153-
background-image: linear-gradient(to left,
154-
rgb(26, 26, 30), rgb(39, 39, 45), rgb(39, 39, 45), rgb(39, 39, 45), rgb(26, 26, 30));
155-
}
156-
}

‎assets/css/categories.scss‎

Lines changed: 0 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -64,25 +64,3 @@
6464
-webkit-transform: rotate(-90deg); /* Safari 3-8 */
6565
transform: rotate(-90deg);
6666
}
67-
68-
@media (prefers-color-scheme: dark) {
69-
.categories.card,
70-
.list-group-item {
71-
background-color: var(--card-bg);
72-
}
73-
74-
.categories .card-header {
75-
background-color: var(--card-header-bg);
76-
}
77-
78-
.categories .list-group-item {
79-
border-left: none;
80-
border-right: none;
81-
padding-left: 2rem;
82-
border-color: var(--main-border);
83-
}
84-
85-
.categories .list-group-item:last-child {
86-
border-bottom-color: var(--card-bg);
87-
}
88-
}

‎assets/css/post.scss‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -269,15 +269,3 @@
269269
margin-right: calc((100% - 1150px) / 8 + 300px);
270270
}
271271
}
272-
273-
@media (prefers-color-scheme: dark) {
274-
nav[data-toggle=toc] .nav-link.active,
275-
nav[data-toggle=toc] .nav-link.active:focus,
276-
nav[data-toggle=toc] .nav-link.active:hover,
277-
nav[data-toggle=toc] .nav>li>a:focus,
278-
nav[data-toggle=toc] .nav>li>a:hover {
279-
/* Override BS */
280-
color: var(--toc-highlight)!important;
281-
border-left-color: var(--toc-highlight)!important;
282-
}
283-
}

‎assets/css/syntax.scss‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,7 @@ div.language-terminal.highlighter-rouge td.rouge-code {
165165
padding: .8rem 1rem;
166166
}
167167

168-
@media (prefers-color-scheme: light) {
168+
@mixin light-syntax-base {
169169
.highlight {
170170
-moz-box-shadow: inset 0 0 2px #c2c6cc;
171171
-webkit-box-shadow: inset 0 0 2px #c2c6cc;
@@ -180,3 +180,15 @@ div.language-terminal.highlighter-rouge td.rouge-code {
180180
border: 1px solid #e9ecef;
181181
}
182182
}
183+
184+
@media (prefers-color-scheme: light) {
185+
html:not(.dark-mode) {
186+
@include light-syntax-base;
187+
}
188+
}
189+
190+
@media (prefers-color-scheme: dark) {
191+
html.light-mode {
192+
@include light-syntax-base;
193+
}
194+
}

0 commit comments

Comments
 (0)