github/ai-model-router
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add dark/light theme switching with ThemeContext and localStorage persistence

Browse Source
This commit is contained in:
Sanaullah-Turab
2026-09-09 18:12:16 +05:00
parent 54e140e4ed
commit 1a45cf5075
5 changed files with 135 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/index.css
+43 -19
View File
@@ -1,17 +1,17 @@
@import "tailwindcss";
@import "tailwindcss";
@theme {
--color-bg-primary: #07090C;
--color-bg-secondary: #0D1117;
--color-bg-card: #121820;
--color-bg-card-hover: #17202B;
--color-bg-primary: var(--theme-bg-primary);
--color-bg-secondary: var(--theme-bg-secondary);
--color-bg-card: var(--theme-bg-card);
--color-bg-card-hover: var(--theme-bg-card-hover);
--color-border-subtle: #1F2833;
--color-border-active: #324050;
--color-border-subtle: var(--theme-border-subtle);
--color-border-active: var(--theme-border-active);
--color-text-primary: #F0F4F8;
--color-text-muted: #8B98A5;
--color-text-dim: #546270;
--color-text-primary: var(--theme-text-primary);
--color-text-muted: var(--theme-text-muted);
--color-text-dim: var(--theme-text-dim);
--color-accent-primary: #3894FF;
--color-accent-secondary: #F59E0B;
@@ -24,19 +24,43 @@
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
:root {
--theme-bg-primary: #F8FAFC;
--theme-bg-secondary: #F1F5F9;
--theme-bg-card: #FFFFFF;
--theme-bg-card-hover: #F8FAFC;
--theme-border-subtle: #E2E8F0;
--theme-border-active: #CBD5E1;
--theme-text-primary: #0F172A;
--theme-text-muted: #475569;
--theme-text-dim: #64748B;
}
.dark {
--theme-bg-primary: #07090C;
--theme-bg-secondary: #0D1117;
--theme-bg-card: #121820;
--theme-bg-card-hover: #17202B;
--theme-border-subtle: #1F2833;
--theme-border-active: #324050;
--theme-text-primary: #F0F4F8;
--theme-text-muted: #8B98A5;
--theme-text-dim: #546270;
}
body {
background-color: #07090C;
color: #F0F4F8;
background-color: var(--theme-bg-primary);
color: var(--theme-text-primary);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
overflow-x: hidden;
}
/* Custom glow borders and glass effects */
.glass-panel {
background: rgba(18, 24, 32, 0.75);
background: color-mix(in srgb, var(--theme-bg-card) 75%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(40, 52, 68, 0.6);
border: 1px solid color-mix(in srgb, var(--theme-border-active) 60%, transparent);
}
.glass-panel-hover:hover {
@@ -48,8 +72,8 @@ body {
.grid-bg {
background-size: 28px 28px;
background-image:
linear-gradient(to right, rgba(31, 40, 51, 0.4) 1px, transparent 1px),
linear-gradient(to bottom, rgba(31, 40, 51, 0.4) 1px, transparent 1px);
linear-gradient(to right, color-mix(in srgb, var(--theme-border-subtle) 40%, transparent) 1px, transparent 1px),
linear-gradient(to bottom, color-mix(in srgb, var(--theme-border-subtle) 40%, transparent) 1px, transparent 1px);
}
.radar-glow {
@@ -83,12 +107,12 @@ body {
height: 6px;
}
::-webkit-scrollbar-track {
background: #07090C;
background: var(--theme-bg-primary);
}
::-webkit-scrollbar-thumb {
background: #1F2833;
background: var(--theme-border-subtle);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: #324050;
background: var(--theme-border-active);
}