add dark theme switcher

Author: nicolethoen

src/app/AppLayout/AppLayout.tsx

@@ -2,8 +2,10 @@ import * as React from 'react';
 import { NavLink, useLocation } from 'react-router-dom';
 import {
   Button,
+  Icon,
   Masthead,
   MastheadBrand,
+  MastheadContent,
   MastheadMain,
   MastheadToggle,
 	Nav,
@@ -13,17 +15,30 @@ import {
 	Page,
 	PageSidebar,
   PageSidebarBody,
-	SkipToContent
+	SkipToContent,
+  ToggleGroup,
+  ToggleGroupItem,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem
 } from '@patternfly/react-core';
 import { IAppRoute, IAppRouteGroup, routes } from '@app/routes';
-import { BarsIcon } from '@patternfly/react-icons';
+import { BarsIcon, MoonIcon, SunIcon } from '@patternfly/react-icons';
 
 interface IAppLayout {
   children: React.ReactNode;
 }
 
 const AppLayout: React.FunctionComponent<IAppLayout> = ({ children }) => {
   const [sidebarOpen, setSidebarOpen] = React.useState(true);
+  const [isDarkTheme, setIsDarkTheme] = React.useState(false);
+
+  const toggleDarkTheme = (_evt, selected) => {
+    const darkThemeToggleClicked = !selected === isDarkTheme
+    document.querySelector('html').classList.toggle('pf-v5-theme-dark', darkThemeToggleClicked);
+    setIsDarkTheme(darkThemeToggleClicked);
+  };
+
   const Header = (
     <Masthead>
       <MastheadToggle>
@@ -63,6 +78,18 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children }) => {
           </svg>
         </MastheadBrand>
       </MastheadMain>
+      <MastheadContent>
+        <Toolbar>
+          <ToolbarContent>
+            <ToolbarItem align={{ default: 'alignRight' }}>
+              <ToggleGroup aria-label="Dark theme toggle group">
+                <ToggleGroupItem aria-label="light theme toggle" icon={<Icon size="md"><SunIcon /></Icon>} isSelected={!isDarkTheme} onChange={toggleDarkTheme} />
+                <ToggleGroupItem aria-label="dark theme toggle" icon={<Icon size="md"><MoonIcon /></Icon>} isSelected={isDarkTheme} onChange={toggleDarkTheme} />
+              </ToggleGroup>
+            </ToolbarItem>
+          </ToolbarContent>
+        </Toolbar>
+      </MastheadContent>
     </Masthead>
   );
 

src/app/Inventory/Inventory.tsx

@@ -2,8 +2,8 @@ import * as React from "react";
 import {ISupportProps} from "@app/Resources/Resources";
 import {
   EmptyState,
-  EmptyStateFooter,
   EmptyStateBody,
+  EmptyStateFooter,
   Button,
   Bullseye,
   EmptyStateActions,
@@ -20,7 +20,7 @@ import {
   ToolbarContent,
   ToolbarItem
 } from '@patternfly/react-core';
-import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import {MenuToggleElement} from "@patternfly/react-core/dist/esm/components/MenuToggle/MenuToggle";
 
@@ -170,7 +170,7 @@ const Inventory: React.FunctionComponent<ISupportProps> = () => {
       window.removeEventListener('keydown', handleBulkSelectMenuKeys);
       window.removeEventListener('click', handleBulkSelectClickOutside);
     };
-  }, [isBulkSelectOpen, bulkSelectMenuRef, handleBulkSelectMenuKeys, handleBulkSelectClickOutside]);
+  }, [isBulkSelectOpen, bulkSelectMenuRef]);
 
   const onBulkSelectToggleClick = (ev: React.MouseEvent) => {
     ev.stopPropagation(); // Stop handleClickOutside from handling

src/app/Resources/Resources.tsx

@@ -16,8 +16,8 @@ import {
   Gallery,
   PageSection,
   Tab,
-  Tabs,
   TabTitleText,
+  Tabs,
   Text,
   TextContent,
   TextVariants,