diff --git a/assets/js/eureka.js b/assets/js/eureka.js
index 469a34d1..9fa18a19 100644
--- a/assets/js/eureka.js
+++ b/assets/js/eureka.js
@@ -127,13 +127,14 @@ function getcolorscheme() {
 
     for (let target of targets) {
         target.addEventListener('click', () => {
-            let icon = switchMode(target.innerHTML)
+            let targetName = target.getAttribute("name")
+            let icon = switchMode(targetName)
             let old_icon = element.firstElementChild.getAttribute("data-icon")
             element.firstElementChild.setAttribute("data-icon", icon)
             element.firstElementChild.classList.remove('fa-' + old_icon)
             element.firstElementChild.classList.add('fa-' + icon)
 
-            localStorage.setItem("lightDarkMode", target.innerHTML)
+            localStorage.setItem("lightDarkMode", targetName)
 
             targetDiv.classList.toggle('hidden')
             screen.classList.toggle('hidden')
@@ -260,4 +261,4 @@ function switchDocVersion() {
         element.lastElementChild.classList.toggle('fa-caret-right');
         element.lastElementChild.classList.toggle('fa-caret-down');
     })
-}
\ No newline at end of file
+}
diff --git a/i18n/en.yaml b/i18n/en.yaml
index c96facbc..5046dc7c 100644
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -17,4 +17,10 @@ recent:
 onThisPage:
   other: On This Page
 editThisPage:
-  other: Edit this page
\ No newline at end of file
+  other: Edit this page
+light:
+  other: Light
+dark:
+  other: Dark
+auto:
+  other: Auto
diff --git a/i18n/zh.yaml b/i18n/zh.yaml
index 91ffc502..dd87eb8a 100644
--- a/i18n/zh.yaml
+++ b/i18n/zh.yaml
@@ -17,4 +17,10 @@ recent:
 onThisPage:
   other: 本页内容
 editThisPage:
-  other: 编辑本页
\ No newline at end of file
+  other: 编辑本页
+light:
+  other: 浅色
+dark:
+  other: 深色
+auto:
+  other: 自动
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index eaf53d53..c7823977 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -45,9 +45,9 @@
                 </div>
                 <div class="absolute flex flex-col left-0 md:left-auto right-auto md:right-0 hidden bg-secondary-bg w-48 rounded py-2 border border-tertiary-bg cursor-pointer z-40"
                     id='lightDarkOptions'>
-                    <span class="px-4 py-1 hover:text-eureka">Light</span>
-                    <span class="px-4 py-1 hover:text-eureka">Dark</span>
-                    <span class="px-4 py-1 hover:text-eureka">Auto</span>
+                    <span class="px-4 py-1 hover:text-eureka" name="Light">{{i18n "light"}}</span>
+                    <span class="px-4 py-1 hover:text-eureka" name="Dark">{{i18n "dark"}}</span>
+                    <span class="px-4 py-1 hover:text-eureka" name="Auto">{{i18n "auto"}}</span>
                 </div>
             </div>
 
@@ -118,7 +118,7 @@
         element.firstElementChild.classList.add('fa-moon')
     }
     {{- end }}
-    
+
     document.addEventListener('DOMContentLoaded', () => {
         getcolorscheme();
         switchBurger();
@@ -126,4 +126,4 @@
         switchLanguage()
         {{- end }}
     });
-</script>
\ No newline at end of file
+</script>