Elijah/convertor
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add theme toggle functionality and update localization files

Browse source 
- 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
Download patch file Download diff file Expand all files Collapse all files

39
src/theme/theme.css
View file

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