asandikci.com/web
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

Finished the rest dark mode toggle job.

Browse source
This commit is contained in:
Cotes Chung 2020-02-12 00:04:59 +08:00
parent 7e92a32243
commit 58af2fefce
7 changed files with 154 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

101
_includes/dark-mode-toggle.html Normal file
View file

@ -0,0 +1,101 @@
<!--
Switch the mode between dark and light.
v2.1
https://github.com/cotes2020/jekyll-theme-chirpy
© 2020 Cotes Chung
MIT License
-->
<i id="mode-toggle"></i>
<script type="text/javascript">
class ModeToggle {
static get MODE_KEY() { return "mode"; }
static get DARK_MODE() { return "dark"; }
static get LIGHT_MODE() { return "light"; }
constructor() {
if (this.isSysDarkMode) {
ModeToggle.setLightIcon();
} else {
ModeToggle.setDarkIcon();
}
if (this.mode != null) {
if (this.mode == ModeToggle.DARK_MODE) {
ModeToggle.setDark();
} else if (this.mode == ModeToggle.LIGHT_MODE) {
ModeToggle.setLight();
}
}
var self = this;
/* always follow system prefers */
this.sysDarkPrefers.addListener(function() {
if (self.isSysDarkMode) {
ModeToggle.setDark();
} else {
ModeToggle.setLight();
}
ModeToggle.clearMode();
});
} /* constructor() */
static setDarkIcon() {
$("#mode-toggle").removeClass("fas fa-sun").addClass("fas fa-moon");
}
static setLightIcon() {
$("#mode-toggle").removeClass("fas fa-moon").addClass("fas fa-sun");
}
static setDark() {
ModeToggle.setLightIcon();
sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
$('html').removeClass('light-mode').addClass('dark-mode');
}
static setLight() {
ModeToggle.setDarkIcon();
sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
$('html').removeClass('dark-mode').addClass('light-mode');
}
static clearMode() {
sessionStorage.removeItem(ModeToggle.MODE_KEY);
}
get sysDarkPrefers() {
return window.matchMedia("(prefers-color-scheme: dark)");
}
get isSysDarkMode() {
return this.sysDarkPrefers.matches;
}
get mode() {
return sessionStorage.getItem(ModeToggle.MODE_KEY);
}
flipMode() {
if ((this.mode == null && this.isSysDarkMode) ||
this.mode == ModeToggle.DARK_MODE) {
ModeToggle.setLight();
} else { /* light mode or default-light */
ModeToggle.setDark();
}
}
} /* ModeToggle */
let toggle = new ModeToggle();
$("#mode-toggle").click(function() {
toggle.flipMode();
});
</script>

84
assets/css/_dark/dark-main.scss
View file

@ -46,6 +46,38 @@
--tb-odd-bg: rgba(52, 53, 42, 0.52); /* odd rows of the posts' table */ --tb-odd-bg: rgba(52, 53, 42, 0.52); /* odd rows of the posts' table */
--tb-even-bg: rgb(31, 31, 34); /* even rows of the posts' table */ --tb-even-bg: rgb(31, 31, 34); /* even rows of the posts' table */
/* posts' toc */
nav[data-toggle=toc] .nav-link.active,
nav[data-toggle=toc] .nav-link.active:focus,
nav[data-toggle=toc] .nav-link.active:hover,
nav[data-toggle=toc] .nav>li>a:focus,
nav[data-toggle=toc] .nav>li>a:hover {
/* Override BS */
color: var(--toc-highlight)!important;
border-left-color: var(--toc-highlight)!important;
}
/* categories */
.categories.card,
.list-group-item {
background-color: var(--card-bg);
}
.categories .card-header {
background-color: var(--card-header-bg);
}
.categories .list-group-item {
border-left: none;
border-right: none;
padding-left: 2rem;
border-color: var(--main-border);
}
.categories .list-group-item:last-child {
border-bottom-color: var(--card-bg);
}
/* tags */ /* tags */
--tag-border: rgb(59, 79, 88); --tag-border: rgb(59, 79, 88);
--tag-shadow: rgb(32, 33, 33); --tag-shadow: rgb(32, 33, 33);
@ -55,36 +87,19 @@
/* archives */ /* archives */
--timeline-node-bg: rgb(150, 152, 156); --timeline-node-bg: rgb(150, 152, 156);
#archives li:nth-child(odd) {
background-image: linear-gradient(to left,
rgb(26, 26, 30), rgb(39, 39, 45), rgb(39, 39, 45), rgb(39, 39, 45), rgb(26, 26, 30));
}
} }
/* Light scheme prefered (= dark scheme not prefered) /* Light scheme prefered (= dark scheme not prefered)
* -> dark scheme triggered with <html class="dark-mode"> * -> dark scheme triggered with <html class="dark-mode">
*/ */
html.dark-mode { html.dark-mode {
/* Dark scheme */
@include dark-scheme; @include dark-scheme;
// Hide element in dark color scheme
// (visible in light scheme)
.dark-mode-hidden {
display: none;
}
.light-mode-hidden {
display: initial;
}
}
html:not(.dark-mode) {
// Hide element in dark color scheme
// (visible in light scheme)
.light-mode-hidden {
display: none;
}
.dark-mode-hidden {
display: initial;
}
} }
@ -93,29 +108,6 @@ html:not(.dark-mode) {
* -> light scheme triggered with <html class="light-mode"> * -> light scheme triggered with <html class="light-mode">
*/ */
html:not(.light-mode) { html:not(.light-mode) {
/* Dark scheme */
@include dark-scheme; @include dark-scheme;
// Hide element in dark color scheme
// (visible in light scheme)
.dark-mode-hidden {
display: none;
}
.light-mode-hidden {
display: initial;
} }
} }
html.light-mode {
/* Light scheme */
// Hide element in dark color scheme
// (visible in light scheme)
.light-mode-hidden {
display: none;
}
.dark-mode-hidden {
display: initial;
}
}
}

2
assets/css/_dark/dark-syntax.scss
View file

@ -86,7 +86,7 @@
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
html:not(.light-mode) { html:not(.light-mode) { /* could be html.dark-mode */
@include dark-sheme; @include dark-sheme;
} }
} }

7
assets/css/archives.scss
View file

@ -147,10 +147,3 @@
letter-spacing: 0; letter-spacing: 0;
} }
} }
@media (prefers-color-scheme: dark) {
#archives li:nth-child(odd) {
background-image: linear-gradient(to left,
rgb(26, 26, 30), rgb(39, 39, 45), rgb(39, 39, 45), rgb(39, 39, 45), rgb(26, 26, 30));
}
}

22
assets/css/categories.scss
View file

@ -64,25 +64,3 @@
-webkit-transform: rotate(-90deg); /* Safari 3-8 */ -webkit-transform: rotate(-90deg); /* Safari 3-8 */
transform: rotate(-90deg); transform: rotate(-90deg);
} }
@media (prefers-color-scheme: dark) {
.categories.card,
.list-group-item {
background-color: var(--card-bg);
}
.categories .card-header {
background-color: var(--card-header-bg);
}
.categories .list-group-item {
border-left: none;
border-right: none;
padding-left: 2rem;
border-color: var(--main-border);
}
.categories .list-group-item:last-child {
border-bottom-color: var(--card-bg);
}
}

12
assets/css/post.scss
View file

@ -269,15 +269,3 @@
margin-right: calc((100% - 1150px) / 8 + 300px); margin-right: calc((100% - 1150px) / 8 + 300px);
} }
} }
@media (prefers-color-scheme: dark) {
nav[data-toggle=toc] .nav-link.active,
nav[data-toggle=toc] .nav-link.active:focus,
nav[data-toggle=toc] .nav-link.active:hover,
nav[data-toggle=toc] .nav>li>a:focus,
nav[data-toggle=toc] .nav>li>a:hover {
/* Override BS */
color: var(--toc-highlight)!important;
border-left-color: var(--toc-highlight)!important;
}
}

14
assets/css/syntax.scss
View file

@ -165,7 +165,7 @@ div.language-terminal.highlighter-rouge td.rouge-code {
padding: .8rem 1rem; padding: .8rem 1rem;
} }
@media (prefers-color-scheme: light) { @mixin light-syntax-base {
.highlight { .highlight {
-moz-box-shadow: inset 0 0 2px #c2c6cc; -moz-box-shadow: inset 0 0 2px #c2c6cc;
-webkit-box-shadow: inset 0 0 2px #c2c6cc; -webkit-box-shadow: inset 0 0 2px #c2c6cc;
@ -180,3 +180,15 @@ div.language-terminal.highlighter-rouge td.rouge-code {
border: 1px solid #e9ecef; border: 1px solid #e9ecef;
} }
} }
@media (prefers-color-scheme: light) {
html:not(.dark-mode) {
@include light-syntax-base;
}
}
@media (prefers-color-scheme: dark) {
html.light-mode {
@include light-syntax-base;
}
}