feat: dark / light theme almost complete

frontend/src/App.tsx

@@ -8,9 +8,7 @@ import { Routes, Route, Navigate, useLocation } from 'react-router-dom';
 import { useAuth0 } from '@auth0/auth0-react';
 import { useIsAuthInitialized } from './core/auth/auth-gate';
 import { motion, AnimatePresence } from 'framer-motion';
-import { ThemeProvider } from '@mui/material/styles';
-import CssBaseline from '@mui/material/CssBaseline';
-import { md3Theme } from './shared-minimal/theme/md3Theme';
+import { ThemeProvider } from './shared-minimal/theme/ThemeContext';
 import { Layout } from './components/Layout';
 import { UnitsProvider } from './core/units/UnitsContext';
 
@@ -451,8 +449,7 @@ function App() {
   if (isLoading) {
     if (mobileMode) {
       return (
-        <ThemeProvider theme={md3Theme}>
-          <CssBaseline />
+        <ThemeProvider>
           <Layout mobileMode={true}>
             <div className="flex items-center justify-center h-64">
               <div className="text-slate-500">Loading...</div>
@@ -462,8 +459,7 @@ function App() {
       );
     }
     return (
-      <ThemeProvider theme={md3Theme}>
-        <CssBaseline />
+      <ThemeProvider>
         <div className="flex items-center justify-center min-h-screen">
           <div className="text-lg">Loading...</div>
         </div>
@@ -474,8 +470,7 @@ function App() {
   // Callback route requires authentication - handled by CallbackPage component
   if (isCallbackRoute && isAuthenticated) {
     return (
-      <ThemeProvider theme={md3Theme}>
-        <CssBaseline />
+      <ThemeProvider>
         <React.Suspense fallback={
           <div className="flex items-center justify-center min-h-screen">
             <div className="text-lg">Processing login...</div>
@@ -490,8 +485,7 @@ function App() {
 
   if (shouldShowHomePage) {
     return (
-      <ThemeProvider theme={md3Theme}>
-        <CssBaseline />
+      <ThemeProvider>
         <HomePage />
         <DebugInfo />
       </ThemeProvider>
@@ -501,8 +495,7 @@ function App() {
   // Signup route is public - no authentication required
   if (isSignupRoute) {
     return (
-      <ThemeProvider theme={md3Theme}>
-        <CssBaseline />
+      <ThemeProvider>
         <React.Suspense fallback={
           <div className="flex items-center justify-center min-h-screen">
             <div className="text-lg">Loading...</div>
@@ -519,8 +512,7 @@ function App() {
   // (Auth0 blocks unverified users from logging in)
   if (isVerifyEmailRoute) {
     return (
-      <ThemeProvider theme={md3Theme}>
-        <CssBaseline />
+      <ThemeProvider>
         <React.Suspense fallback={
           <div className="flex items-center justify-center min-h-screen">
             <div className="text-lg">Loading...</div>
@@ -539,8 +531,7 @@ function App() {
 
   if (isOnboardingRoute) {
     return (
-      <ThemeProvider theme={md3Theme}>
-        <CssBaseline />
+      <ThemeProvider>
         <React.Suspense fallback={
           <div className="flex items-center justify-center min-h-screen">
             <div className="text-lg">Loading...</div>
@@ -559,8 +550,7 @@ function App() {
     console.log('[DEBUG App] Auth gate not ready yet, showing loading state');
     if (mobileMode) {
       return (
-        <ThemeProvider theme={md3Theme}>
-          <CssBaseline />
+        <ThemeProvider>
           <Layout mobileMode={true}>
             <div className="flex items-center justify-center h-64">
               <div className="text-slate-500">Initializing session...</div>
@@ -570,8 +560,7 @@ function App() {
       );
     }
     return (
-      <ThemeProvider theme={md3Theme}>
-        <CssBaseline />
+      <ThemeProvider>
         <div className="flex items-center justify-center min-h-screen">
           <div className="text-lg">Initializing session...</div>
         </div>
@@ -582,8 +571,7 @@ function App() {
   // Mobile app rendering
   if (mobileMode) {
     return (
-      <ThemeProvider theme={md3Theme}>
-        <CssBaseline />
+      <ThemeProvider>
         <UnitsProvider>
           <Layout mobileMode={true}>
           <AnimatePresence mode="popLayout" initial={false}>
@@ -881,8 +869,7 @@ function App() {
 
   // Desktop app rendering (fallback)
   return (
-    <ThemeProvider theme={md3Theme}>
-      <CssBaseline />
+    <ThemeProvider>
       <UnitsProvider>
         <Layout mobileMode={false}>
         <RouteSuspense>