feat: Dark mode improvements

philipp-meier · Jul 5, 2024 · afd82a8 · afd82a8
1 parent 0ffd704
commit afd82a8
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 18 deletions.
diff --git a/src/Chrono/ClientApp/src/Shared/Components/MainMenu/MainMenu.tsx b/src/Chrono/ClientApp/src/Shared/Components/MainMenu/MainMenu.tsx
@@ -49,7 +49,7 @@ const MainMenu = () => {
     const isActiveItem = (item: string) => {
         return item.toLowerCase() === activeItem.toLowerCase();
     };
-
+    
     const renderLinks = () => {
         const isLoggedIn = userInfo?.isAuthenticated ?? false;
         return MenuItems.filter(
@@ -58,13 +58,13 @@ const MainMenu = () => {
                 (x.displayState === "loggedIn" && isLoggedIn) ||
                 (x.displayState === "loggedOut" && !isLoggedIn)
         ).map((menuItem, index) => {
-            const {name, disableNavigation, position, element} = menuItem;
+            const {name, disableClickHandler, position, element, clickHandler} = menuItem;
             return (
                 <Menu.Item
                     key={index}
                     name={name}
                     active={isActiveItem(name)}
-                    onClick={!disableNavigation ? handleItemClick : undefined}
+                    onClick={!disableClickHandler ? clickHandler || handleItemClick : undefined}
                     position={position}
                 >
                     {element}

diff --git a/src/Chrono/ClientApp/src/Shared/Components/MainMenu/MenuItems.tsx b/src/Chrono/ClientApp/src/Shared/Components/MainMenu/MenuItems.tsx
@@ -1,10 +1,11 @@
-import {Image} from "semantic-ui-react";
+import {Icon, Image} from "semantic-ui-react";
 import {ThemeService} from "../../ThemeService.ts";
 
 type MenuItemDefinition = {
   name: string;
   element?: JSX.Element;
-  disableNavigation?: boolean;
+  clickHandler?: () => void;
+  disableClickHandler?: boolean;
   position?: "left" | "right";
   displayState: "always" | "loggedIn" | "loggedOut";
 };
@@ -13,16 +14,14 @@ const MenuItems: MenuItemDefinition[] = [
   {
     name: "logo",
     element: (
-      <a onClick={() => ThemeService.toggle()}>
-        <Image
-          size="tiny"
-          src="/logo.png"
-          style={{margin: "0 auto"}}
-          alt=""
-        />
-      </a>
+      <Image
+        size="tiny"
+        src="/logo.png"
+        style={{margin: "0 auto"}}
+        alt=""
+      />
     ),
-    disableNavigation: true,
+    disableClickHandler: true,
     displayState: "always",
   },
   {
@@ -43,14 +42,26 @@ const MenuItems: MenuItemDefinition[] = [
   },
   {
     name: "logout",
-    position: "right",
     displayState: "loggedIn",
   },
   {
     name: "login",
-    position: "right",
     displayState: "loggedOut",
   },
+  {
+    name: "modeToggle",
+    displayState: "always",
+    position: "right",
+    element: (
+      <Icon id="modeIcon" name={ThemeService.isDarkModeEnabled() ? 'sun' : 'moon'} />
+    ),
+    clickHandler: () => {
+      const modeIcon = document.getElementById('modeIcon')!;
+      modeIcon.classList.toggle("sun");
+      modeIcon.classList.toggle("moon");
+      ThemeService.toggle()
+    }
+  },
 ];
 
 export default MenuItems;
diff --git a/src/Chrono/ClientApp/src/Shared/ThemeService.ts b/src/Chrono/ClientApp/src/Shared/ThemeService.ts
@@ -1,6 +1,7 @@
 import {
   enable,
   disable,
+  setFetchMethod,
 } from 'darkreader';
 
 const theme = {
@@ -11,7 +12,9 @@ const theme = {
 
 export class ThemeService {
   static init() {
-    if (localStorage.getItem('isDarkMode') === 'true')
+    setFetchMethod(window.fetch);
+
+    if (this.isDarkModeEnabled())
       enable(theme);
     else
       disable()
@@ -28,9 +31,13 @@ export class ThemeService {
   }
 
   static toggle() {
-    if (localStorage.getItem('isDarkMode') === 'true')
+    if (this.isDarkModeEnabled())
       this.disableDarkMode();
     else
       this.enableDarkMode();
   }
+
+  static isDarkModeEnabled() {
+    return localStorage.getItem('isDarkMode') === 'true';
+  }
 }
diff --git a/src/Chrono/ClientApp/src/index.less b/src/Chrono/ClientApp/src/index.less
@@ -15,3 +15,7 @@ code {
 div.masterData.tabs > div.attached.tab {
   border-bottom: none;
 }
+
+#modeIcon {
+  font-size: 1em !important;
+}