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

Optimized the dark-mode toggle

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

71
_includes/dark-mode-toggle.html → _includes/mode-toggle.html
View file

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

2
_includes/sidebar.html
View file

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

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

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

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

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

4
assets/css/syntax.scss
View file

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