diff --git a/layout/page.ejs b/layout/page.ejs
index 1f986b9..c6f8561 100644
--- a/layout/page.ejs
+++ b/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') %>
diff --git a/source/css/common/codeblock/code-theme.styl b/source/css/common/codeblock/code-theme.styl
index 34fc42a..042aea1 100644
--- a/source/css/common/codeblock/code-theme.styl
+++ b/source/css/common/codeblock/code-theme.styl
@@ -52,11 +52,21 @@ code-theme(mode) {
 }
 
 
-.normal-code-theme {
+:root {
   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');
 }
+
diff --git a/source/js/dark-light-toggle.js b/source/js/dark-light-toggle.js
index 83d45a5..3b66204 100644
--- a/source/js/dark-light-toggle.js
+++ b/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';
           }