fix dark mode background

client/index.html

@@ -19,8 +19,35 @@
           window.matchMedia &&
           window.matchMedia("(prefers-color-scheme: dark)").matches;
         var theme = prefersDarkMode ? "dark" : "light";
+        var bgColor = prefersDarkMode ? "#0a0a0a" : "#f8f9fa";
+
+        // Apply theme to document elements
         document.documentElement.setAttribute("data-theme", theme);
         document.documentElement.classList.add(theme + "-mode");
+
+        // Set background color directly on HTML and BODY
+        document.documentElement.style.backgroundColor = bgColor;
+
+        // Create and apply a style tag for immediate styling
+        var style = document.createElement("style");
+        style.textContent = `
+          html, body { 
+            background-color: ${bgColor} !important; 
+            transition: background-color 0s;
+          }
+          html.${theme}-mode, 
+          body.${theme}-mode, 
+          #root { 
+            background-color: ${bgColor} !important; 
+          }
+        `;
+        document.head.appendChild(style);
+
+        // Apply theme class to body as well
+        document.addEventListener("DOMContentLoaded", function () {
+          document.body.classList.add(theme + "-mode");
+          document.body.style.backgroundColor = bgColor;
+        });
       })();
     </script>
   </head>

client/src/App.jsx

@@ -20,22 +20,44 @@ function App() {
 
   // Apply theme to document as early as possible
   useEffect(() => {
-    // Apply theme class to document body
+    const bgColor = mode === "dark" ? "#0a0a0a" : "#f8f9fa";
+
+    // Apply theme class to document elements
+    document.documentElement.setAttribute("data-theme", mode);
+    document.documentElement.classList.remove("light-mode", "dark-mode");
+    document.documentElement.classList.add(`${mode}-mode`);
+    document.documentElement.style.backgroundColor = bgColor;
+
+    // Apply theme class to body
     document.body.classList.remove("light-mode", "dark-mode");
     document.body.classList.add(`${mode}-mode`);
+    document.body.style.backgroundColor = bgColor;
 
-    // This helps prevent flash of wrong theme
-    document.documentElement.setAttribute("data-theme", mode);
+    // Apply to root element as well
+    const rootElement = document.getElementById("root");
+    if (rootElement) {
+      rootElement.style.backgroundColor = bgColor;
+    }
+
+    // Update meta theme-color for mobile browsers
+    let metaThemeColor = document.querySelector("meta[name=theme-color]");
+    if (!metaThemeColor) {
+      metaThemeColor = document.createElement("meta");
+      metaThemeColor.name = "theme-color";
+      document.head.appendChild(metaThemeColor);
+    }
+    metaThemeColor.content = bgColor;
   }, [mode]);
 
   return (
     <div
-      className="App"
+      className={`App ${mode}-mode`}
       style={{
         height: "100%",
         width: "100%",
         WebkitOverflowScrolling: "touch",
         overflow: "auto",
+        backgroundColor: mode === "dark" ? "#0a0a0a" : "#f8f9fa",
       }}
     >
       <ThemeProvider theme={theme}>

client/src/index.css

@@ -3,13 +3,22 @@
   line-height: 1.5;
   font-weight: 400;
   color-scheme: light dark;
-  background-color: #f5f5f5;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+:root[data-theme="light"] {
+  color: #213547;
+  background-color: #f8f9fa;
+}
+
+:root[data-theme="dark"] {
+  color: #ffffff;
+  background-color: #0a0a0a;
+}
+
 * {
   margin: 0;
   padding: 0;
@@ -20,18 +29,49 @@ html,
 body,
 #root {
   width: 100%;
+  height: 100%;
   min-height: 100vh;
   font-family: "Source Sans Pro", sans-serif;
 }
 
+html {
+  background-color: inherit;
+}
+
 body {
   margin: 0;
   min-width: 320px;
+  background-color: inherit;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+#root {
+  background-color: inherit;
+}
+
+/* Styles spécifiques pour le mode sombre */
+.dark-mode {
+  background-color: #0a0a0a !important;
+  color: #ffffff;
+}
+
+/* Styles spécifiques pour le mode clair */
+.light-mode {
+  background-color: #f8f9fa !important;
+  color: #213547;
+}
+
+/* Assurer que le défilement est fluide */
+@media (prefers-reduced-motion: no-preference) {
+  html {
+    scroll-behavior: smooth;
+  }
 }
 
+/* Supprimer les styles media query qui pourraient interférer */
 @media (prefers-color-scheme: light) {
   :root {
-    color: #213547;
-    background-color: #f5f5f5;
+    /* Ces styles sont maintenant gérés par les attributs data-theme */
   }
 }