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

perf: optimize dark and light mode toggle

This commit is contained in:
XPoet 2021-01-24 20:04:04 +08:00
parent 96286031ff
commit d9c4d973b3
3 changed files with 12 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
source/css/common/codeblock/code-theme.styl
View File

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

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

@ -140,6 +140,11 @@ root-color(mode) {
root-color('light'); root-color('light');
} }
@media (prefers-color-scheme: light) {
:root {
root-color('light');
}
}
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {

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

@ -9,6 +9,7 @@ KEEP.initModeToggle = () => {
enableLightMode() { enableLightMode() {
document.body.classList.remove('dark-mode'); document.body.classList.remove('dark-mode');
document.body.classList.add('light-mode');
this.iconDom.className = 'fas fa-moon'; this.iconDom.className = 'fas fa-moon';
KEEP.styleStatus.isDark = false; KEEP.styleStatus.isDark = false;
KEEP.setStyleStatus(); KEEP.setStyleStatus();
@ -16,6 +17,7 @@ KEEP.initModeToggle = () => {
enableDarkMode() { enableDarkMode() {
document.body.classList.add('dark-mode'); document.body.classList.add('dark-mode');
document.body.classList.remove('light-mode');
this.iconDom.className = 'fas fa-sun'; this.iconDom.className = 'fas fa-sun';
KEEP.styleStatus.isDark = true; KEEP.styleStatus.isDark = true;
KEEP.setStyleStatus(); KEEP.setStyleStatus();