perf: optimize dark and light mode toggle

layout/page.ejs

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

source/css/common/codeblock/code-theme.styl

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

source/js/dark-light-toggle.js

@@ -4,10 +4,8 @@ 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, prefersColorScheme) {
       document.body.classList.toggle(modeClass);
@@ -15,10 +13,8 @@ KEEP.initModeToggle = () => {
 
       if (isDark) {
         this.iconDom.className = 'fas fa-moon';
-        this.articleContent.classList.remove('night-code-theme');
       } else {
         this.iconDom.className = 'fas fa-sun';
-        this.articleContent.classList.add('night-code-theme');
       }
       KEEP.styleStatus.isDark = isDark;
       KEEP.styleStatus.prefersColorScheme = prefersColorScheme;
@@ -31,22 +27,18 @@ KEEP.initModeToggle = () => {
         if (styleStatus.prefersColorScheme === 'dark') {
           if (styleStatus.isDark) {
             document.body.classList.remove('light-mode');
-            this.articleContent.classList.remove('night-code-theme');
             this.iconDom.className = 'fas fa-sun';
           } else {
             document.body.classList.add('light-mode');
-            this.articleContent.classList.add('night-code-theme');
             this.iconDom.className = 'fas fa-moon';
           }
         } else {
 
           if (styleStatus.isDark) {
             document.body.classList.remove('dark-mode');
-            this.articleContent.classList.remove('night-code-theme');
             this.iconDom.className = 'fas fa-moon';
           } else {
             document.body.classList.add('dark-mode');
-            this.articleContent.classList.add('night-code-theme');
             this.iconDom.className = 'fas fa-sun';
           }