From 3dab29538744f98f2c2186233577bc9f74d05620 Mon Sep 17 00:00:00 2001
From: soup <soup@r4tio.dev>
Date: Tue, 7 May 2024 12:42:52 +0200
Subject: [PATCH] feat(web): add theme toggle to navbar (#1540)

* feat(web): add theme toggle to navbar

* refactor: move OS theme detection to App.tsx

* fix:  disallowed unused variables

* fix: removed unused variable

* refactor: check for os color scheme in SettingsContextDefaults

* refactor: remove unnecessary iconTheme variable

* fix: add title tag to button
---
 web/src/App.tsx                        | 15 ++++++++++++-
 web/src/components/header/RightNav.tsx | 30 +++++++++++++++++++++++---
 web/src/utils/Context.ts               |  2 +-
 3 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index ad9b7ea..1e4909a 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: GPL-2.0-or-later
  */
 
+import { useEffect } from "react";
 import { RouterProvider } from "@tanstack/react-router"
 import { QueryClientProvider } from "@tanstack/react-query";
 import { Toaster } from "react-hot-toast";
@@ -10,7 +11,7 @@ import { Portal } from "react-portal";
 import { Router } from "@app/routes";
 import { routerBasePath } from "@utils";
 import { queryClient } from "@api/QueryClient";
-import { AuthContext } from "@utils/Context";
+import { AuthContext, SettingsContext } from "@utils/Context";
 
 declare module '@tanstack/react-router' {
   interface Register {
@@ -19,6 +20,18 @@ declare module '@tanstack/react-router' {
 }
 
 export function App() {
+  const [ , setSettings] = SettingsContext.use();
+
+  useEffect(() => {
+    const themeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleThemeChange = (e: MediaQueryListEvent) => {
+      setSettings(prevState => ({ ...prevState, darkTheme: e.matches }));
+    };
+
+    themeMediaQuery.addEventListener('change', handleThemeChange);
+    return () => themeMediaQuery.removeEventListener('change', handleThemeChange);
+  }, [setSettings]);
+
   return (
       <QueryClientProvider client={queryClient}>
         <Portal>
diff --git a/web/src/components/header/RightNav.tsx b/web/src/components/header/RightNav.tsx
index b9db291..32a4fdb 100644
--- a/web/src/components/header/RightNav.tsx
+++ b/web/src/components/header/RightNav.tsx
@@ -10,14 +10,38 @@ import { Menu, Transition } from "@headlessui/react";
 import { classNames } from "@utils";
 
 import { RightNavProps } from "./_shared";
-import { Cog6ToothIcon, ArrowLeftOnRectangleIcon } from "@heroicons/react/24/outline";
-import {Link} from "@tanstack/react-router";
+
+import { Cog6ToothIcon, ArrowLeftOnRectangleIcon, MoonIcon, SunIcon } from "@heroicons/react/24/outline";
+import { Link } from "@tanstack/react-router";
+import { SettingsContext } from "@utils/Context";
 
 export const RightNav = (props: RightNavProps) => {
+  const [settings, setSettings] = SettingsContext.use();
+
+  const toggleTheme = () => {
+    setSettings(prevState => ({
+      ...prevState,
+      darkTheme: !prevState.darkTheme
+    }));
+  };
+
   return (
     <div className="hidden sm:block">
       <div className="ml-4 flex items-center sm:ml-6">
-        <Menu as="div" className="ml-3 relative">
+        <div className="mt-1 items-center">
+          <button
+            onClick={toggleTheme}
+            className="p-1 rounded-full focus:outline-none focus:none transition duration-100 ease-out transform hover:bg-gray-200 dark:hover:bg-gray-800 hover:scale-100"
+            title={settings.darkTheme ? "Switch to light mode (currently dark mode)" : "Switch to dark mode (currently light mode)"}
+          >
+            {settings.darkTheme ? (
+              <MoonIcon className="h-4 w-4 text-gray-500 transition duration-100 ease-out transform" aria-hidden="true" />
+            ) : (
+              <SunIcon className="h-4 w-4 text-gray-600" aria-hidden="true" />
+            )}
+          </button>
+        </div>
+        <Menu as="div" className="ml-2 relative">
           {({ open }) => (
             <>
               <Menu.Button
diff --git a/web/src/utils/Context.ts b/web/src/utils/Context.ts
index 1f66c37..ce0b389 100644
--- a/web/src/utils/Context.ts
+++ b/web/src/utils/Context.ts
@@ -35,7 +35,7 @@ export type FilterListState = {
 const SettingsContextDefaults: SettingsType = {
   debug: false,
   checkForUpdates: true,
-  darkTheme: true,
+  darkTheme: window.matchMedia('(prefers-color-scheme: dark)').matches,
   scrollOnNewLog: false,
   indentLogLines: false,
   hideWrappedText: false