82 lines
2.1 KiB
CSS
82 lines
2.1 KiB
CSS
/* Theme Variables - Dark/Light Mode Support */
|
|
|
|
/* Dark theme (default) */
|
|
html {
|
|
/* Keep the default dark theme as defined in BaseLayout */
|
|
}
|
|
|
|
/* Light theme */
|
|
html.light-mode {
|
|
/* Primary Colors */
|
|
--bg-primary: #f8fafc;
|
|
--bg-secondary: #f1f5f9;
|
|
--bg-tertiary: #e2e8f0;
|
|
--bg-code: #f1f5f9;
|
|
--text-primary: #0f172a;
|
|
--text-secondary: #334155;
|
|
--text-tertiary: #64748b;
|
|
|
|
/* Accent Colors remain the same for brand consistency */
|
|
|
|
/* Glow Effects - lighter for light mode */
|
|
--glow-primary: rgba(6, 182, 212, 0.1);
|
|
--glow-secondary: rgba(59, 130, 246, 0.1);
|
|
--glow-tertiary: rgba(139, 92, 246, 0.1);
|
|
|
|
/* Border Colors */
|
|
--border-primary: rgba(0, 0, 0, 0.1);
|
|
--border-secondary: rgba(0, 0, 0, 0.05);
|
|
|
|
/* Card Background */
|
|
--card-bg: rgba(255, 255, 255, 0.8);
|
|
--card-border: rgba(56, 189, 248, 0.3); /* Slightly stronger border */
|
|
|
|
/* UI Element Colors */
|
|
--ui-element: #e2e8f0;
|
|
--ui-element-hover: #cbd5e1;
|
|
}
|
|
|
|
/* Background adjustments for light mode */
|
|
html.light-mode body {
|
|
background-image:
|
|
radial-gradient(circle at 20% 35%, rgba(6, 182, 212, 0.05) 0%, transparent 50%),
|
|
radial-gradient(circle at 75% 15%, rgba(59, 130, 246, 0.05) 0%, transparent 45%),
|
|
radial-gradient(circle at 85% 70%, rgba(139, 92, 246, 0.05) 0%, transparent 40%);
|
|
}
|
|
|
|
/* Adding light mode grid overlay */
|
|
html.light-mode body::before {
|
|
background-image:
|
|
linear-gradient(rgba(15, 23, 42, 0.03) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px);
|
|
}
|
|
|
|
/* Theme transition for smooth switching */
|
|
html, body, * {
|
|
transition:
|
|
background-color 0.3s ease,
|
|
color 0.3s ease,
|
|
border-color 0.3s ease,
|
|
box-shadow 0.3s ease;
|
|
}
|
|
|
|
/* Knowledge Graph light mode adjustments */
|
|
html.light-mode .graph-container {
|
|
background: rgba(248, 250, 252, 0.6);
|
|
}
|
|
|
|
html.light-mode .graph-loading {
|
|
background: rgba(241, 245, 249, 0.7);
|
|
}
|
|
|
|
html.light-mode .graph-filters {
|
|
background: rgba(241, 245, 249, 0.7);
|
|
}
|
|
|
|
html.light-mode .graph-legend {
|
|
background: rgba(241, 245, 249, 0.7);
|
|
}
|
|
|
|
html.light-mode .node-details {
|
|
background: rgba(248, 250, 252, 0.9);
|
|
} |