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>
18 lines
395 B
CSS
18 lines
395 B
CSS
@import '@mantine/core/styles.css';
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Use Mantine's data attribute for theme-aware styling */
|
|
[data-mantine-color-scheme="light"] body {
|
|
background-color: var(--mantine-color-white);
|
|
color: var(--mantine-color-black);
|
|
}
|
|
|
|
[data-mantine-color-scheme="dark"] body {
|
|
background-color: var(--mantine-color-dark-8);
|
|
color: var(--mantine-color-dark-0);
|
|
}
|