From 26272218e6d80c9a6ddeb10d2d8ff3f4f01666d1 Mon Sep 17 00:00:00 2001 From: GRBurst Date: Fri, 24 May 2024 16:33:31 +0200 Subject: [PATCH] design: add simple dark mode Signed-off-by: GRBurst --- frontend/assets/github-mark-white.svg | 1 + frontend/assets/github-mark.svg | 41 +------------------------ frontend/src/components/HnJobs.tsx | 43 +++++++++++++++++++++++---- frontend/src/components/Icons.tsx | 15 ++++++---- frontend/src/index.css | 6 ++++ frontend/src/index.tsx | 8 ++--- 6 files changed, 57 insertions(+), 57 deletions(-) create mode 100644 frontend/assets/github-mark-white.svg diff --git a/frontend/assets/github-mark-white.svg b/frontend/assets/github-mark-white.svg new file mode 100644 index 0000000..d5e6491 --- /dev/null +++ b/frontend/assets/github-mark-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/assets/github-mark.svg b/frontend/assets/github-mark.svg index 3d1db57..c65bb90 100644 --- a/frontend/assets/github-mark.svg +++ b/frontend/assets/github-mark.svg @@ -1,40 +1 @@ - - - - - - + diff --git a/frontend/src/components/HnJobs.tsx b/frontend/src/components/HnJobs.tsx index a10aa3c..7d39c69 100644 --- a/frontend/src/components/HnJobs.tsx +++ b/frontend/src/components/HnJobs.tsx @@ -1,6 +1,6 @@ import type { HashSet } from "effect/HashSet"; -import { lazy } from "react"; +import { lazy, useEffect, useState } from "react"; import { getDatabase } from "firebase/database"; import { @@ -8,7 +8,9 @@ import { 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 ( <> - -

HackerNews Jobs 🚀

- {getList(import.meta.env.VITE_DATA_SOURCE)} - + + +

HackerNews Jobs 🚀

+ + {getList(import.meta.env.VITE_DATA_SOURCE)} + + + + ); } diff --git a/frontend/src/components/Icons.tsx b/frontend/src/components/Icons.tsx index 9481d9f..e2079f1 100644 --- a/frontend/src/components/Icons.tsx +++ b/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 (
- +
) -} -GithubIcon.defaultProps = { - style: undefined } +GithubIcon.defaultProps = { + darkMode: false, + style: undefined, +} \ No newline at end of file diff --git a/frontend/src/index.css b/frontend/src/index.css index abe469e..e026e61 100644 --- a/frontend/src/index.css +++ b/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; diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index b90f595..217a3dd 100644 --- a/frontend/src/index.tsx +++ b/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( - - - - + + + );