Big refactor

frontend/src/components/shared/RainbowThemeProvider.tsx

@@ -0,0 +1,55 @@
+import React, { createContext, useContext, ReactNode } from 'react';
+import { MantineProvider, ColorSchemeScript } from '@mantine/core';
+import { useRainbowTheme } from '../../hooks/useRainbowTheme';
+import { mantineTheme } from '../../theme/mantineTheme';
+import rainbowStyles from '../../styles/rainbow.module.css';
+
+interface RainbowThemeContextType {
+  themeMode: 'light' | 'dark' | 'rainbow';
+  isRainbowMode: boolean;
+  isToggleDisabled: boolean;
+  toggleTheme: () => void;
+  activateRainbow: () => void;
+  deactivateRainbow: () => void;
+}
+
+const RainbowThemeContext = createContext<RainbowThemeContextType | null>(null);
+
+export function useRainbowThemeContext() {
+  const context = useContext(RainbowThemeContext);
+  if (!context) {
+    throw new Error('useRainbowThemeContext must be used within RainbowThemeProvider');
+  }
+  return context;
+}
+
+interface RainbowThemeProviderProps {
+  children: ReactNode;
+}
+
+export function RainbowThemeProvider({ children }: RainbowThemeProviderProps) {
+  const rainbowTheme = useRainbowTheme();
+
+  // Determine the Mantine color scheme
+  const mantineColorScheme = rainbowTheme.themeMode === 'rainbow' ? 'dark' : rainbowTheme.themeMode;
+
+  return (
+    <>
+      <ColorSchemeScript defaultColorScheme={mantineColorScheme} />
+      <RainbowThemeContext.Provider value={rainbowTheme}>
+        <MantineProvider
+          theme={mantineTheme}
+          defaultColorScheme={mantineColorScheme}
+          forceColorScheme={mantineColorScheme}
+        >
+          <div
+            className={rainbowTheme.isRainbowMode ? rainbowStyles.rainbowMode : ''}
+            style={{ minHeight: '100vh' }}
+          >
+            {children}
+          </div>
+        </MantineProvider>
+      </RainbowThemeContext.Provider>
+    </>
+  );
+}