Add dark mode to torchci

--- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/pytorch/test-infra?shareId=XXXX-XXXX-XXXX-XXXX).
pytorch · Jan 21, 2025 · a025972 · a025972
1 parent a311036
commit a025972
Show file tree

Hide file tree

Showing 6 changed files with 151 additions and 26 deletions.
diff --git a/torchci/components/AnnouncementBanner.module.css b/torchci/components/AnnouncementBanner.module.css
@@ -1,8 +1,20 @@
+:root {
+  --announcement-border-color: black;
+  --announcement-bg-color: #daedf4;
+}
+
 .announcementBanner {
-  border: 1px solid black;
+  border: 1px solid var(--announcement-border-color);
   border-radius: 5px;
-  background-color: #daedf4;
+  background-color: var(--announcement-bg-color);
   padding: 10px;
   margin-bottom: 10px;
   margin-top: 10px;
 }
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --announcement-border-color: white;
+    --announcement-bg-color: #2b2b2b;
+  }
+}
diff --git a/torchci/components/AnnouncementBanner.tsx b/torchci/components/AnnouncementBanner.tsx
@@ -1,5 +1,35 @@
+import { useState, useEffect } from "react";
+import styles from "./AnnouncementBanner.module.css";
+
 function AnnouncementBanner() {
-  return null;
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  useEffect(() => {
+    const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    setIsDarkMode(darkModeMediaQuery.matches);
+
+    const handleChange = (e: MediaQueryListEvent) => {
+      setIsDarkMode(e.matches);
+    };
+
+    darkModeMediaQuery.addEventListener("change", handleChange);
+
+    return () => {
+      darkModeMediaQuery.removeEventListener("change", handleChange);
+    };
+  }, []);
+
+  const toggleDarkMode = () => {
+    setIsDarkMode((prevMode) => !prevMode);
+  };
+
+  return (
+    <div className={styles.announcementBanner}>
+      <button onClick={toggleDarkMode}>
+        {isDarkMode ? "Switch to Light Mode" : "Switch to Dark Mode"}
+      </button>
+    </div>
+  );
 }
 
 export default AnnouncementBanner;
diff --git a/torchci/components/NavBar.module.css b/torchci/components/NavBar.module.css
@@ -1,10 +1,16 @@
+:root {
+  --navbar-bg-color: rgb(255, 227, 227);
+  --navbar-bg-gradient: linear-gradient(326deg, rgb(255 246 246), rgb(255 247 236));
+  --navbar-box-shadow: 0 -4px 20px 0px #c2c2c2;
+  --navbar-dropdown-bg-color: white;
+}
+
 .navbar {
   display: flex;
   padding: 0 1rem;
   font: bold;
-  background: rgb(255, 227, 227);
-  background: linear-gradient(326deg, rgb(255 246 246), rgb(255 247 236));
-  box-shadow: 0 -4px 20px 0px #c2c2c2;
+  background: var(--navbar-bg-gradient);
+  box-shadow: var(--navbar-box-shadow);
   width: 100%;
 }
 
@@ -51,10 +57,19 @@
 
 .dropdown {
   position: absolute;
-  box-shadow: 0 -4px 20px 0px #c2c2c2;
+  box-shadow: var(--navbar-box-shadow);
   z-index: 9999;
   min-width: 10rem;
   padding: 0.5rem 0;
-  background-color: white;
+  background-color: var(--navbar-dropdown-bg-color);
   display: none;
 }
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --navbar-bg-color: rgb(34, 34, 34);
+    --navbar-bg-gradient: linear-gradient(326deg, rgb(45, 45, 45), rgb(34, 34, 34));
+    --navbar-box-shadow: 0 -4px 20px 0px #000000;
+    --navbar-dropdown-bg-color: #2b2b2b;
+  }
+}
diff --git a/torchci/components/NavBar.tsx b/torchci/components/NavBar.tsx
@@ -1,8 +1,9 @@
 import styles from "components/NavBar.module.css";
 import Link from "next/link";
-import { useState } from "react";
+import { useState, useContext } from "react";
 import { AiFillGithub } from "react-icons/ai";
 import LoginSection from "./LoginSection";
+import { DarkModeContext } from "../pages/_app"; // Import DarkModeContext
 
 const NavBarDropdown = ({
   title,
@@ -102,6 +103,8 @@ function NavBar() {
     },
   ];
 
+  const { isDarkMode, toggleDarkMode } = useContext(DarkModeContext); // Use DarkModeContext
+
   return (
     <div className={styles.navbar}>
       <div>
@@ -174,6 +177,11 @@ function NavBar() {
           <li style={{ padding: "0 1rem" }}>
             <LoginSection></LoginSection>
           </li>
+          <li>
+            <button onClick={toggleDarkMode}>
+              {isDarkMode ? "Switch to Light Mode" : "Switch to Dark Mode"}
+            </button>
+          </li>
         </ul>
       </div>
     </div>

diff --git a/torchci/pages/_app.tsx b/torchci/pages/_app.tsx
@@ -7,30 +7,60 @@ import { track } from "lib/track";
 import { SessionProvider } from "next-auth/react";
 import type { AppProps } from "next/app";
 import { useRouter } from "next/router";
-import { useEffect } from "react";
+import { useEffect, createContext, useState } from "react";
 import ReactGA from "react-ga4";
 import "styles/globals.css";
 
+export const DarkModeContext = createContext({
+  isDarkMode: false,
+  toggleDarkMode: () => {},
+});
+
 function MyApp({ Component, pageProps }: AppProps) {
   const router = useRouter();
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  const toggleDarkMode = () => {
+    setIsDarkMode((prevMode) => !prevMode);
+  };
+
   useEffect(() => {
     // GA records page views on its own, but I want to see how it differs with
     // this one.
     track(router, "pageview", {});
   }, [router, router.pathname]);
 
+  useEffect(() => {
+    const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    setIsDarkMode(darkModeMediaQuery.matches);
+
+    const handleChange = (e: MediaQueryListEvent) => {
+      setIsDarkMode(e.matches);
+    };
+
+    darkModeMediaQuery.addEventListener("change", handleChange);
+
+    return () => {
+      darkModeMediaQuery.removeEventListener("change", handleChange);
+    };
+  }, []);
+
   ReactGA.initialize("G-HZEXJ323ZF");
   return (
     <>
       <SessionProvider>
         <TitleProvider>
-          <NavBar />
-          <AnnouncementBanner />
-          <SevReport />
-          <div style={{ margin: "20px" }}>
-            <Component {...pageProps} />
-            <Analytics />
-          </div>
+          <DarkModeContext.Provider value={{ isDarkMode, toggleDarkMode }}>
+            <div className={isDarkMode ? "dark-mode" : ""}>
+              <NavBar />
+              <AnnouncementBanner />
+              <SevReport />
+              <div style={{ margin: "20px" }}>
+                <Component {...pageProps} />
+                <Analytics />
+              </div>
+            </div>
+          </DarkModeContext.Provider>
         </TitleProvider>
       </SessionProvider>
     </>

diff --git a/torchci/styles/globals.css b/torchci/styles/globals.css
@@ -1,7 +1,34 @@
+:root {
+  --background-color: #ffffff;
+  --text-color: #000000;
+  --link-color: #0064cf;
+  --code-background-color: aliceblue;
+  --button-background-color: #ffffff;
+  --button-text-color: #212529;
+  --button-border-color: transparent;
+  --button-border-radius: 0.25rem;
+  --button-active-background-color: green;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background-color: #121212;
+    --text-color: #ffffff;
+    --link-color: #1e90ff;
+    --code-background-color: #2b2b2b;
+    --button-background-color: #333333;
+    --button-text-color: #ffffff;
+    --button-border-color: #444444;
+    --button-active-background-color: #006400;
+  }
+}
+
 html {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  background-color: var(--background-color);
+  color: var(--text-color);
 }
 
 h1 {
@@ -11,10 +38,12 @@ h1 {
 body {
   margin: 0;
   padding: 5px;
+  background-color: var(--background-color);
+  color: var(--text-color);
 }
 
 a {
-  color: inherit;
+  color: var(--link-color);
   text-decoration: none;
 }
 
@@ -23,34 +52,35 @@ a {
 }
 
 pre {
-  background-color: aliceblue;
+  background-color: var(--code-background-color);
 }
 
 code {
-  background-color: aliceblue;
+  background-color: var(--code-background-color);
 }
 
 a {
   text-decoration: none;
-  color: #0064cf;
+  color: var(--link-color);
 }
 
 button {
   cursor: pointer;
   display: inline-block;
   font-weight: 400;
-  color: #212529;
+  color: var(--button-text-color);
   text-align: center;
   vertical-align: middle;
   user-select: none;
-  border: 1px solid transparent;
-  border-radius: 0.25rem;
+  border: 1px solid var(--button-border-color);
+  border-radius: var(--button-border-radius);
+  background-color: var(--button-background-color);
 }
 
 .animate-on-click {
-  background-color: white;
+  background-color: var(--button-background-color);
 }
 
 .animate-on-click:active {
-  background-color: green;
+  background-color: var(--button-active-background-color);
 }