diff --git a/scripts/js/dark.js b/scripts/js/dark.js
new file mode 100644
index 0000000..58e853a
--- /dev/null
+++ b/scripts/js/dark.js
@@ -0,0 +1,12 @@
+const LOCAL_NANE = '_dark_mode_theme_'
+const rememberedValue = localStorage.getItem(LOCAL_NANE);
+if (rememberedValue && ['light', 'dark'].includes(rememberedValue)) {
+  document.documentElement.setAttribute('data-color-mode', rememberedValue);
+}
+const button = document.querySelector('#darkMode');
+button.onclick = () => {
+  const theme = document.documentElement.dataset.colorMode;
+  const mode = theme === 'light' ? 'dark' : 'light';
+  document.documentElement.setAttribute('data-color-mode', mode);
+  localStorage.setItem(LOCAL_NANE, mode);
+}
\ No newline at end of file
diff --git a/scripts/js/main.js b/scripts/js/main.js
index c7109cc..8700ff8 100644
--- a/scripts/js/main.js
+++ b/scripts/js/main.js
@@ -1,16 +1,3 @@
-/** ==========dark theme============== */
-const LOCAL_NANE = '_dark_mode_theme_'
-const rememberedValue = localStorage.getItem(LOCAL_NANE);
-if (rememberedValue && ['light', 'dark'].includes(rememberedValue)) {
-  document.documentElement.setAttribute('data-color-mode', rememberedValue);
-}
-const button = document.querySelector('#darkMode');
-button.onclick = () => {
-  const theme = document.documentElement.dataset.colorMode;
-  const mode = theme === 'light' ? 'dark' : 'light';
-  document.documentElement.setAttribute('data-color-mode', mode);
-  localStorage.setItem(LOCAL_NANE, mode);
-}
 /** ==========anchor============== */
 if(('onhashchange' in window) && ((typeof document.documentMode==='undefined') || document.documentMode==8)) {
   window.onhashchange = function () {
diff --git a/scripts/nodes/header.mjs b/scripts/nodes/header.mjs
index 4a040b5..b8686f4 100644
--- a/scripts/nodes/header.mjs
+++ b/scripts/nodes/header.mjs
@@ -6,7 +6,7 @@ import { darkMode } from '../utils/darkMode.mjs';
 const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets/quickreference.svg');
 const ICONS_SEARCH_PATH = path.resolve(process.cwd(), 'scripts/assets/search.svg');
 
-export function header({ homePath, githubURL = '' }) {
+export function header({ homePath, githubURL = '', isHome } = {}) {
   const svgNode = getSVGNode(ICONS_PATH);
   const svgSearchNode = getSVGNode(ICONS_SEARCH_PATH);
   const data = [
@@ -50,7 +50,7 @@ export function header({ homePath, githubURL = '' }) {
       label: '编辑',
       children: [editor],
     },
-    ...darkMode(),
+    ...darkMode({ homePath, isHome }),
     {
       menu: true,
       href: 'https://github.com/jaywcjlove/reference',
diff --git a/scripts/utils/darkMode.mjs b/scripts/utils/darkMode.mjs
index 6c2eb28..dda3280 100644
--- a/scripts/utils/darkMode.mjs
+++ b/scripts/utils/darkMode.mjs
@@ -3,11 +3,13 @@ import { getSVGNode } from './getSVGNode.mjs';
 
 const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets');
 
-export function darkMode() {
+export function darkMode({ homePath = '', isHome } = {}) {
+  const relativePath = homePath.replace(/\/?index.html$/, isHome ? '' : '/');
   const iconSunPath = path.resolve(ICONS_PATH, `sun.svg`);
   const iconMoonPath = path.resolve(ICONS_PATH, `moon.svg`);
   const sunNode = getSVGNode(iconSunPath);
   const moonNode = getSVGNode(iconMoonPath);
+  const darkJSUrl = relativePath + 'js/dark.js';
   return [
     {
       type: 'element',
@@ -18,5 +20,12 @@ export function darkMode() {
       },
       children: [...sunNode, ...moonNode],
     },
+    {
+      type: 'element',
+      tagName: 'script',
+      properties: {
+        src: darkJSUrl,
+      },
+    },
   ];
 }