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.

README.md

@@ -172,6 +172,16 @@ docker compose up -d
 
 ---
 
+## Dark Mode
+
+ConvertX-CN 支援亮色與暗色主題。
+
+- 可手動切換主題（點擊導覽列的太陽/月亮圖示）
+- 偏好設定自動儲存於瀏覽器
+- 預設跟隨系統色彩偏好
+
+---
+
 ## MinerU
 
 ConvertX 內建文件轉換引擎。

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;
+})();

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}

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>

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>
+  );
+};

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",

src/locales/am.json

@@ -26,7 +26,8 @@
     "logout": "ውጣ",
     "login": "ግባ",
     "register": "ተመዝገብ",
-    "language": "ቋንቋ"
+    "language": "ቋንቋ",
+    "toggleTheme": "Toggle theme"
   },
   "convert": {
     "title": "ቀይር",

src/locales/ar.json

@@ -26,7 +26,8 @@
     "logout": "تسجيل الخروج",
     "login": "تسجيل الدخول",
     "register": "التسجيل",
-    "language": "اللغة"
+    "language": "اللغة",
+    "toggleTheme": "تبديل المظهر"
   },
   "convert": {
     "title": "تحويل",

src/locales/bg.json

@@ -26,7 +26,8 @@
     "logout": "Изход",
     "login": "Вход",
     "register": "Регистрация",
-    "language": "Език"
+    "language": "Език",
+    "toggleTheme": "Toggle theme"
   },
   "convert": {
     "title": "Конвертиране",

src/locales/bn.json

@@ -26,7 +26,8 @@
     "logout": "লগআউট",
     "login": "লগইন",
     "register": "নিবন্ধন",
-    "language": "ভাষা"
+    "language": "ভাষা",
+    "toggleTheme": "Toggle theme"
   },
   "convert": {
     "title": "রূপান্তর করুন",

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",

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",

src/locales/cy.json

@@ -26,7 +26,8 @@
     "logout": "Allgofnodi",
     "login": "Mewngofnodi",
     "register": "Cofrestru",
-    "language": "Iaith"
+    "language": "Iaith",
+    "toggleTheme": "Toggle theme"
   },
   "convert": {
     "title": "Trosi",

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",

src/locales/de.json

@@ -26,7 +26,8 @@
     "logout": "Abmelden",
     "login": "Anmelden",
     "register": "Registrieren",
-    "language": "Sprache"
+    "language": "Sprache",
+    "toggleTheme": "Thema wechseln"
   },
   "convert": {
     "title": "Konvertieren",

src/locales/el.json

@@ -26,7 +26,8 @@
     "logout": "Αποσύνδεση",
     "login": "Σύνδεση",
     "register": "Εγγραφή",
-    "language": "Γλώσσα"
+    "language": "Γλώσσα",
+    "toggleTheme": "Toggle theme"
   },
   "convert": {
     "title": "Μετατροπή",

src/locales/en.json

@@ -26,7 +26,8 @@
     "logout": "Logout",
     "login": "Login",
     "register": "Register",
-    "language": "Language"
+    "language": "Language",
+    "toggleTheme": "Toggle theme"
   },
   "convert": {
     "title": "Convert",

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",

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",

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",

src/locales/fa.json

@@ -26,7 +26,8 @@
     "logout": "خروج",
     "login": "ورود",
     "register": "ثبت نام",
-    "language": "زبان"
+    "language": "زبان",
+    "toggleTheme": "Toggle theme"
   },
   "convert": {
     "title": "تبدیل",

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",

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",

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",

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",

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",

src/locales/gu.json

@@ -26,7 +26,8 @@
     "logout": "લૉગઆઉટ",
     "login": "લૉગિન",
     "register": "નોંધણી કરો",
-    "language": "ભાષા"
+    "language": "ભાષા",
+    "toggleTheme": "Toggle theme"
   },
   "convert": {
     "title": "રૂપાંતર કરો",

src/locales/he.json

@@ -26,7 +26,8 @@
     "logout": "התנתק",
     "login": "התחבר",
     "register": "הירשם",
-    "language": "שפה"
+    "language": "שפה",
+    "toggleTheme": "Toggle theme"
   },
   "convert": {
     "title": "המר",

src/locales/hi.json

@@ -26,7 +26,8 @@
     "logout": "लॉग आउट",
     "login": "लॉग इन",
     "register": "पंजीकरण",
-    "language": "भाषा"
+    "language": "भाषा",
+    "toggleTheme": "थीम बदलें"
   },
   "convert": {
     "title": "कन्वर्ट करें",

src/locales/hr.json

@@ -26,7 +26,8 @@
     "logout": "Odjava",
     "login": "Prijava",
     "register": "Registracija",
-    "language": "Jezik"
+    "language": "Jezik",
+    "toggleTheme": "Toggle theme"
   },
   "convert": {
     "title": "Pretvori",

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",

src/locales/id.json

@@ -26,7 +26,8 @@
     "logout": "Keluar",
     "login": "Masuk",
     "register": "Daftar",
-    "language": "Bahasa"
+    "language": "Bahasa",
+    "toggleTheme": "Toggle theme"
   },
   "convert": {
     "title": "Konversi",

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",

src/locales/it.json

@@ -26,7 +26,8 @@
     "logout": "Esci",
     "login": "Accedi",
     "register": "Registrati",
-    "language": "Lingua"
+    "language": "Lingua",
+    "toggleTheme": "Cambia tema"
   },
   "convert": {
     "title": "Converti",

src/locales/ja.json

@@ -26,7 +26,8 @@
     "logout": "ログアウト",
     "login": "ログイン",
     "register": "登録",
-    "language": "言語"
+    "language": "言語",
+    "toggleTheme": "テーマ切替"
   },
   "convert": {
     "title": "変換",

src/locales/km.json

@@ -26,7 +26,8 @@
     "logout": "ចាកចេញ",
     "login": "ចូល",
     "register": "ចុះឈ្មោះ",
-    "language": "ភាសា"
+    "language": "ភាសា",
+    "toggleTheme": "Toggle theme"
   },
   "convert": {
     "title": "បម្លែង",

src/locales/kn.json

@@ -26,7 +26,8 @@
     "logout": "ಲಾಗ್ ಔಟ್",
     "login": "ಲಾಗಿನ್",
     "register": "ನೋಂದಣಿ",
-    "language": "ಭಾಷೆ"
+    "language": "ಭಾಷೆ",
+    "toggleTheme": "Toggle theme"
   },
   "convert": {
     "title": "ಪರಿವರ್ತಿಸಿ",

src/locales/ko.json

@@ -26,7 +26,8 @@
     "logout": "로그아웃",
     "login": "로그인",
     "register": "회원가입",
-    "language": "언어"
+    "language": "언어",
+    "toggleTheme": "테마 전환"
   },
   "convert": {
     "title": "변환",

src/locales/lo.json

@@ -26,7 +26,8 @@
     "logout": "ອອກຈາກລະບົບ",
     "login": "ເຂົ້າສູ່ລະບົບ",
     "register": "ລົງທະບຽນ",
-    "language": "ພາສາ"
+    "language": "ພາສາ",
+    "toggleTheme": "Toggle theme"
   },
   "convert": {
     "title": "ແປງ",

src/locales/lt.json

@@ -26,7 +26,8 @@
     "logout": "Atsijungti",
     "login": "Prisijungti",
     "register": "Registruotis",
-    "language": "Kalba"
+    "language": "Kalba",
+    "toggleTheme": "Toggle theme"
   },
   "convert": {
     "title": "Konvertuoti",

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",

src/locales/mk.json

@@ -26,7 +26,8 @@
     "logout": "Одјава",
     "login": "Најава",
     "register": "Регистрација",
-    "language": "Јазик"
+    "language": "Јазик",
+    "toggleTheme": "Toggle theme"
   },
   "convert": {
     "title": "Конвертирај",

src/locales/ml.json

@@ -26,7 +26,8 @@
     "logout": "ലോഗൗട്ട്",
     "login": "ലോഗിൻ",
     "register": "രജിസ്റ്റർ",
-    "language": "ഭാഷ"
+    "language": "ഭാഷ",
+    "toggleTheme": "Toggle theme"
   },
   "convert": {
     "title": "പരിവർത്തനം ചെയ്യുക",

src/locales/mr.json

@@ -26,7 +26,8 @@
     "logout": "लॉगआउट",
     "login": "लॉगिन",
     "register": "नोंदणी करा",
-    "language": "भाषा"
+    "language": "भाषा",
+    "toggleTheme": "Toggle theme"
   },
   "convert": {
     "title": "रूपांतर करा",

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",

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",

src/locales/my.json

@@ -26,7 +26,8 @@
     "logout": "ထွက်",
     "login": "ဝင်",
     "register": "စာရင်းသွင်း",
-    "language": "ဘာသာစကား"
+    "language": "ဘာသာစကား",
+    "toggleTheme": "Toggle theme"
   },
   "convert": {
     "title": "ပြောင်း",

src/locales/ne.json

@@ -26,7 +26,8 @@
     "logout": "लग आउट",
     "login": "लग इन",
     "register": "दर्ता गर्नुहोस्",
-    "language": "भाषा"
+    "language": "भाषा",
+    "toggleTheme": "Toggle theme"
   },
   "convert": {
     "title": "रूपान्तरण गर्नुहोस्",

src/locales/nl.json

@@ -26,7 +26,8 @@
     "logout": "Uitloggen",
     "login": "Inloggen",
     "register": "Registreren",
-    "language": "Taal"
+    "language": "Taal",
+    "toggleTheme": "Thema wisselen"
   },
   "convert": {
     "title": "Converteren",

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",

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",

src/locales/pt.json

@@ -26,7 +26,8 @@
     "logout": "Sair",
     "login": "Entrar",
     "register": "Registrar",
-    "language": "Idioma"
+    "language": "Idioma",
+    "toggleTheme": "Alternar tema"
   },
   "convert": {
     "title": "Converter",

src/locales/ro.json

@@ -26,7 +26,8 @@
     "logout": "Deconectare",
     "login": "Autentificare",
     "register": "Înregistrare",
-    "language": "Limbă"
+    "language": "Limbă",
+    "toggleTheme": "Toggle theme"
   },
   "convert": {
     "title": "Convertire",

src/locales/ru.json

@@ -26,7 +26,8 @@
     "logout": "Выйти",
     "login": "Войти",
     "register": "Регистрация",
-    "language": "Язык"
+    "language": "Язык",
+    "toggleTheme": "Сменить тему"
   },
   "convert": {
     "title": "Конвертировать",

src/locales/si.json

@@ -26,7 +26,8 @@
     "logout": "පිටවන්න",
     "login": "පිවිසෙන්න",
     "register": "ලියාපදිංචි වන්න",
-    "language": "භාෂාව"
+    "language": "භාෂාව",
+    "toggleTheme": "Toggle theme"
   },
   "convert": {
     "title": "පරිවර්තනය",

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ť",

src/locales/sl.json

@@ -26,7 +26,8 @@
     "logout": "Odjava",
     "login": "Prijava",
     "register": "Registracija",
-    "language": "Jezik"
+    "language": "Jezik",
+    "toggleTheme": "Toggle theme"
   },
   "convert": {
     "title": "Pretvori",

src/locales/sq.json

@@ -26,7 +26,8 @@
     "logout": "Dilni",
     "login": "Hyni",
     "register": "Regjistrohu",
-    "language": "Gjuha"
+    "language": "Gjuha",
+    "toggleTheme": "Toggle theme"
   },
   "convert": {
     "title": "Konverto",

src/locales/sr.json

@@ -26,7 +26,8 @@
     "logout": "Одјава",
     "login": "Пријава",
     "register": "Регистрација",
-    "language": "Језик"
+    "language": "Језик",
+    "toggleTheme": "Toggle theme"
   },
   "convert": {
     "title": "Конвертуј",

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",

src/locales/sw.json

@@ -26,7 +26,8 @@
     "logout": "Toka",
     "login": "Ingia",
     "register": "Jisajili",
-    "language": "Lugha"
+    "language": "Lugha",
+    "toggleTheme": "Toggle theme"
   },
   "convert": {
     "title": "Badilisha",

src/locales/ta.json

@@ -26,7 +26,8 @@
     "logout": "வெளியேறு",
     "login": "உள்நுழை",
     "register": "பதிவு செய்",
-    "language": "மொழி"
+    "language": "மொழி",
+    "toggleTheme": "Toggle theme"
   },
   "convert": {
     "title": "மாற்று",

src/locales/te.json

@@ -26,7 +26,8 @@
     "logout": "లాగ్ అవుట్",
     "login": "లాగిన్",
     "register": "నమోదు",
-    "language": "భాష"
+    "language": "భాష",
+    "toggleTheme": "Toggle theme"
   },
   "convert": {
     "title": "మార్చు",

src/locales/th.json

@@ -26,7 +26,8 @@
     "logout": "ออกจากระบบ",
     "login": "เข้าสู่ระบบ",
     "register": "ลงทะเบียน",
-    "language": "ภาษา"
+    "language": "ภาษา",
+    "toggleTheme": "เปลี่ยนธีม"
   },
   "convert": {
     "title": "แปลงไฟล์",

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",

src/locales/uk.json

@@ -26,7 +26,8 @@
     "logout": "Вийти",
     "login": "Увійти",
     "register": "Реєстрація",
-    "language": "Мова"
+    "language": "Мова",
+    "toggleTheme": "Toggle theme"
   },
   "convert": {
     "title": "Конвертувати",

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",

src/locales/zh-CN.json

@@ -26,7 +26,8 @@
     "logout": "登出",
     "login": "登录",
     "register": "注册",
-    "language": "语言"
+    "language": "语言",
+    "toggleTheme": "切换主题"
   },
   "convert": {
     "title": "转换",

src/locales/zh-TW.json

@@ -26,7 +26,8 @@
     "logout": "登出",
     "login": "登入",
     "register": "註冊",
-    "language": "語言"
+    "language": "語言",
+    "toggleTheme": "切換主題"
   },
   "convert": {
     "title": "轉換",

src/locales/zu.json

@@ -26,7 +26,8 @@
     "logout": "Phuma",
     "login": "Ngena",
     "register": "Bhalisa",
-    "language": "Ulimi"
+    "language": "Ulimi",
+    "toggleTheme": "Toggle theme"
   },
   "convert": {
     "title": "Guqula",

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>
+              <div class="flex items-center gap-4">
+                <ThemeToggle locale={locale} t={t} />
                 <LanguageSelector currentLocale={locale} webroot={WEBROOT} t={t} />
+              </div>
             </nav>
           </header>
           <main

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,16 @@
   --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);
 }
 
-@media (prefers-color-scheme: dark) {
+/* ===== Dark Mode Variables ===== */
-  /* Dark mode */
+:root[data-theme="dark"] {
-  :root {
   --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 +34,31 @@
   --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);
+  --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) {
+  :root:not([data-theme="light"]) {
+    --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);
-    /* lime-500 */
     --accent-500: oklch(76.8% 0.233 130.85);
-    /* lime-400 */
     --accent-400: oklch(84.1% 0.238 128.85);
   }
 }