Optimized the dark-mode toggle
This commit is contained in:
Cotes Chung
parent
a53afb912f
commit
65040ddd90
5 changed files with 78 additions and 53 deletions
|
|
@ -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();
|
||||
});
|
||||
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue