feat(General): ✨ Save theme preference

skupperproject · Oct 25, 2023 · 5b10246 · 5b10246
1 parent ec959e6
commit 5b10246
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 3 deletions.
diff --git a/public/index.html b/public/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="pf-v5-theme-dark">
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="favicon.ico" />

diff --git a/src/layout/Header.tsx b/src/layout/Header.tsx
@@ -1,3 +1,5 @@
+import { FormEvent, useEffect, useState } from 'react';
+
 import {
   Brand,
   Masthead,
@@ -6,13 +8,46 @@ import {
   MastheadMain,
   MastheadToggle,
   PageToggleButton,
-  Title
+  Switch,
+  Title,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem
 } from '@patternfly/react-core';
 import { BarsIcon } from '@patternfly/react-icons';
 
 import { brandLogo, brandName } from '@config/config';
 
+const storageKey = 'theme-preference';
+const DARK_THEME_CLASS = 'pf-v5-theme-dark';
+
 const SkHeader = function () {
+  const [isChecked, setIsChecked] = useState<boolean>(false);
+
+  const handleChange = (_event: FormEvent<HTMLInputElement>, checked: boolean) => {
+    const htmlElement = document.querySelector('html') as HTMLElement;
+
+    checked ? htmlElement.classList.add(DARK_THEME_CLASS) : htmlElement.classList.remove(DARK_THEME_CLASS);
+    checked ? localStorage.setItem(storageKey, DARK_THEME_CLASS) : localStorage.removeItem(storageKey);
+
+    setIsChecked(checked);
+  };
+
+  useEffect(() => {
+    const themePreference = localStorage.getItem(storageKey);
+
+    if (themePreference) {
+      const htmlElement = document.querySelector('html') as HTMLElement;
+      htmlElement.classList.add(themePreference);
+      setIsChecked(true);
+
+      return;
+    }
+
+    setIsChecked(false);
+  }, []);
+
   return (
     <Masthead className="sk-header" data-testid="sk-header">
       <MastheadToggle>
@@ -27,7 +62,24 @@ const SkHeader = function () {
           </Brand>
         </MastheadBrand>
       </MastheadMain>
-      <MastheadContent> {brandName && <Title headingLevel="h1">{brandName}</Title>}</MastheadContent>
+      <MastheadContent>
+        {brandName && <Title headingLevel="h1">{'brandName'}</Title>}
+        <Toolbar>
+          <ToolbarContent>
+            <ToolbarGroup align={{ default: 'alignRight' }}>
+              <ToolbarItem>
+                <Switch
+                  label="Dark theme"
+                  labelOff="Dark theme"
+                  isChecked={isChecked}
+                  onChange={handleChange}
+                  ouiaId="BasicSwitch"
+                />
+              </ToolbarItem>
+            </ToolbarGroup>
+          </ToolbarContent>
+        </Toolbar>
+      </MastheadContent>
     </Masthead>
   );
 };

diff --git a/src/layout/MainContainer.tsx b/src/layout/MainContainer.tsx
@@ -19,6 +19,7 @@ import NavigationViewLink from '../core/components/NavigationViewLink';
 import TransitionPage from '../core/components/TransitionPages/Fade';
 
 import '@patternfly/patternfly/patternfly-addons.css';
+import '@patternfly/patternfly/patternfly-charts-theme-dark.css';
 
 interface MainContainerProps {
   dataTestId?: string;