Implement dark and light theme toggling with React context

src/client/app/components/HeaderButtonsComponent.tsx

@@ -18,6 +18,7 @@ import { selectHasRolePermissions, selectIsAdmin, selectIsLoggedIn } from '../re
 import { UserRole } from '../types/items';
 import { useTranslate } from '../redux/componentHooks';
 import LanguageSelectorComponent from './LanguageSelectorComponent';
+import ThemeSelectorComponent from './ThemeSelectorComponent';
 import TooltipMarkerComponent from './TooltipMarkerComponent';
 import LoginComponent from './LoginComponent';
 
@@ -255,6 +256,7 @@ export default function HeaderButtonsComponent() {
 						</DropdownToggle>
 						<DropdownMenu>
 							<LanguageSelectorComponent />
+							<ThemeSelectorComponent />
 							<DropdownItem
 								style={state.showOptionsStyle}
 								className='d-none d-lg-block'

src/client/app/components/ThemeSelectorComponent.tsx

@@ -0,0 +1,49 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
+// import { selectBaseHelpUrl } from '../redux/slices/adminSlice';
+import { useContext } from 'react';
+import { ThemeContext } from '../../../context/themeContext';
+
+/**
+ * A component that allows users to select which theme (light or dark mode) the page should be displayed in.
+ * @returns Theme selector component (used in the header navbar)
+ */
+export default function ThemeSelectorComponent() {
+	const {theme, toggleTheme } = useContext(ThemeContext);
+
+	// const version = useAppSelector(selectOEDVersion);
+	// const baseHelpUrl = useAppSelector(selectBaseHelpUrl);
+	// const helpUrl = baseHelpUrl + version;
+
+	return (
+		<>
+			<UncontrolledDropdown direction='start'>
+				<DropdownToggle nav caret>
+					<FormattedMessage id='theme' />
+				</DropdownToggle>
+				<DropdownMenu>
+					<DropdownItem
+						onClick={() => toggleTheme('light')}
+						disabled={theme === 'light'}>
+						Light Mode
+					</DropdownItem>
+					<DropdownItem
+						onClick={() => toggleTheme('dark')}
+						disabled={theme === 'dark'}>
+						Dark Mode
+					</DropdownItem>
+					<DropdownItem divider />
+					{/* <DropdownItem
+						href={helpUrl + '/language.html'}>
+						<FormattedMessage id="help" />
+					</DropdownItem> */}
+				</DropdownMenu>
+			</UncontrolledDropdown>
+		</>
+	);
+}

src/client/app/index.tsx

@@ -7,6 +7,7 @@ import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { store } from './store';
+import { ThemeProvider } from '../../context/themeContext';
 import RouteComponent from './components/RouteComponent';
 import { initApp } from './redux/slices/appStateSlice';
 import './styles/index.css';
@@ -18,8 +19,11 @@ const container = document.getElementById('root') as HTMLElement;
 const root = createRoot(container);
 
 root.render(
-	//  Provides the Redux store to all child components
-	< Provider store={store} stabilityCheck='always' >
-		< RouteComponent />
-	</Provider >
+	<ThemeProvider>
+		{/* Provides the Redux store to all child components */}
+		< Provider store={store} stabilityCheck='always' >
+			< RouteComponent />
+		</Provider >
+	</ThemeProvider>
+
 );

src/client/app/translations/data.ts

@@ -425,6 +425,7 @@ const LocaleTranslationData = {
 		"submit.changes": "Submit changes",
 		"submit.new.user": "Submit new user",
 		"the.unit.of.meter": "The unit of meter",
+		"theme": "Theme",
 		"this.four.weeks": "These four weeks",
 		"timezone.no": "No timezone",
 		"this.week": "This week",

src/context/themeContext.tsx

@@ -0,0 +1,47 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react';
+import { createContext, useState, useEffect } from 'react';
+
+export type ThemeContextContent = {
+    theme: string,
+    toggleTheme: Function
+}
+
+//ThemeContext is what's passed around in the application (it holds the set theme and a way to toggle the theme)
+export const ThemeContext = createContext<ThemeContextContent>({ theme : 'light', toggleTheme : () => {} });
+
+//ThemeProvider uses React's useState() to get/set the theme values (using local storage) and uses React's useEffect()
+//to watch for when the selected theme changes so that it can update the theme on the DOM.
+export const ThemeProvider = ({children} : any) => {
+    const [theme, setTheme] = useState('light');
+
+    //Runs when the app first loads to get the user's theme (if it has been set already)
+    useEffect(() => {
+        const storedTheme = localStorage.getItem('theme');
+        if (storedTheme) {
+            setTheme(storedTheme);
+        }
+    }, []);
+
+    //Runs each time the theme changes, updates the saved theme in local storage and updates the theme styling for the DOM
+    useEffect(() => {
+        localStorage.setItem('theme', theme);
+        document.documentElement.setAttribute('data-bs-theme', theme);
+    }, [theme]);
+
+    //The function made available to other components; this updates the saved theme depending on what the user has selected
+    const toggleTheme = (theme: string) => {
+        setTheme(theme);
+    }
+
+    return (
+        <div>
+            <ThemeContext.Provider value={{theme, toggleTheme}}>
+              {children}
+            </ThemeContext.Provider>
+        </div>
+    )
+}