design: add simple dark mode

Signed-off-by: GRBurst <[email protected]>

frontend/src/components/HnJobs.tsx

@@ -1,14 +1,16 @@
 import type { HashSet } from "effect/HashSet";
 
-import { lazy } from "react";
+import { lazy, useEffect, useState } from "react";
 
 import { getDatabase } from "firebase/database";
 import {
   DatabaseProvider,
   useFirebaseApp,
 } from "reactfire";
 
+import { App, ConfigProvider, theme } from "antd";
 
+import { GithubIcon } from "./Icons";
 import { TagFilter } from "../models/TagFilter";
 
 import { locations, technologies, misc } from "../utils/predefined";
@@ -17,7 +19,10 @@ const FilterableLocalList = lazy(() => import("./FilterableLocalList"));
 const FilterableSqliteList = lazy(() => import("./FilterableSqliteList"));
 const WhoIsHiring = lazy(() => import("./WhoIsHiring"));
 
-function HnJobs() {
+const HnJobs = () => {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+  const { defaultAlgorithm, darkAlgorithm } = theme;
+
   const app = useFirebaseApp();
   const database = getDatabase(app);
 
@@ -39,12 +44,38 @@ function HnJobs() {
     }
   };
 
+  useEffect(() => {
+    // Set mode to value during mount
+    const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
+    setIsDarkMode(prefersDarkMode);
+    console.info("Setting color mode to: ", prefersDarkMode ? "dark" : "light");
+
+    // Add event listener to switch if theme is changed afterwards
+    window.matchMedia('(prefers-color-scheme: dark)')
+      .addEventListener('change', event => {
+        const colorScheme = event.matches ? "dark" : "light";
+        console.info("Changing color mode to: ", colorScheme);
+        setIsDarkMode(true);
+      });
+  }, []);
+
   return (
     <>
-      <DatabaseProvider sdk={database}>
-        <h1 className="hntitle">HackerNews Jobs 🚀</h1>
-        {getList(import.meta.env.VITE_DATA_SOURCE)}
-      </DatabaseProvider>
+      <ConfigProvider
+        theme={{
+          token: {
+            colorPrimary: "#ff6600",
+          },
+          algorithm: isDarkMode ? darkAlgorithm : defaultAlgorithm,
+        }}>
+        <App>
+          <h1 className="hntitle">HackerNews Jobs 🚀</h1>
+          <DatabaseProvider sdk={database}>
+            {getList(import.meta.env.VITE_DATA_SOURCE)}
+          </DatabaseProvider>
+          <GithubIcon url="https://grburst.github.io/hnjobs" darkMode={isDarkMode} />
+        </App>
+      </ConfigProvider>
     </>
   );
 }

frontend/src/components/Icons.tsx

@@ -1,19 +1,22 @@
 import React from "react";
-import githubUrl from "../../assets/github-mark.svg";
+import GithubUrlLightMode from "../../assets/github-mark.svg";
+import GithubUrlDarkMode from "../../assets/github-mark-white.svg";
 
 interface GithubIconProps {
   url: string,
+  darkMode: boolean,
   style: React.CSSProperties | undefined,
 }
-export const GithubIcon = ({url, style}: GithubIconProps) => {
+export const GithubIcon = ({ url, darkMode, style }: GithubIconProps) => {
   return (
     <a href={url} target="_blank">
       <div className="github-icon" style={style ? style : {}}>
-        <img src={githubUrl} />
+        <img src={darkMode ? GithubUrlDarkMode : GithubUrlLightMode} />
       </div>
     </a>
   )
-} 
-GithubIcon.defaultProps = {
-  style: undefined
 }
+GithubIcon.defaultProps = {
+  darkMode: false,
+  style: undefined,
+}

frontend/src/index.css

@@ -16,12 +16,18 @@
 }
 
 body {
+  background: #fff;
   margin: 0;
   display: flex;
   place-items: flex-start center;
   min-width: 320px;
   min-height: 100vh;
 }
+@media (prefers-color-scheme: dark) {
+  body {
+    background: #141414;
+  }
+}
 
 pre {
   white-space: pre-wrap;

frontend/src/index.tsx

@@ -5,7 +5,6 @@ import { FirebaseAppProvider } from "reactfire";
 import HnJobs from "./components/HnJobs";
 import "./index.css";
 
-import { GithubIcon } from "./components/Icons";
 const firebaseConfig = {
   databaseURL: "https://hacker-news.firebaseio.com",
 };
@@ -19,9 +18,8 @@ const root = ReactDOM.createRoot(rootElement);
 
 root.render(
   <React.StrictMode>
-    <FirebaseAppProvider firebaseConfig={firebaseConfig}>
-      <HnJobs />
-    </FirebaseAppProvider>
-    <GithubIcon url="https://grburst.github.io/hnjobs" />
+      <FirebaseAppProvider firebaseConfig={firebaseConfig}>
+        <HnJobs />
+      </FirebaseAppProvider>
   </React.StrictMode>
 );