Feature: webui color schemes (#295)

* WIP

* DarkMode is a Component not Service

* Give the theme button a right margin

* Use Dropdown from `react-bootstrap` and dynamically create dropdown items

* Rename to ColorScheme

* move colorScheme to AppContext

* Stop setting localStorage here

* Simplify setTheme logic and ensure data-bs-theme is 'light' not 'auto' when light system scheme

* Remove unused imports

* More contrast for the navbar

www/package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "@hello-pangea/color-picker": "^3.2.2",
     "axios": "^1.3.5",
-    "bootstrap": "^5.2.3",
+    "bootstrap": "^5.3.0-alpha3",
     "bootstrap-icons": "^1.10.5",
     "crypto-js": "^4.1.1",
     "formik": "^2.2.9",

www/src/Components/ColorScheme.js

@@ -0,0 +1,54 @@
+import React, { useContext } from 'react';
+import { Dropdown } from 'react-bootstrap';
+import { AppContext } from '../Contexts/AppContext';
+
+
+const dropdownOptions = [
+	{ scheme: 'light', icon: 'bi-sun-fill', label: 'Light' },
+	{ scheme: 'dark', icon: 'bi-moon-stars-fill', label: 'Dark' },
+	{ scheme: 'auto', icon: 'bi-circle-half', label: 'Auto' },
+];
+
+const setTheme = function (theme) {
+	const rootElement = document.documentElement;
+	const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+	if (theme === 'auto') {
+		rootElement.setAttribute('data-bs-theme', prefersDarkMode ? 'dark' : 'light');
+	} else {
+		rootElement.setAttribute('data-bs-theme', theme);
+	}
+}
+
+const ColorScheme = () => {
+	const { savedColorScheme, setSavedColorScheme } = useContext(AppContext);
+
+	setTheme(savedColorScheme);
+
+	const setThemeAndState = (newColorScheme) => {
+		setTheme(newColorScheme);
+		setSavedColorScheme(newColorScheme);
+	}
+
+	return (
+		<Dropdown>
+			<Dropdown.Toggle variant="secondary" style={{ marginRight: "7px" }}>
+				<i class="bi-moon-stars-fill"></i>
+			</Dropdown.Toggle>
+
+			<Dropdown.Menu>
+				{dropdownOptions.map((option) => (
+					<Dropdown.Item
+						key={option.theme}
+						className={`dropdown-item ${savedColorScheme === option.scheme ? 'active' : ''}`}
+						onClick={() => setThemeAndState(option.scheme)}
+					>
+						<i className={option.icon}></i> {option.label}
+					</Dropdown.Item>
+				))}
+			</Dropdown.Menu>
+		</Dropdown>
+	);
+};
+
+export default ColorScheme;

www/src/Components/Navigation.js

@@ -7,6 +7,7 @@ import { saveButtonLabels } from '../Services/Storage';
 import { BUTTONS } from '../Data/Buttons';
 import './Navigation.scss';
 import WebApi from '../Services/WebApi';
+import ColorScheme from './ColorScheme';
 
 const BOOT_MODES = {
 	GAMEPAD: 0,
@@ -35,7 +36,7 @@ const Navigation = (props) => {
 	};
 
 	return (
-		<Navbar collapseOnSelect bg="dark" variant="dark" expand="md" fixed="top">
+		<Navbar collapseOnSelect bg="primary" variant="dark" expand="md" fixed="top">
 			<Navbar.Brand href="/">
 				<img src="images/logo.png" className="title-logo" alt="logo" />{' '}GP2040
 			</Navbar.Brand>
@@ -68,6 +69,7 @@ const Navigation = (props) => {
 					</Dropdown>
 				</Nav>
 				<Nav>
+					<ColorScheme />
 					<Button style={{ marginRight: "7px" }} variant="success" onClick={handleShow}>
 						Reboot
 					</Button>

www/src/Contexts/AppContext.js

@@ -67,7 +67,7 @@ export const AppContextProvider = ({ children, ...props }) => {
 		console.log('buttonLabelType is', newType)
 		newType && localStorage.setItem('buttonLabelType', newType);
 		newSwap !== undefined && localStorage.setItem('swapTpShareLabels', newSwap);
-		_setButtonLabels(({ buttonLabelType, swapTpShareLabels }) => 
+		_setButtonLabels(({ buttonLabelType, swapTpShareLabels }) =>
 			({ buttonLabelType: newType || buttonLabelType,
 			   swapTpShareLabels: (newSwap !== undefined) ? newSwap : swapTpShareLabels }));
 	};
@@ -146,6 +146,12 @@ export const AppContextProvider = ({ children, ...props }) => {
 
 	console.log('usedPins:', usedPins);
 
+	const [savedColorScheme, _setSavedColorScheme] = useState(localStorage.getItem('savedColorScheme') || 'auto');
+	const setSavedColorScheme = (savedColorScheme) => {
+		localStorage.setItem('savedColorScheme', savedColorScheme);
+		_setSavedColorScheme(savedColorScheme);
+	};
+
 	return (
 		<AppContext.Provider
 			{...props}
@@ -165,6 +171,8 @@ export const AppContextProvider = ({ children, ...props }) => {
 				setSavedColors,
 				setUsedPins,
 				updateUsedPins,
+				savedColorScheme,
+				setSavedColorScheme,
 			}}
 		>
 			{children}

www/src/index.scss

@@ -1,9 +1,13 @@
 // Override default variables before the import
-$body-bg: #e9ecef;
 $primary: #495057;
 $danger: #7b2d26;
 
 @import '~bootstrap/scss/bootstrap';
+@import '~bootstrap-icons/font/bootstrap-icons';
+
+:root {
+	--bs-primary-rgb: 20, 23, 30;
+}
 
 * {
 	font-size: 16px;