feat: add theme toggle functionality and update localization files

- Implemented a theme toggle feature allowing users to switch between light and dark modes. - Added a new ThemeToggle component for the theme switching button. - Updated theme CSS to support dark mode variables and system preference detection. - Enhanced localization files to include translations for the "toggleTheme" key across multiple languages.
2026-01-21 15:00:34 +08:00 · 2026-01-21 15:00:34 +08:00 · db5f47586e
commit db5f47586e
parent 1f850dd926
72 changed files with 338 additions and 77 deletions
--- a/README.md
+++ b/README.md
@ -172,6 +172,16 @@ docker compose up -d

 ---

+## Dark Mode
+
+ConvertX-CN 支援亮色與暗色主題。
+
+- 可手動切換主題（點擊導覽列的太陽/月亮圖示）
+- 偏好設定自動儲存於瀏覽器
+- 預設跟隨系統色彩偏好
+
+---
+
 ## MinerU

 ConvertX 內建文件轉換引擎。
--- a/public/theme.js
+++ b/public/theme.js
@ -0,0 +1,102 @@
+// ===== Theme Toggle Script =====
+// Handles dark/light mode switching with localStorage persistence
+// and system preference detection
+
+(function () {
+  const THEME_KEY = "theme";
+
+  // Get stored theme or detect system preference
+  function getPreferredTheme() {
+    const storedTheme = localStorage.getItem(THEME_KEY);
+    if (storedTheme) {
+      return storedTheme;
+    }
+    // Return null to let CSS handle system preference
+    return null;
+  }
+
+  // Get current effective theme (what's actually being displayed)
+  function getEffectiveTheme() {
+    const storedTheme = localStorage.getItem(THEME_KEY);
+    if (storedTheme) {
+      return storedTheme;
+    }
+    // Check system preference
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+
+  // Apply theme to document
+  function applyTheme(theme) {
+    const root = document.documentElement;
+    if (theme === "dark") {
+      root.setAttribute("data-theme", "dark");
+    } else if (theme === "light") {
+      root.setAttribute("data-theme", "light");
+    } else {
+      // Remove attribute to follow system preference
+      root.removeAttribute("data-theme");
+    }
+    updateThemeIcons();
+  }
+
+  // Update theme toggle icons visibility
+  function updateThemeIcons() {
+    const effectiveTheme = getEffectiveTheme();
+    const lightIcon = document.getElementById("theme-icon-light");
+    const darkIcon = document.getElementById("theme-icon-dark");
+
+    if (lightIcon && darkIcon) {
+      if (effectiveTheme === "dark") {
+        // In dark mode, show sun icon (to switch to light)
+        lightIcon.classList.remove("hidden");
+        darkIcon.classList.add("hidden");
+      } else {
+        // In light mode, show moon icon (to switch to dark)
+        lightIcon.classList.add("hidden");
+        darkIcon.classList.remove("hidden");
+      }
+    }
+  }
+
+  // Toggle theme
+  function toggleTheme() {
+    const currentTheme = getEffectiveTheme();
+    const newTheme = currentTheme === "dark" ? "light" : "dark";
+    localStorage.setItem(THEME_KEY, newTheme);
+    applyTheme(newTheme);
+  }
+
+  // Initialize theme on page load
+  function initTheme() {
+    const preferredTheme = getPreferredTheme();
+    applyTheme(preferredTheme);
+
+    // Listen for system preference changes
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
+      // Only update if no manual preference is set
+      if (!localStorage.getItem(THEME_KEY)) {
+        applyTheme(null);
+      }
+    });
+  }
+
+  // Apply theme immediately to prevent flash
+  const preferredTheme = getPreferredTheme();
+  if (preferredTheme) {
+    document.documentElement.setAttribute("data-theme", preferredTheme);
+  }
+
+  // Set up event listener when DOM is ready
+  document.addEventListener("DOMContentLoaded", function () {
+    initTheme();
+
+    const themeToggle = document.getElementById("theme-toggle");
+    if (themeToggle) {
+      themeToggle.addEventListener("click", toggleTheme);
+    }
+  });
+
+  // Expose toggle function globally for programmatic access
+  window.toggleTheme = toggleTheme;
+  window.getEffectiveTheme = getEffectiveTheme;
+})();
--- a/src/components/base.tsx
+++ b/src/components/base.tsx
@ -26,6 +26,7 @@ export const BaseHtml = ({
      <link rel="manifest" href={`${webroot}/site.webmanifest`} />
      <script>{`window.__TRANSLATIONS__ = ${JSON.stringify(getTranslations(locale))};`}</script>
      <script src={`${webroot}/i18n.js`} defer />
+      <script src={`${webroot}/theme.js`} />
    </head>
    <body class={`flex min-h-screen w-full flex-col bg-neutral-900 text-neutral-200`}>
      {children}
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@ -5,6 +5,7 @@ import {
  defaultLocale,
 } from "../i18n/index";
 import { LanguageSelector } from "./languageSelector";
+import { ThemeToggle } from "./themeToggle";

 export const Header = ({
  loggedIn,
@ -66,6 +67,9 @@ export const Header = ({
            </a>
          </li>
        ) : null}
+        <li>
+          <ThemeToggle locale={locale} t={t} />
+        </li>
        <li>
          <LanguageSelector currentLocale={locale} webroot={webroot} t={t} />
        </li>
@ -98,6 +102,9 @@ export const Header = ({
            </a>
          </li>
        ) : null}
+        <li>
+          <ThemeToggle locale={locale} t={t} />
+        </li>
        <li>
          <LanguageSelector currentLocale={locale} webroot={webroot} t={t} />
        </li>
--- a/src/components/themeToggle.tsx
+++ b/src/components/themeToggle.tsx
@ -0,0 +1,55 @@
+import { type SupportedLocale, type Translator, createTranslator, defaultLocale } from "../i18n/index";
+
+export const ThemeToggle = ({
+  locale = defaultLocale,
+  t = createTranslator(defaultLocale),
+}: {
+  locale?: SupportedLocale;
+  t?: Translator;
+}) => {
+  return (
+    <button
+      type="button"
+      id="theme-toggle"
+      class={`
+        flex items-center gap-1 text-accent-600 transition-all
+        hover:text-accent-500
+      `}
+      aria-label={t("nav", "toggleTheme")}
+      title={t("nav", "toggleTheme")}
+    >
+      {/* Sun icon (shown in dark mode) */}
+      <svg
+        id="theme-icon-light"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+        class="hidden h-6 w-6"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
+        />
+      </svg>
+      {/* Moon icon (shown in light mode) */}
+      <svg
+        id="theme-icon-dark"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+        class="hidden h-6 w-6"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"
+        />
+      </svg>
+    </button>
+  );
+};
--- a/src/locales/af.json
+++ b/src/locales/af.json
@ -26,7 +26,8 @@
    "logout": "Teken uit",
    "login": "Teken in",
    "register": "Registreer",
-    "language": "Taal"
+    "language": "Taal",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "Omskakel",
--- a/src/locales/am.json
+++ b/src/locales/am.json
@ -26,7 +26,8 @@
    "logout": "ውጣ",
    "login": "ግባ",
    "register": "ተመዝገብ",
-    "language": "ቋንቋ"
+    "language": "ቋንቋ",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "ቀይር",
--- a/src/locales/ar.json
+++ b/src/locales/ar.json
@ -26,7 +26,8 @@
    "logout": "تسجيل الخروج",
    "login": "تسجيل الدخول",
    "register": "التسجيل",
-    "language": "اللغة"
+    "language": "اللغة",
+    "toggleTheme": "تبديل المظهر"
  },
  "convert": {
    "title": "تحويل",
--- a/src/locales/bg.json
+++ b/src/locales/bg.json
@ -26,7 +26,8 @@
    "logout": "Изход",
    "login": "Вход",
    "register": "Регистрация",
-    "language": "Език"
+    "language": "Език",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "Конвертиране",
--- a/src/locales/bn.json
+++ b/src/locales/bn.json
@ -26,7 +26,8 @@
    "logout": "লগআউট",
    "login": "লগইন",
    "register": "নিবন্ধন",
-    "language": "ভাষা"
+    "language": "ভাষা",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "রূপান্তর করুন",
--- a/src/locales/ca.json
+++ b/src/locales/ca.json
@ -26,7 +26,8 @@
    "logout": "Tancar sessió",
    "login": "Iniciar sessió",
    "register": "Registrar-se",
-    "language": "Idioma"
+    "language": "Idioma",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "Convertir",
--- a/src/locales/cs.json
+++ b/src/locales/cs.json
@ -26,7 +26,8 @@
    "logout": "Odhlásit",
    "login": "Přihlásit",
    "register": "Registrovat",
-    "language": "Jazyk"
+    "language": "Jazyk",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "Převést",
--- a/src/locales/cy.json
+++ b/src/locales/cy.json
@ -26,7 +26,8 @@
    "logout": "Allgofnodi",
    "login": "Mewngofnodi",
    "register": "Cofrestru",
-    "language": "Iaith"
+    "language": "Iaith",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "Trosi",
--- a/src/locales/da.json
+++ b/src/locales/da.json
@ -26,7 +26,8 @@
    "logout": "Log ud",
    "login": "Log ind",
    "register": "Registrer",
-    "language": "Sprog"
+    "language": "Sprog",
+    "toggleTheme": "Skift tema"
  },
  "convert": {
    "title": "Konverter",
--- a/src/locales/de.json
+++ b/src/locales/de.json
@ -26,7 +26,8 @@
    "logout": "Abmelden",
    "login": "Anmelden",
    "register": "Registrieren",
-    "language": "Sprache"
+    "language": "Sprache",
+    "toggleTheme": "Thema wechseln"
  },
  "convert": {
    "title": "Konvertieren",
--- a/src/locales/el.json
+++ b/src/locales/el.json
@ -26,7 +26,8 @@
    "logout": "Αποσύνδεση",
    "login": "Σύνδεση",
    "register": "Εγγραφή",
-    "language": "Γλώσσα"
+    "language": "Γλώσσα",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "Μετατροπή",
--- a/src/locales/en.json
+++ b/src/locales/en.json
@ -26,7 +26,8 @@
    "logout": "Logout",
    "login": "Login",
    "register": "Register",
-    "language": "Language"
+    "language": "Language",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "Convert",
--- a/src/locales/es.json
+++ b/src/locales/es.json
@ -26,7 +26,8 @@
    "logout": "Cerrar sesión",
    "login": "Iniciar sesión",
    "register": "Registrarse",
-    "language": "Idioma"
+    "language": "Idioma",
+    "toggleTheme": "Cambiar tema"
  },
  "convert": {
    "title": "Convertir",
--- a/src/locales/et.json
+++ b/src/locales/et.json
@ -26,7 +26,8 @@
    "logout": "Logi välja",
    "login": "Logi sisse",
    "register": "Registreeru",
-    "language": "Keel"
+    "language": "Keel",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "Teisenda",
--- a/src/locales/eu.json
+++ b/src/locales/eu.json
@ -26,7 +26,8 @@
    "logout": "Saioa itxi",
    "login": "Saioa hasi",
    "register": "Erregistratu",
-    "language": "Hizkuntza"
+    "language": "Hizkuntza",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "Bihurtu",
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@ -26,7 +26,8 @@
    "logout": "خروج",
    "login": "ورود",
    "register": "ثبت نام",
-    "language": "زبان"
+    "language": "زبان",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "تبدیل",
--- a/src/locales/fi.json
+++ b/src/locales/fi.json
@ -26,7 +26,8 @@
    "logout": "Kirjaudu ulos",
    "login": "Kirjaudu sisään",
    "register": "Rekisteröidy",
-    "language": "Kieli"
+    "language": "Kieli",
+    "toggleTheme": "Vaihda teemaa"
  },
  "convert": {
    "title": "Muunna",
--- a/src/locales/fil.json
+++ b/src/locales/fil.json
@ -26,7 +26,8 @@
    "logout": "Mag-logout",
    "login": "Mag-login",
    "register": "Magrehistro",
-    "language": "Wika"
+    "language": "Wika",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "I-convert",
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@ -26,7 +26,8 @@
    "logout": "Déconnexion",
    "login": "Connexion",
    "register": "S'inscrire",
-    "language": "Langue"
+    "language": "Langue",
+    "toggleTheme": "Changer le thème"
  },
  "convert": {
    "title": "Convertir",
--- a/src/locales/ga.json
+++ b/src/locales/ga.json
@ -26,7 +26,8 @@
    "logout": "Logáil amach",
    "login": "Logáil isteach",
    "register": "Cláraigh",
-    "language": "Teanga"
+    "language": "Teanga",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "Tiontaigh",
--- a/src/locales/gl.json
+++ b/src/locales/gl.json
@ -26,7 +26,8 @@
    "logout": "Pechar sesión",
    "login": "Iniciar sesión",
    "register": "Rexistrarse",
-    "language": "Idioma"
+    "language": "Idioma",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "Converter",
--- a/src/locales/gu.json
+++ b/src/locales/gu.json
@ -26,7 +26,8 @@
    "logout": "લૉગઆઉટ",
    "login": "લૉગિન",
    "register": "નોંધણી કરો",
-    "language": "ભાષા"
+    "language": "ભાષા",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "રૂપાંતર કરો",
--- a/src/locales/he.json
+++ b/src/locales/he.json
@ -26,7 +26,8 @@
    "logout": "התנתק",
    "login": "התחבר",
    "register": "הירשם",
-    "language": "שפה"
+    "language": "שפה",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "המר",
--- a/src/locales/hi.json
+++ b/src/locales/hi.json
@ -26,7 +26,8 @@
    "logout": "लॉग आउट",
    "login": "लॉग इन",
    "register": "पंजीकरण",
-    "language": "भाषा"
+    "language": "भाषा",
+    "toggleTheme": "थीम बदलें"
  },
  "convert": {
    "title": "कन्वर्ट करें",
--- a/src/locales/hr.json
+++ b/src/locales/hr.json
@ -26,7 +26,8 @@
    "logout": "Odjava",
    "login": "Prijava",
    "register": "Registracija",
-    "language": "Jezik"
+    "language": "Jezik",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "Pretvori",
--- a/src/locales/hu.json
+++ b/src/locales/hu.json
@ -26,7 +26,8 @@
    "logout": "Kijelentkezés",
    "login": "Bejelentkezés",
    "register": "Regisztráció",
-    "language": "Nyelv"
+    "language": "Nyelv",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "Konvertálás",
--- a/src/locales/id.json
+++ b/src/locales/id.json
@ -26,7 +26,8 @@
    "logout": "Keluar",
    "login": "Masuk",
    "register": "Daftar",
-    "language": "Bahasa"
+    "language": "Bahasa",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "Konversi",
--- a/src/locales/is.json
+++ b/src/locales/is.json
@ -26,7 +26,8 @@
    "logout": "Útskrá",
    "login": "Innskrá",
    "register": "Nýskrá",
-    "language": "Tungumál"
+    "language": "Tungumál",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "Umbreyta",
--- a/src/locales/it.json
+++ b/src/locales/it.json
@ -26,7 +26,8 @@
    "logout": "Esci",
    "login": "Accedi",
    "register": "Registrati",
-    "language": "Lingua"
+    "language": "Lingua",
+    "toggleTheme": "Cambia tema"
  },
  "convert": {
    "title": "Converti",
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@ -26,7 +26,8 @@
    "logout": "ログアウト",
    "login": "ログイン",
    "register": "登録",
-    "language": "言語"
+    "language": "言語",
+    "toggleTheme": "テーマ切替"
  },
  "convert": {
    "title": "変換",
--- a/src/locales/km.json
+++ b/src/locales/km.json
@ -26,7 +26,8 @@
    "logout": "ចាកចេញ",
    "login": "ចូល",
    "register": "ចុះឈ្មោះ",
-    "language": "ភាសា"
+    "language": "ភាសា",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "បម្លែង",
--- a/src/locales/kn.json
+++ b/src/locales/kn.json
@ -26,7 +26,8 @@
    "logout": "ಲಾಗ್ ಔಟ್",
    "login": "ಲಾಗಿನ್",
    "register": "ನೋಂದಣಿ",
-    "language": "ಭಾಷೆ"
+    "language": "ಭಾಷೆ",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "ಪರಿವರ್ತಿಸಿ",
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@ -26,7 +26,8 @@
    "logout": "로그아웃",
    "login": "로그인",
    "register": "회원가입",
-    "language": "언어"
+    "language": "언어",
+    "toggleTheme": "테마 전환"
  },
  "convert": {
    "title": "변환",
--- a/src/locales/lo.json
+++ b/src/locales/lo.json
@ -26,7 +26,8 @@
    "logout": "ອອກຈາກລະບົບ",
    "login": "ເຂົ້າສູ່ລະບົບ",
    "register": "ລົງທະບຽນ",
-    "language": "ພາສາ"
+    "language": "ພາສາ",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "ແປງ",
--- a/src/locales/lt.json
+++ b/src/locales/lt.json
@ -26,7 +26,8 @@
    "logout": "Atsijungti",
    "login": "Prisijungti",
    "register": "Registruotis",
-    "language": "Kalba"
+    "language": "Kalba",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "Konvertuoti",
--- a/src/locales/lv.json
+++ b/src/locales/lv.json
@ -26,7 +26,8 @@
    "logout": "Izrakstīties",
    "login": "Ierakstīties",
    "register": "Reģistrēties",
-    "language": "Valoda"
+    "language": "Valoda",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "Konvertēt",
--- a/src/locales/mk.json
+++ b/src/locales/mk.json
@ -26,7 +26,8 @@
    "logout": "Одјава",
    "login": "Најава",
    "register": "Регистрација",
-    "language": "Јазик"
+    "language": "Јазик",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "Конвертирај",
--- a/src/locales/ml.json
+++ b/src/locales/ml.json
@ -26,7 +26,8 @@
    "logout": "ലോഗൗട്ട്",
    "login": "ലോഗിൻ",
    "register": "രജിസ്റ്റർ",
-    "language": "ഭാഷ"
+    "language": "ഭാഷ",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "പരിവർത്തനം ചെയ്യുക",
--- a/src/locales/mr.json
+++ b/src/locales/mr.json
@ -26,7 +26,8 @@
    "logout": "लॉगआउट",
    "login": "लॉगिन",
    "register": "नोंदणी करा",
-    "language": "भाषा"
+    "language": "भाषा",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "रूपांतर करा",
--- a/src/locales/ms.json
+++ b/src/locales/ms.json
@ -26,7 +26,8 @@
    "logout": "Log keluar",
    "login": "Log masuk",
    "register": "Daftar",
-    "language": "Bahasa"
+    "language": "Bahasa",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "Tukar",
--- a/src/locales/mt.json
+++ b/src/locales/mt.json
@ -26,7 +26,8 @@
    "logout": "Oħroġ",
    "login": "Idħol",
    "register": "Irreġistra",
-    "language": "Lingwa"
+    "language": "Lingwa",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "Ikkonverti",
--- a/src/locales/my.json
+++ b/src/locales/my.json
@ -26,7 +26,8 @@
    "logout": "ထွက်",
    "login": "ဝင်",
    "register": "စာရင်းသွင်း",
-    "language": "ဘာသာစကား"
+    "language": "ဘာသာစကား",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "ပြောင်း",
--- a/src/locales/ne.json
+++ b/src/locales/ne.json
@ -26,7 +26,8 @@
    "logout": "लग आउट",
    "login": "लग इन",
    "register": "दर्ता गर्नुहोस्",
-    "language": "भाषा"
+    "language": "भाषा",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "रूपान्तरण गर्नुहोस्",
--- a/src/locales/nl.json
+++ b/src/locales/nl.json
@ -26,7 +26,8 @@
    "logout": "Uitloggen",
    "login": "Inloggen",
    "register": "Registreren",
-    "language": "Taal"
+    "language": "Taal",
+    "toggleTheme": "Thema wisselen"
  },
  "convert": {
    "title": "Converteren",
--- a/src/locales/no.json
+++ b/src/locales/no.json
@ -26,7 +26,8 @@
    "logout": "Logg ut",
    "login": "Logg inn",
    "register": "Registrer",
-    "language": "Språk"
+    "language": "Språk",
+    "toggleTheme": "Bytt tema"
  },
  "convert": {
    "title": "Konverter",
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@ -26,7 +26,8 @@
    "logout": "Wyloguj",
    "login": "Zaloguj",
    "register": "Zarejestruj",
-    "language": "Język"
+    "language": "Język",
+    "toggleTheme": "Zmień motyw"
  },
  "convert": {
    "title": "Konwertuj",
--- a/src/locales/pt.json
+++ b/src/locales/pt.json
@ -26,7 +26,8 @@
    "logout": "Sair",
    "login": "Entrar",
    "register": "Registrar",
-    "language": "Idioma"
+    "language": "Idioma",
+    "toggleTheme": "Alternar tema"
  },
  "convert": {
    "title": "Converter",
--- a/src/locales/ro.json
+++ b/src/locales/ro.json
@ -26,7 +26,8 @@
    "logout": "Deconectare",
    "login": "Autentificare",
    "register": "Înregistrare",
-    "language": "Limbă"
+    "language": "Limbă",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "Convertire",
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@ -26,7 +26,8 @@
    "logout": "Выйти",
    "login": "Войти",
    "register": "Регистрация",
-    "language": "Язык"
+    "language": "Язык",
+    "toggleTheme": "Сменить тему"
  },
  "convert": {
    "title": "Конвертировать",
--- a/src/locales/si.json
+++ b/src/locales/si.json
@ -26,7 +26,8 @@
    "logout": "පිටවන්න",
    "login": "පිවිසෙන්න",
    "register": "ලියාපදිංචි වන්න",
-    "language": "භාෂාව"
+    "language": "භාෂාව",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "පරිවර්තනය",
--- a/src/locales/sk.json
+++ b/src/locales/sk.json
@ -26,7 +26,8 @@
    "logout": "Odhlásiť sa",
    "login": "Prihlásiť sa",
    "register": "Registrovať",
-    "language": "Jazyk"
+    "language": "Jazyk",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "Konvertovať",
--- a/src/locales/sl.json
+++ b/src/locales/sl.json
@ -26,7 +26,8 @@
    "logout": "Odjava",
    "login": "Prijava",
    "register": "Registracija",
-    "language": "Jezik"
+    "language": "Jezik",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "Pretvori",
--- a/src/locales/sq.json
+++ b/src/locales/sq.json
@ -26,7 +26,8 @@
    "logout": "Dilni",
    "login": "Hyni",
    "register": "Regjistrohu",
-    "language": "Gjuha"
+    "language": "Gjuha",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "Konverto",
--- a/src/locales/sr.json
+++ b/src/locales/sr.json
@ -26,7 +26,8 @@
    "logout": "Одјава",
    "login": "Пријава",
    "register": "Регистрација",
-    "language": "Језик"
+    "language": "Језик",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "Конвертуј",
--- a/src/locales/sv.json
+++ b/src/locales/sv.json
@ -26,7 +26,8 @@
    "logout": "Logga ut",
    "login": "Logga in",
    "register": "Registrera",
-    "language": "Språk"
+    "language": "Språk",
+    "toggleTheme": "Byt tema"
  },
  "convert": {
    "title": "Konvertera",
--- a/src/locales/sw.json
+++ b/src/locales/sw.json
@ -26,7 +26,8 @@
    "logout": "Toka",
    "login": "Ingia",
    "register": "Jisajili",
-    "language": "Lugha"
+    "language": "Lugha",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "Badilisha",
--- a/src/locales/ta.json
+++ b/src/locales/ta.json
@ -26,7 +26,8 @@
    "logout": "வெளியேறு",
    "login": "உள்நுழை",
    "register": "பதிவு செய்",
-    "language": "மொழி"
+    "language": "மொழி",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "மாற்று",
--- a/src/locales/te.json
+++ b/src/locales/te.json
@ -26,7 +26,8 @@
    "logout": "లాగ్ అవుట్",
    "login": "లాగిన్",
    "register": "నమోదు",
-    "language": "భాష"
+    "language": "భాష",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "మార్చు",
--- a/src/locales/th.json
+++ b/src/locales/th.json
@ -26,7 +26,8 @@
    "logout": "ออกจากระบบ",
    "login": "เข้าสู่ระบบ",
    "register": "ลงทะเบียน",
-    "language": "ภาษา"
+    "language": "ภาษา",
+    "toggleTheme": "เปลี่ยนธีม"
  },
  "convert": {
    "title": "แปลงไฟล์",
--- a/src/locales/tr.json
+++ b/src/locales/tr.json
@ -26,7 +26,8 @@
    "logout": "Çıkış",
    "login": "Giriş",
    "register": "Kayıt Ol",
-    "language": "Dil"
+    "language": "Dil",
+    "toggleTheme": "Tema değiştir"
  },
  "convert": {
    "title": "Dönüştür",
--- a/src/locales/uk.json
+++ b/src/locales/uk.json
@ -26,7 +26,8 @@
    "logout": "Вийти",
    "login": "Увійти",
    "register": "Реєстрація",
-    "language": "Мова"
+    "language": "Мова",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "Конвертувати",
--- a/src/locales/vi.json
+++ b/src/locales/vi.json
@ -26,7 +26,8 @@
    "logout": "Đăng xuất",
    "login": "Đăng nhập",
    "register": "Đăng ký",
-    "language": "Ngôn ngữ"
+    "language": "Ngôn ngữ",
+    "toggleTheme": "Đổi giao diện"
  },
  "convert": {
    "title": "Chuyển đổi",
--- a/src/locales/zh-CN.json
+++ b/src/locales/zh-CN.json
@ -26,7 +26,8 @@
    "logout": "登出",
    "login": "登录",
    "register": "注册",
-    "language": "语言"
+    "language": "语言",
+    "toggleTheme": "切换主题"
  },
  "convert": {
    "title": "转换",
--- a/src/locales/zh-TW.json
+++ b/src/locales/zh-TW.json
@ -26,7 +26,8 @@
    "logout": "登出",
    "login": "登入",
    "register": "註冊",
-    "language": "語言"
+    "language": "語言",
+    "toggleTheme": "切換主題"
  },
  "convert": {
    "title": "轉換",
--- a/src/locales/zu.json
+++ b/src/locales/zu.json
@ -26,7 +26,8 @@
    "logout": "Phuma",
    "login": "Ngena",
    "register": "Bhalisa",
-    "language": "Ulimi"
+    "language": "Ulimi",
+    "toggleTheme": "Toggle theme"
  },
  "convert": {
    "title": "Guqula",
--- a/src/pages/user.tsx
+++ b/src/pages/user.tsx
@ -4,6 +4,7 @@ import { Elysia, t } from "elysia";
 import { BaseHtml } from "../components/base";
 import { Header } from "../components/header";
 import { LanguageSelector } from "../components/languageSelector";
+import { ThemeToggle } from "../components/themeToggle";
 import db from "../db/db";
 import { User } from "../db/types";
 import {
@ -102,7 +103,10 @@ export const user = new Elysia()
              `}
            >
              <strong>ConvertX-CN</strong>
-              <LanguageSelector currentLocale={locale} webroot={WEBROOT} t={t} />
+              <div class="flex items-center gap-4">
+                <ThemeToggle locale={locale} t={t} />
+                <LanguageSelector currentLocale={locale} webroot={WEBROOT} t={t} />
+              </div>
            </nav>
          </header>
          <main
--- a/src/theme/theme.css
+++ b/src/theme/theme.css
@ -1,7 +1,7 @@
+/* ===== Light Mode (Default) ===== */
 :root {
-  /* Light mode */
  --contrast: oklch(100% 0 0);
-  /* Neutral colors - Gray */
+  /* Neutral colors - Gray (Light) */
  --neutral-950: oklch(98.5% 0.002 247.839);
  --neutral-900: oklch(96.7% 0.003 264.542);
  --neutral-800: oklch(92.8% 0.006 264.531);
@ -13,19 +13,38 @@
  --neutral-200: oklch(26.9% 0 0);
  --neutral-100: oklch(21% 0.034 264.665);
  --neutral-50: oklch(13% 0.028 261.692);
-  /* lime-700 */
+  /* Accent colors - lime */
  --accent-600: oklch(53.2% 0.157 131.589);
-  /* lime-600 */
  --accent-500: oklch(64.8% 0.2 131.684);
-  /* lime-500 */
  --accent-400: oklch(76.8% 0.233 130.85);
 }

+/* ===== Dark Mode Variables ===== */
+:root[data-theme="dark"] {
+  --contrast: oklch(0% 0 0);
+  /* Neutral colors - Gray (Dark) */
+  --neutral-950: oklch(13% 0.028 261.692);
+  --neutral-900: oklch(21% 0.034 264.665);
+  --neutral-800: oklch(27.8% 0.033 256.848);
+  --neutral-700: oklch(37.3% 0.034 259.733);
+  --neutral-600: oklch(44.6% 0.03 256.802);
+  --neutral-500: oklch(55.1% 0.027 264.364);
+  --neutral-400: oklch(70.7% 0.022 261.325);
+  --neutral-300: oklch(87.2% 0.01 258.338);
+  --neutral-200: oklch(92.8% 0.006 264.531);
+  --neutral-100: oklch(96.7% 0.003 264.542);
+  --neutral-50: oklch(98.5% 0.002 247.839);
+  /* Accent colors - lime (brighter for dark mode) */
+  --accent-600: oklch(64.8% 0.2 131.684);
+  --accent-500: oklch(76.8% 0.233 130.85);
+  --accent-400: oklch(84.1% 0.238 128.85);
+}
+
+/* ===== System Preference: Dark Mode (when no manual preference set) ===== */
@media (prefers-color-scheme: dark) {
-  /* Dark mode */
-  :root {
+  :root:not([data-theme="light"]) {
    --contrast: oklch(0% 0 0);
-    /* Neutral colors - Gray */
+    /* Neutral colors - Gray (Dark) */
    --neutral-950: oklch(13% 0.028 261.692);
    --neutral-900: oklch(21% 0.034 264.665);
    --neutral-800: oklch(27.8% 0.033 256.848);
@ -37,11 +56,9 @@
    --neutral-200: oklch(92.8% 0.006 264.531);
    --neutral-100: oklch(96.7% 0.003 264.542);
    --neutral-50: oklch(98.5% 0.002 247.839);
-    /* lime-600 */
+    /* Accent colors - lime (brighter for dark mode) */
    --accent-600: oklch(64.8% 0.2 131.684);
-    /* lime-500 */
    --accent-500: oklch(76.8% 0.233 130.85);
-    /* lime-400 */
    --accent-400: oklch(84.1% 0.238 128.85);
  }
 }