Optimized the dark-mode toggle

This commit is contained in:
Cotes Chung 2020-02-14 23:36:38 +08:00
parent a53afb912f
commit 65040ddd90
5 changed files with 78 additions and 53 deletions

View file

@ -7,7 +7,8 @@
MIT License
-->
<i id="mode-toggle"></i>
<i class="mode-toggle fas fa-sun" light-mode-invisible></i>
<i class="mode-toggle fas fa-moon" dark-mode-invisible></i>
<script type="text/javascript">
@ -17,55 +18,54 @@
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();
if (!this.isDarkPrefer) {
this.setDark();
}
} else {
if (this.isDarkPrefer) {
this.setLight();
}
}
}
var self = this;
/* always follow system prefers */
/* always follow the system prefers */
this.sysDarkPrefers.addListener(function() {
if (self.isSysDarkMode) {
ModeToggle.setDark();
} else {
ModeToggle.setLight();
if (self.mode != null) {
if (self.mode == ModeToggle.DARK_MODE) {
if (!self.isDarkPrefer) {
self.setDark();
}
} else {
if (self.isDarkPrefer) {
self.setLight();
}
}
self.clearMode();
}
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();
setDark() {
$('html').attr(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
$('html').removeClass('light-mode').addClass('dark-mode');
}
static setLight() {
ModeToggle.setDarkIcon();
setLight() {
$('html').attr(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
$('html').removeClass('dark-mode').addClass('light-mode');
}
static clearMode() {
clearMode() {
$('html').removeAttr(ModeToggle.MODE_KEY);
sessionStorage.removeItem(ModeToggle.MODE_KEY);
}
@ -73,7 +73,7 @@
return window.matchMedia("(prefers-color-scheme: dark)");
}
get isSysDarkMode() {
get isDarkPrefer() {
return this.sysDarkPrefers.matches;
}
@ -82,11 +82,12 @@
}
flipMode() {
if ((this.mode == null && this.isSysDarkMode) ||
if ((this.mode == null && this.isDarkPrefer) ||
this.mode == ModeToggle.DARK_MODE) {
ModeToggle.setLight();
this.setLight();
} else { /* light mode or default-light */
ModeToggle.setDark();
this.setDark();
}
}
@ -94,7 +95,7 @@
let toggle = new ModeToggle();
$("#mode-toggle").click(function() {
$(".mode-toggle").click(function() {
toggle.flipMode();
});

View file

@ -58,7 +58,7 @@
<div class="sidebar-bottom d-flex justify-content-around mt-4">
<span id="mode-toggle-wrapper" class="d-flex justify-content-center align-items-center">
{% include dark-mode-toggle.html %}
{% include mode-toggle.html %}
</span>
<a href="https://github.com/{{ site.github.username }}" target="_blank">

View file

@ -100,19 +100,43 @@
}
/* Light scheme prefered (= dark scheme not prefered)
* -> dark scheme triggered with <html class="dark-mode">
*/
html.dark-mode {
@include dark-scheme;
@mixin light-mode-invisible {
*[light-mode-invisible] {
display: none;
}
}
@mixin dark-mode-invisible {
*[dark-mode-invisible] {
display: none;
}
}
@media (prefers-color-scheme: light) {
html:not([mode]), html[mode=light] {
@include light-mode-invisible;
}
html[mode=dark] {
@include dark-scheme;
@include dark-mode-invisible;
}
} // light prefers
@media (prefers-color-scheme: dark) {
/* Dark scheme prefered
* -> light scheme triggered with <html class="light-mode">
*/
html:not(.light-mode) {
html:not([mode]), html[mode=dark] {
@include dark-scheme;
@include dark-mode-invisible;
}
}
html[mode=light] {
@include light-mode-invisible;
}
} // dark prefers

View file

@ -6,7 +6,7 @@
* MIT Licensed
*/
@mixin dark-sheme {
@mixin dark-scheme {
/* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */
--highlight-pre-bg: #272822;
--highlight-hll-bg: #272822;
@ -86,13 +86,13 @@
}
@media (prefers-color-scheme: dark) {
html:not(.light-mode) { /* could be html.dark-mode */
@include dark-sheme;
html:not([mode]), html[mode=dark] {
@include dark-scheme;
}
}
@media (prefers-color-scheme: light) {
html.dark-mode {
@include dark-sheme;
html[mode=dark] {
@include dark-scheme;
}
}

View file

@ -182,13 +182,13 @@ div.language-terminal.highlighter-rouge td.rouge-code {
}
@media (prefers-color-scheme: light) {
html:not(.dark-mode) {
html:not([mode=dark]) {
@include light-syntax-base;
}
}
@media (prefers-color-scheme: dark) {
html.light-mode {
html[mode=light] {
@include light-syntax-base;
}
}