CiallooWeb/www.cialloo.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement theme toggle functionality and refactor styles for light/dark mode support

Browse Source
This commit is contained in:
cialloo
2025-10-03 12:00:38 +08:00
parent 765ef6f9fc
commit 7597e8db33
8 changed files with 290 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/index.css
View File

@@ -1,26 +1,85 @@
:root {
/* Light theme variables */
--bg-primary: #ffffff;
--bg-secondary: #f8f9fa;
--bg-tertiary: #e9ecef;
--bg-navbar: rgba(255, 255, 255, 0.95);
--bg-card: rgba(255, 255, 255, 0.9);
--bg-overlay: rgba(0, 0, 0, 0.05);
--bg-section: rgba(0, 0, 0, 0.02);
--bg-footer: rgba(0, 0, 0, 0.8);
--text-primary: #1a1a1a;
--text-secondary: #6c757d;
--text-muted: #8e9297;
--border-color: rgba(0, 0, 0, 0.1);
--border-hover: rgba(255, 70, 85, 0.3);
--shadow: rgba(0, 0, 0, 0.1);
--shadow-hover: rgba(0, 0, 0, 0.15);
--accent-color: #ff4655;
--accent-hover: #ff6b6b;
--accent-shadow: rgba(255, 70, 85, 0.4);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.5;
font-weight: 400;
/* Gaming color scheme */
--primary-red: #ff4655;
--primary-red-hover: #ff6b6b;
--dark-bg: #0a0a0a;
--dark-bg-secondary: #1a1a2e;
--dark-bg-tertiary: #16213e;
--text-primary: #ffffff;
--text-secondary: #b8c5d1;
--text-muted: #888;
--border-color: rgba(255, 70, 85, 0.3);
color: var(--text-primary);
background: linear-gradient(135deg, var(--dark-bg) 0%, var(--dark-bg-secondary) 50%, var(--dark-bg-tertiary) 100%);
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Smooth theme transitions */
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
/* Dark theme variables */
.dark {
--bg-primary: #0a0a0a;
--bg-secondary: #1a1a2e;
--bg-tertiary: #16213e;
--bg-navbar: rgba(0, 0, 0, 0.9);
--bg-card: rgba(0, 0, 0, 0.5);
--bg-overlay: rgba(255, 255, 255, 0.02);
--bg-section: rgba(255, 255, 255, 0.02);
--bg-footer: rgba(0, 0, 0, 0.8);
--text-primary: #ffffff;
--text-secondary: #b8c5d1;
--text-muted: #888;
--border-color: rgba(255, 70, 85, 0.3);
--border-hover: rgba(255, 70, 85, 0.5);
--shadow: rgba(0, 0, 0, 0.3);
--shadow-hover: rgba(255, 70, 85, 0.2);
--accent-color: #ff4655;
--accent-hover: #ff6b6b;
--accent-shadow: rgba(255, 70, 85, 0.4);
}
/* Light theme variables (explicit) */
.light {
--bg-primary: #ffffff;
--bg-secondary: #f8f9fa;
--bg-tertiary: #e9ecef;
--bg-navbar: rgba(255, 255, 255, 0.95);
--bg-card: rgba(255, 255, 255, 0.9);
--bg-overlay: rgba(0, 0, 0, 0.05);
--text-primary: #1a1a1a;
--text-secondary: #6c757d;
--text-muted: #8e9297;
--border-color: rgba(0, 0, 0, 0.1);
--border-hover: rgba(255, 70, 85, 0.3);
--shadow: rgba(0, 0, 0, 0.1);
--shadow-hover: rgba(0, 0, 0, 0.15);
}
* {