feat: Add dark theme support

loopholelabs · May 15, 2024 · 7636b96 · 7636b96
1 parent 4d26e8b
commit 7636b96
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 1 deletion.
diff --git a/pkg/frontend/src/App.tsx b/pkg/frontend/src/App.tsx
@@ -50,6 +50,8 @@ import { useElementSize } from "usehooks-ts";
 import "./main.scss";
 import logo from "./logo-dark.png";
 
+const DARK_THEME_CLASS_NAME = "pf-v5-theme-dark";
+
 class Local {
   constructor(
     private setResults: React.Dispatch<React.SetStateAction<IResults>>,
@@ -132,6 +134,41 @@ interface IResults {
 }
 
 const App = () => {
+  const [darkMode, setDarkMode] = useState(false);
+  useEffect(() => {
+    const darkModeMediaQuery = window.matchMedia(
+      "(prefers-color-scheme: dark)"
+    );
+
+    const updateTheme = () => {
+      if (darkModeMediaQuery.matches) {
+        setDarkMode(true);
+
+        return;
+      }
+
+      setDarkMode(false);
+    };
+
+    darkModeMediaQuery.addEventListener("change", updateTheme);
+
+    updateTheme();
+
+    return () => {
+      darkModeMediaQuery.removeEventListener("change", updateTheme);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (darkMode) {
+      document.documentElement.classList.add(DARK_THEME_CLASS_NAME);
+
+      return;
+    }
+
+    document.documentElement.classList.remove(DARK_THEME_CLASS_NAME);
+  }, [darkMode]);
+
   const [clients, setClients] = useState(0);
   useEffect(() => console.log(clients, "clients connected"), [clients]);
 

diff --git a/pkg/frontend/src/main.scss b/pkg/frontend/src/main.scss
@@ -12,7 +12,6 @@ body,
 #root,
 .pf-v5-x-chart {
   height: 100%;
-  background: var(--pf-v5-c-page__main-section--m-light--BackgroundColor);
 }
 
 .pf-v5-c-toolbar__content {
@@ -27,3 +26,11 @@ body,
   justify-content: center;
 }
 
+.pf-v5-c-toolbar {
+  background: transparent;
+}
+
+:root {
+  --pf-v5-chart-axis--tick-label--Fill: var(--pf-v5-global--Color--200);
+  --pf-v5-chart-container--cursor--line--Fill: var(--pf-v5-global--Color--100);
+}