perf: optimize dark and light mode toggle

This commit is contained in:
XPoet 2021-01-24 19:54:44 +08:00
parent df1f9213b6
commit 96286031ff
4 changed files with 29 additions and 65 deletions

View File

@ -56,6 +56,7 @@ code-theme(mode) {
code-theme('light');
}
@media (prefers-color-scheme: dark) {
:root {
code-theme('dark');

View File

@ -136,22 +136,23 @@ root-color(mode) {
}
:root {
root-color('light');
}
@media (prefers-color-scheme: dark) {
:root {
root-color('dark');
}
}
@media (prefers-color-scheme: light) {
:root {
root-color('light');
}
}
.light-mode {
root-color('light');
}
.dark-mode {
root-color('dark');
}

View File

@ -1,88 +1,51 @@
/* global KEEP */
KEEP.initModeToggle = () => {
KEEP.utils.modeToggle = {
localStorageKey: 'KEEP',
modeToggleButton_dom: document.querySelector('.tool-dark-light-toggle'),
iconDom: document.querySelector('.tool-dark-light-toggle i'),
articleContent: document.querySelector('.main-content'),
setItemUtil(modeClass) {
const isDark = document.body.className.indexOf('light-mode') === -1;
let currentScheme = "";
if (isDark) {
this.enableLightMode();
currentScheme = "light";
} else {
this.enableDarkMode();
currentScheme = "dark";
}
localStorage.setItem(this.localStorageKey, JSON.stringify(
{
prefersColorScheme: currentScheme,
isDark: !isDark
}
));
},
enableLightMode() {
document.body.classList.remove('dark-mode');
document.body.classList.add('light-mode');
this.articleContent.classList.remove('night-code-theme');
this.iconDom.className = 'fas fa-moon';
KEEP.styleStatus.isDark = false;
KEEP.setStyleStatus();
},
enableDarkMode() {
document.body.classList.remove('light-mode');
document.body.classList.add('dark-mode');
this.articleContent.classList.add('night-code-theme');
this.iconDom.className = 'fas fa-sun';
KEEP.styleStatus.isDark = true;
KEEP.setStyleStatus();
},
isDarkPrefersColorScheme() {
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
},
initModeStatus() {
this.modeConfig = JSON.parse(localStorage.getItem(this.localStorageKey));
if (this.modeConfig) {
if (this.modeConfig.prefersColorScheme === 'dark') {
if (this.modeConfig.isDark) {
this.enableDarkMode();
} else {
this.enableLightMode();
}
} else {
if (this.modeConfig.isDark) {
this.enableDarkMode();
} else {
this.enableLightMode();
}
}
const styleStatus = KEEP.getStyleStatus();
if (styleStatus) {
styleStatus.isDark ? this.enableDarkMode() : this.enableLightMode();
} else {
// First time visit with no LocalStorage exists.
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
this.enableDarkMode();
} else {
this.enableLightMode();
}
this.isDarkPrefersColorScheme().matches ? this.enableDarkMode() : this.enableLightMode();
}
},
initModeToggleButton() {
this.modeToggleButton_dom.addEventListener('click', () => {
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
this.setItemUtil('light-mode');
} else {
this.setItemUtil('dark-mode');
}
const isDark = document.body.classList.contains('dark-mode');
isDark ? this.enableLightMode() : this.enableDarkMode();
});
},
initModeAutoTrigger() {
const darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
darkMode && darkMode.addEventListener('change', e => {
if (e.matches) {
this.enableDarkMode();
} else {
this.enableLightMode();
}
const isDarkMode = this.isDarkPrefersColorScheme();
isDarkMode.addEventListener('change', e => {
e.matches ? this.enableDarkMode() : this.enableLightMode();
});
}
}
@ -90,5 +53,4 @@ KEEP.initModeToggle = () => {
KEEP.utils.modeToggle.initModeStatus();
KEEP.utils.modeToggle.initModeToggleButton();
KEEP.utils.modeToggle.initModeAutoTrigger();
};

View File

@ -12,9 +12,9 @@ window.addEventListener('DOMContentLoaded', () => {
KEEP.styleStatus = {
isExpandPageWidth: false,
prefersColorScheme: 'light',
isDark: false,
fontSizeLevel: 0
fontSizeLevel: 0,
isOpenPageAside: true
}
// print theme base info