From d3b79aab353fbeee9ec2d550e9ebfda0cbfed627 Mon Sep 17 00:00:00 2001 From: Matthew Davies Date: Thu, 12 Sep 2024 10:16:15 -0700 Subject: [PATCH 1/2] Add new/old ui button Add manual switching of light/dark mode --- frontend/public/images/icons/dark-mode.svg | 24 +++++++ frontend/public/images/icons/light-mode.svg | 24 +++++++ frontend/src/components/Layout.tsx | 46 ++++++++++++- frontend/src/components/Menu.tsx | 72 +++++++++++++++++---- frontend/tailwind.config.ts | 1 + templates/static/layout.html.j2 | 4 ++ 6 files changed, 157 insertions(+), 14 deletions(-) create mode 100644 frontend/public/images/icons/dark-mode.svg create mode 100644 frontend/public/images/icons/light-mode.svg diff --git a/frontend/public/images/icons/dark-mode.svg b/frontend/public/images/icons/dark-mode.svg new file mode 100644 index 0000000..6de1aee --- /dev/null +++ b/frontend/public/images/icons/dark-mode.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/frontend/public/images/icons/light-mode.svg b/frontend/public/images/icons/light-mode.svg new file mode 100644 index 0000000..93058fd --- /dev/null +++ b/frontend/public/images/icons/light-mode.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx index ffdb2a4..4b82394 100644 --- a/frontend/src/components/Layout.tsx +++ b/frontend/src/components/Layout.tsx @@ -1,13 +1,53 @@ +import { useEffect, useState } from "react"; import { useLocation } from "react-router-dom"; import { Menu } from "./Menu"; export const Layout = ({ children }: { children: React.ReactNode }) => { const { pathname } = useLocation(); + const [isDark, setIsDark] = useState(false); + + useEffect(() => { + // set the initial state of the theme based on the user's preference + if ( + window.matchMedia && + window.matchMedia("(prefers-color-scheme: dark)").matches && + localStorage.getItem("theme") !== "light" + ) { + setIsDark(true); + } + + const handleColorSchemeChange = (event: MediaQueryListEvent) => { + // if there is a theme set in local storage, don't change the theme + if ( + localStorage.getItem("theme") === "light" || + localStorage.getItem("theme") === "dark" + ) + return; + + // else set the theme based on the event change + if (event.matches) { + setIsDark(true); + } else { + setIsDark(false); + } + }; + + window + .matchMedia("(prefers-color-scheme: dark)") + .addEventListener("change", handleColorSchemeChange); + + // Clean up the event listener + return () => { + window + .matchMedia("(prefers-color-scheme: dark)") + .removeEventListener("change", handleColorSchemeChange); + }; + }, []); return ( - <> - +
+ setIsDark(dark)} />
{
- + ); }; diff --git a/frontend/src/components/Menu.tsx b/frontend/src/components/Menu.tsx index 721f2ef..e861579 100644 --- a/frontend/src/components/Menu.tsx +++ b/frontend/src/components/Menu.tsx @@ -11,7 +11,13 @@ const defaultTools = [ { name: "HWT Path Profiler", url: "https://heywhatsthat.com/profiler.html" }, ]; -export const Menu = () => { +export const Menu = ({ + isDark, + onDarkChange, +}: { + isDark: boolean; + onDarkChange: (dark: boolean) => void; +}) => { const { data: config } = useGetConfigQuery(); const [showMenu, setShowMenu] = useState(false); @@ -41,7 +47,7 @@ export const Menu = () => {
@@ -72,6 +78,15 @@ export const Menu = () => {
+
+ + Back to the old UI + +
+
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts index 5fef7c2..32dd6c4 100644 --- a/frontend/tailwind.config.ts +++ b/frontend/tailwind.config.ts @@ -9,4 +9,5 @@ export default { corePlugins: { preflight: true, }, + darkMode: "class", } satisfies Config; diff --git a/templates/static/layout.html.j2 b/templates/static/layout.html.j2 index 3efb10e..da1a6d0 100644 --- a/templates/static/layout.html.j2 +++ b/templates/static/layout.html.j2 @@ -37,6 +37,10 @@ {% endif %} +
+ Try the new UI! +
+