Spaces:

OpenEvals
/

find-a-leaderboard

Running

tfrere commited on 29 days ago

Commit

60de3d1

1 Parent(s): 2405b72

update footer year and update dark mode behavior

Files changed (5) hide show

client/index.html CHANGED Viewed

@@ -11,6 +11,18 @@
       rel="stylesheet"
     />
     <title>Leaderboards on the Hub</title>
   </head>
   <body>
     <div id="root"></div>

       rel="stylesheet"
     />
     <title>Leaderboards on the Hub</title>
+    <script>
+      // Detect system preference for dark mode and apply it immediately
+      // This prevents flash of wrong theme on initial load
+      (function () {
+        var prefersDarkMode =
+          window.matchMedia &&
+          window.matchMedia("(prefers-color-scheme: dark)").matches;
+        var theme = prefersDarkMode ? "dark" : "light";
+        document.documentElement.setAttribute("data-theme", theme);
+        document.documentElement.classList.add(theme + "-mode");
+      })();
+    </script>
   </head>
   <body>
     <div id="root"></div>

client/src/App.jsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from "react";
 import { HashRouter as Router, Routes, Route } from "react-router-dom";
 import { ThemeProvider } from "@mui/material/styles";
 import { Box, CssBaseline } from "@mui/material";
@@ -13,6 +13,21 @@ function App() {
   const { mode, toggleTheme } = useThemeMode();
   const theme = getTheme(mode);
   return (
     <div
       className="App"

+import React, { useEffect } from "react";
 import { HashRouter as Router, Routes, Route } from "react-router-dom";
 import { ThemeProvider } from "@mui/material/styles";
 import { Box, CssBaseline } from "@mui/material";
   const { mode, toggleTheme } = useThemeMode();
   const theme = getTheme(mode);
+  // Clean up any theme-related localStorage entries on initial load
+  useEffect(() => {
+    localStorage.removeItem("theme-mode");
+  }, []);
+  // Apply theme to document as early as possible
+  useEffect(() => {
+    // Apply theme class to document body
+    document.body.classList.remove("light-mode", "dark-mode");
+    document.body.classList.add(`${mode}-mode`);
+    // This helps prevent flash of wrong theme
+    document.documentElement.setAttribute("data-theme", mode);
+  }, [mode]);
   return (
     <div
       className="App"

client/src/components/Footer/Footer.jsx CHANGED Viewed

@@ -12,8 +12,8 @@ const Footer = () => {
       }}
     >
       <Typography variant="body2" color="text.secondary" sx={{ mx: 4 }}>
-        © 2024 Hugging Face - Leaderboards on the hub - Made with 🤗 by the HF
-        team -{" "}
         <Link
           href="https://huggingface.co"
           target="_blank"

       }}
     >
       <Typography variant="body2" color="text.secondary" sx={{ mx: 4 }}>
+        © {new Date().getFullYear()} Hugging Face - Leaderboards on the hub -
+        Made with 🤗 by the HF team -{" "}
         <Link
           href="https://huggingface.co"
           target="_blank"

client/src/hooks/useThemeMode.js CHANGED Viewed

@@ -1,18 +1,53 @@
 import { useState, useEffect } from "react";
 export const useThemeMode = () => {
-  const [mode, setMode] = useState(() => {
-    const savedMode = localStorage.getItem("theme-mode");
-    return savedMode || "light";
-  });
   useEffect(() => {
-    localStorage.setItem("theme-mode", mode);
-  }, [mode]);
   const toggleTheme = () => {
     setMode((prevMode) => (prevMode === "light" ? "dark" : "light"));
   };
-  return { mode, toggleTheme };
 };

 import { useState, useEffect } from "react";
 export const useThemeMode = () => {
+  // Function to detect system preference for dark mode
+  const getSystemPreference = () => {
+    return window.matchMedia &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light";
+  };
+  // Initialize state with system preference
+  const [mode, setMode] = useState(getSystemPreference());
+  // Listen for changes in system preference
   useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = (e) => {
+      setMode(e.matches ? "dark" : "light");
+    };
+    // Add event listener
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener("change", handleChange);
+    } else {
+      // For older browsers
+      mediaQuery.addListener(handleChange);
+    }
+    // Cleanup
+    return () => {
+      if (mediaQuery.removeEventListener) {
+        mediaQuery.removeEventListener("change", handleChange);
+      } else {
+        // For older browsers
+        mediaQuery.removeListener(handleChange);
+      }
+    };
+  }, []);
+  // Toggle function is kept for compatibility with existing code
+  // but it will only temporarily change the theme until the next system preference change
   const toggleTheme = () => {
     setMode((prevMode) => (prevMode === "light" ? "dark" : "light"));
   };
+  return {
+    mode,
+    toggleTheme,
+    isSystemPreference: true,
+  };
 };

client/src/main.jsx CHANGED Viewed

@@ -1,46 +1,10 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { ThemeProvider, createTheme } from "@mui/material/styles";
-import { CssBaseline } from "@mui/material";
 import "./index.css";
 import App from "./App.jsx";
-// Créer un thème personnalisé
-const theme = createTheme({
-  typography: {
-    fontFamily: '"Source Sans Pro", sans-serif',
-    h1: {
-      fontFamily: '"Source Sans Pro", sans-serif',
-    },
-    h2: {
-      fontFamily: '"Source Sans Pro", sans-serif',
-    },
-    h3: {
-      fontFamily: '"Source Sans Pro", sans-serif',
-    },
-    h4: {
-      fontFamily: '"Source Sans Pro", sans-serif',
-    },
-    h5: {
-      fontFamily: '"Source Sans Pro", sans-serif',
-    },
-    h6: {
-      fontFamily: '"Source Sans Pro", sans-serif',
-    },
-    body1: {
-      fontFamily: '"Source Sans Pro", sans-serif',
-    },
-    body2: {
-      fontFamily: '"Source Sans Pro", sans-serif',
-    },
-  },
-});
 createRoot(document.getElementById("root")).render(
   <StrictMode>
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      <App />
-    </ThemeProvider>
   </StrictMode>
 );

 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
 import App from "./App.jsx";
 createRoot(document.getElementById("root")).render(
   <StrictMode>
+    <App />
   </StrictMode>
 );