refactor: Use Mantine CSS variables and modules for theme styling
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>
This commit is contained in:
15
components/Navigation/MobileHeader.module.css
Normal file
15
components/Navigation/MobileHeader.module.css
Normal file
@@ -0,0 +1,15 @@
|
||||
.header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
[data-mantine-color-scheme="light"] .header {
|
||||
border-bottom: 1px solid var(--mantine-color-gray-3);
|
||||
}
|
||||
|
||||
[data-mantine-color-scheme="dark"] .header {
|
||||
border-bottom: 1px solid var(--mantine-color-dark-5);
|
||||
}
|
||||
Reference in New Issue
Block a user