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-23 11:30:12 +08:00
parent cb892adc34
commit 3bf3905c0f
3 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
layout/page.ejs
View File

@ -13,7 +13,7 @@
<div class="page-main-content-middle"> <div class="page-main-content-middle">
<div class="main-content normal-code-theme"> <div class="main-content">
<% if (is_home()) { %> <% if (is_home()) { %>
<%- partial('home-content') %> <%- partial('home-content') %>

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

@ -52,11 +52,21 @@ code-theme(mode) {
} }
.normal-code-theme { :root {
code-theme('light'); code-theme('light');
} }
@media (prefers-color-scheme: dark) {
:root {
code-theme('dark');
}
}
.night-code-theme { .light-mode {
code-theme('light');
}
.dark-mode {
code-theme('dark'); code-theme('dark');
} }

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

@ -4,10 +4,8 @@ KEEP.initModeToggle = () => {
KEEP.utils.modeToggle = { KEEP.utils.modeToggle = {
localStorageKey: 'KEEP',
modeToggleButton_dom: document.querySelector('.tool-dark-light-toggle'), modeToggleButton_dom: document.querySelector('.tool-dark-light-toggle'),
iconDom: document.querySelector('.tool-dark-light-toggle i'), iconDom: document.querySelector('.tool-dark-light-toggle i'),
articleContent: document.querySelector('.main-content'),
setItemUtil(modeClass, prefersColorScheme) { setItemUtil(modeClass, prefersColorScheme) {
document.body.classList.toggle(modeClass); document.body.classList.toggle(modeClass);
@ -15,10 +13,8 @@ KEEP.initModeToggle = () => {
if (isDark) { if (isDark) {
this.iconDom.className = 'fas fa-moon'; this.iconDom.className = 'fas fa-moon';
this.articleContent.classList.remove('night-code-theme');
} else { } else {
this.iconDom.className = 'fas fa-sun'; this.iconDom.className = 'fas fa-sun';
this.articleContent.classList.add('night-code-theme');
} }
KEEP.styleStatus.isDark = isDark; KEEP.styleStatus.isDark = isDark;
KEEP.styleStatus.prefersColorScheme = prefersColorScheme; KEEP.styleStatus.prefersColorScheme = prefersColorScheme;
@ -31,22 +27,18 @@ KEEP.initModeToggle = () => {
if (styleStatus.prefersColorScheme === 'dark') { if (styleStatus.prefersColorScheme === 'dark') {
if (styleStatus.isDark) { if (styleStatus.isDark) {
document.body.classList.remove('light-mode'); document.body.classList.remove('light-mode');
this.articleContent.classList.remove('night-code-theme');
this.iconDom.className = 'fas fa-sun'; this.iconDom.className = 'fas fa-sun';
} else { } else {
document.body.classList.add('light-mode'); document.body.classList.add('light-mode');
this.articleContent.classList.add('night-code-theme');
this.iconDom.className = 'fas fa-moon'; this.iconDom.className = 'fas fa-moon';
} }
} else { } else {
if (styleStatus.isDark) { if (styleStatus.isDark) {
document.body.classList.remove('dark-mode'); document.body.classList.remove('dark-mode');
this.articleContent.classList.remove('night-code-theme');
this.iconDom.className = 'fas fa-moon'; this.iconDom.className = 'fas fa-moon';
} else { } else {
document.body.classList.add('dark-mode'); document.body.classList.add('dark-mode');
this.articleContent.classList.add('night-code-theme');
this.iconDom.className = 'fas fa-sun'; this.iconDom.className = 'fas fa-sun';
} }