chamomind/elearning
7
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages 3 Wiki Activity Actions

Fix: Sync colors for light/dark mode consistency

Browse source
This commit is contained in:
supalerk-ar66 2026-01-14 11:36:28 +07:00
parent e7ea035a9e
commit 6239159099
12 changed files with 445 additions and 175 deletions
Download patch file Download diff file Expand all files Collapse all files

50
Frontend-Learner/assets/css/main.css
View file

@ -7,16 +7,16 @@
=========================== */
:root {
/* Colors - Light Mode Default */
--bg-body: #F8FAFC; /* Light Background */
--bg-surface: #FFFFFF; /* White Card Background */
--text-main: #0F172A; /* Dark Text */
--text-secondary: #64748B; /* Secondary Text */
--primary: #3B82F6; /* Primary Blue */
--bg-body: #f8fafc; /* Light Background */
--bg-surface: #ffffff; /* White Card Background */
--text-main: #0f172a; /* Dark Text */
--text-secondary: #64748b; /* Secondary Text */
--primary: #3b82f6; /* Primary Blue */
/* Semantic mappings */
--border-color: #E2E8F0;
--border-color: #e2e8f0;
--primary-hover: #2563eb;
/* Keeping remaining semantic vars */
--primary-light: #eff6ff;
--success: #10b981;
@ -41,16 +41,24 @@
/* Gradients */
--gradient-primary: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
--gradient-surface: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 100%);
--gradient-glow: radial-gradient(circle at center, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
--gradient-surface: linear-gradient(
180deg,
rgba(255, 255, 255, 0.8) 0%,
rgba(255, 255, 255, 0.4) 100%
);
--gradient-glow: radial-gradient(
circle at center,
rgba(59, 130, 246, 0.15) 0%,
transparent 70%
);
}
/* Dark Mode (applied when `.dark` class is present on <html>) */
.dark {
--bg-body: #0F172A;
--bg-surface: #1E293B; /* User requested specific color */
--text-main: #F1F5F9;
--text-secondary: #CBD5E1;
--bg-body: #0f172a;
--bg-surface: #1e293b; /* User requested specific color */
--text-main: #f1f5f9;
--text-secondary: #cbd5e1;
--border-color: #334155;
--neutral-50: #1e293b;
--neutral-100: #334155;
@ -62,7 +70,7 @@
--neutral-700: #f8fafc;
--neutral-800: #1e293b;
--neutral-900: #0f172a;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.12),
0 2px 6px -2px rgb(0 0 0 / 0.08);
@ -90,8 +98,11 @@ body {
background-color: var(--bg-body);
color: var(--text-main);
line-height: 1.5;
background-image:
radial-gradient(circle at 20% 20%, rgba(75, 130, 247, 0.05), transparent 28%),
background-image: radial-gradient(
circle at 20% 20%,
rgba(75, 130, 247, 0.05),
transparent 28%
),
radial-gradient(circle at 80% 0%, rgba(68, 212, 168, 0.05), transparent 24%);
background-attachment: fixed;
}
@ -128,14 +139,15 @@ ul {
grid-template-columns: var(--sidebar-width) 1fr;
grid-template-rows: var(--header-height) 1fr;
min-height: 100vh;
background-color: var(--bg-body);
background-color: #ffffff;
color: var(--text-main);
}
.dark .app-shell {
background-color: #0f172a;
background-color: var(--bg-body);
color: #f1f5f9;
}
/* Removed redundant .dark .app-shell override to rely on variables */
.app-header {
grid-column: 1 / -1;