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.
This commit is contained in:
Your Name 2026-01-21 15:00:34 +08:00
parent 1f850dd926
commit db5f47586e
72 changed files with 338 additions and 77 deletions

View file

@ -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