update colors

client/index.html

@@ -19,34 +19,14 @@
           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>

client/src/App.jsx

@@ -20,24 +20,17 @@ function App() {
 
   // Apply theme to document as early as possible
   useEffect(() => {
-    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;
 
     // 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]");
@@ -46,7 +39,6 @@ function App() {
       metaThemeColor.name = "theme-color";
       document.head.appendChild(metaThemeColor);
     }
-    metaThemeColor.content = bgColor;
   }, [mode]);
 
   return (
@@ -57,7 +49,6 @@ function App() {
         width: "100%",
         WebkitOverflowScrolling: "touch",
         overflow: "auto",
-        backgroundColor: mode === "dark" ? "#0a0a0a" : "#f8f9fa",
       }}
     >
       <ThemeProvider theme={theme}>

client/src/components/LeaderboardFilters/SearchBar.jsx

@@ -204,12 +204,12 @@ const SearchBar = ({
                       checked={arenaOnly}
                       onChange={(e) => setArenaOnly(e.target.checked)}
                       size="small"
-                      color="secondary"
+                      color="primary"
                       sx={{
                         "&.Mui-checked": {
-                          color: "secondary.light",
+                          color: "primary.light",
                           "& .MuiSwitch-track": {
-                            backgroundColor: "secondary.light",
+                            backgroundColor: "primary.light",
                           },
                         },
                       }}
@@ -220,7 +220,7 @@ const SearchBar = ({
                     userSelect: "none!important",
                     mr: 0,
                     "& .MuiFormControlLabel-label": {
-                      color: arenaOnly ? "secondary.light" : "inherit",
+                      color: arenaOnly ? "primary.light" : "inherit",
                       userSelect: arenaOnly ? "none" : "auto",
                     },
                   }}

client/src/config/theme.js

@@ -48,7 +48,7 @@ const getDesignTokens = (mode) => ({
       contrastText: "#fff",
     },
     background: {
-      default: mode === "light" ? "#f8f9fa" : "#0a0a0a",
+      default: mode === "light" ? "#f5f5f5" : "#0b0f19",
       paper: mode === "light" ? "#fff" : "#1a1a1a",
       subtle: mode === "light" ? "grey.100" : "grey.900",
       hover: mode === "light" ? "action.hover" : alpha("#fff", 0.08),
@@ -85,10 +85,10 @@ const getDesignTokens = (mode) => ({
     MuiCssBaseline: {
       styleOverrides: {
         html: {
-          backgroundColor: mode === "light" ? "#f8f9fa" : "#0a0a0a",
+          backgroundColor: mode === "light" ? "#f5f5f5" : "#0b0f19",
         },
         body: {
-          backgroundColor: mode === "light" ? "#f8f9fa" : "#0a0a0a",
+          backgroundColor: mode === "light" ? "#f5f5f5" : "#0b0f19",
         },
       },
     },

client/src/index.css

@@ -10,13 +10,11 @@
 }
 
 :root[data-theme="light"] {
-  color: #213547;
-  background-color: #f8f9fa;
+  background-color: #f5f5f5;
 }
 
 :root[data-theme="dark"] {
-  color: #ffffff;
-  background-color: #0a0a0a;
+  background-color: #020011;
 }
 
 * {
@@ -52,14 +50,12 @@ body {
 
 /* Styles spécifiques pour le mode sombre */
 .dark-mode {
-  background-color: #0a0a0a !important;
-  color: #ffffff;
+  background-color: #020011 !important;
 }
 
 /* Styles spécifiques pour le mode clair */
 .light-mode {
-  background-color: #f8f9fa !important;
-  color: #213547;
+  background-color: #f5f5f5 !important;
 }
 
 /* Assurer que le défilement est fluide */