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

Improved theme mode switching logic.

Browse source
This commit is contained in:
Cotes Chung 2020-04-02 00:30:00 +08:00
parent a9245494c9
commit ad992db75f
1 changed files with 36 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
_includes/mode-toggle.html
View file

@ -20,11 +20,11 @@
constructor() {
if (this.mode != null) {
if (this.mode == ModeToggle.DARK_MODE) {
if (!this.isDarkPrefer) {
if (!this.isSysDarkPrefer) {
this.setDark();
}
} else {
if (this.isDarkPrefer) {
if (this.isSysDarkPrefer) {
this.setLight();
}
}
@ -34,15 +34,14 @@
/* always follow the system prefers */
this.sysDarkPrefers.addListener(function() {
if (self.mode != null) {
if (self.mode == ModeToggle.DARK_MODE) {
if (!self.isDarkPrefer) {
if (!self.isSysDarkPrefer) {
self.setDark();
}
} else {
if (self.isDarkPrefer) {
if (self.isSysDarkPrefer) {
self.setLight();
}
}
@ -69,28 +68,45 @@
sessionStorage.removeItem(ModeToggle.MODE_KEY);
}
get sysDarkPrefers() {
return window.matchMedia("(prefers-color-scheme: dark)");
}
get sysDarkPrefers() { return window.matchMedia("(prefers-color-scheme: dark)"); }
get isDarkPrefer() {
return this.sysDarkPrefers.matches;
}
get isSysDarkPrefer() { return this.sysDarkPrefers.matches; }
get mode() {
return sessionStorage.getItem(ModeToggle.MODE_KEY);
}
get isDarkMode() { return this.mode == ModeToggle.DARK_MODE; }
get isLightkMode() { return this.mode == ModeToggle.LIGHT_MODE; }
get hasMode() { return this.mode != null; }
get mode() { return sessionStorage.getItem(ModeToggle.MODE_KEY); }
flipMode() {
if ((this.mode == null && this.isDarkPrefer) ||
this.mode == ModeToggle.DARK_MODE) {
if (this.hasMode) {
if (this.isSysDarkPrefer) {
if (this.isLightkMode) {
this.clearMode();
} else {
this.setLight();
}
} else { /* light mode or default-light */
} else {
if (this.isDarkMode) {
this.clearMode();
} else {
this.setDark();
}
}
} else {
if (this.isSysDarkPrefer) {
this.setLight();
} else {
this.setDark();
}
}
} /* flipMode() */
} /* ModeToggle */
let toggle = new ModeToggle();