dark mode technically works

but it is terrible

client/src/main.jsx

@@ -1,4 +1,5 @@
 import { ChakraProvider } from '@chakra-ui/react';
+import { ColorModeProvider } from '@/components/ui/color-mode';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import './css/index.css';
@@ -10,7 +11,9 @@ import { system } from './theme.js';
 createRoot(document.getElementById('root')).render(
   <StrictMode>
     <ChakraProvider value={system}>
-      <App />
+      <ColorModeProvider>
+        <App />
+      </ColorModeProvider>
     </ChakraProvider>
   </StrictMode>,
 )