Albert
d7f5988a4f
Replaced all hardcoded colors and JS template literal styling with Mantine's canonical approach using CSS modules and CSS variables. This ensures colors transition programmatically without JS interpolation. - Updated globals.css to use data-mantine-color-scheme selectors - Created CSS modules for all navigation components and chat page - Removed useComputedColorScheme/useMantineTheme hooks where not needed - Fixed body background to properly adapt to light/dark mode - All borders, backgrounds, and colors now use CSS variables - Maintained full theme support across all components 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
28 lines
585 B
CSS
28 lines
585 B
CSS
.sidebar {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 1rem;
|
|
}
|
|
|
|
[data-mantine-color-scheme="light"] .sidebar {
|
|
border-right: 1px solid var(--mantine-color-gray-3);
|
|
}
|
|
|
|
[data-mantine-color-scheme="dark"] .sidebar {
|
|
border-right: 1px solid var(--mantine-color-dark-5);
|
|
}
|
|
|
|
.devPanel {
|
|
margin-top: var(--mantine-spacing-xl);
|
|
padding: var(--mantine-spacing-sm);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
[data-mantine-color-scheme="light"] .devPanel {
|
|
border: 1px solid var(--mantine-color-gray-4);
|
|
}
|
|
|
|
[data-mantine-color-scheme="dark"] .devPanel {
|
|
border: 1px solid var(--mantine-color-dark-4);
|
|
}
|