lianglianglee
/
hexo-theme-keep
mirror of https://github.com/liangliangle/hexo-theme-keep.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix mixed background color under dark mode

This commit is contained in:
Miranquil 2021-01-23 22:31:20 +08:00
parent bd7c4f9e1f
commit b8c3456420
No known key found for this signature in database
GPG Key ID: F7AD72C904129DCB
2 changed files with 54 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
source/css/common/variables.styl
View File

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

75
source/js/dark-light-toggle.js
View File

@ -7,61 +7,81 @@ KEEP.initModeToggle = () => {
iconDom: document.querySelector('.tool-dark-light-toggle i'), iconDom: document.querySelector('.tool-dark-light-toggle i'),
articleContent: document.querySelector('.main-content'), articleContent: document.querySelector('.main-content'),
setItemUtil(modeClass, prefersColorScheme) { setItemUtil(modeClass) {
document.body.classList.toggle(modeClass); const isDark = document.body.className.indexOf('light-mode') === -1;
const isDark = document.body.className.indexOf(modeClass) === -1; let currentScheme = "";
if (isDark) { if (isDark) {
this.iconDom.className = 'fas fa-moon'; this.enableLightMode();
this.articleContent.classList.remove('night-code-theme'); currentScheme = "light";
} else { } else {
this.iconDom.className = 'fas fa-sun'; this.enableDarkMode();
this.articleContent.classList.add('night-code-theme'); currentScheme = "dark";
} }
localStorage.setItem(this.localStorageKey, JSON.stringify( localStorage.setItem(this.localStorageKey, JSON.stringify(
{ {
prefersColorScheme: prefersColorScheme, prefersColorScheme: currentScheme,
isDark: isDark 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';
},
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';
},
initModeStatus() { initModeStatus() {
this.modeConfig = JSON.parse(localStorage.getItem(this.localStorageKey)); this.modeConfig = JSON.parse(localStorage.getItem(this.localStorageKey));
if (this.modeConfig) { if (this.modeConfig) {
if (this.modeConfig.prefersColorScheme === 'dark') { if (this.modeConfig.prefersColorScheme === 'dark') {
if (this.modeConfig.isDark) { if (this.modeConfig.isDark) {
document.body.classList.remove('light-mode'); this.enableDarkMode();
this.articleContent.classList.remove('night-code-theme');
this.iconDom.className = 'fas fa-sun';
} else { } else {
document.body.classList.add('light-mode'); this.enableLightMode();
this.articleContent.classList.add('night-code-theme');
this.iconDom.className = 'fas fa-moon';
} }
} else { } else {
if (this.modeConfig.isDark) { if (this.modeConfig.isDark) {
document.body.classList.remove('dark-mode'); this.enableDarkMode();
this.articleContent.classList.remove('night-code-theme');
this.iconDom.className = 'fas fa-moon';
} else { } else {
document.body.classList.add('dark-mode'); this.enableLightMode();
this.articleContent.classList.add('night-code-theme');
this.iconDom.className = 'fas fa-sun';
} }
} }
} else {
// First time visit with no LocalStorage exists.
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
this.enableDarkMode();
} else {
this.enableLightMode();
}
} }
}, },
initModeToggleButton() { initModeToggleButton() {
this.modeToggleButton_dom.addEventListener('click', () => { this.modeToggleButton_dom.addEventListener('click', () => {
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
this.setItemUtil('light-mode', 'dark'); this.setItemUtil('light-mode');
} else { } else {
this.setItemUtil('dark-mode', 'light'); this.setItemUtil('dark-mode');
}
});
},
initModeAutoTrigger() {
const darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
darkMode && darkMode.addEventListener('change', e => {
if (e.matches) {
this.enableDarkMode();
} else {
this.enableLightMode();
} }
}); });
} }
@ -69,5 +89,6 @@ KEEP.initModeToggle = () => {
KEEP.utils.modeToggle.initModeStatus(); KEEP.utils.modeToggle.initModeStatus();
KEEP.utils.modeToggle.initModeToggleButton(); KEEP.utils.modeToggle.initModeToggleButton();
KEEP.utils.modeToggle.initModeAutoTrigger();
}; };