Updated bootstrap to 5.2.3.

Removed bootstrap-dark from dependencies.
The current theme is now synchronized with the react select component.

package.json

@@ -6,7 +6,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "bootstrap-dark-5": "^1.1.3",
+    "bootstrap": "^5.2.3",
     "http-proxy-middleware": "^2.0.6",
     "moment": "^2.29.3",
     "react": "^18.2.0",

src/App.jsx

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import 'bootstrap-dark-5/dist/css/bootstrap-nightshade.min.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
 import { React, Component } from 'react';
 import { Navbar, Nav, Container} from 'react-bootstrap';
 import { BrowserRouter as Router, NavLink, Redirect, Route, Switch } from 'react-router-dom';

src/ThemeSelector.tsx

@@ -4,24 +4,30 @@ import { Theme, UIPreferencesContext } from './contexts/UIPreferencesContext';
 
 export function ThemeSelector() {
     const { theme, setTheme } = useContext(UIPreferencesContext);
-
+
+    //Contains all supported themes
     const themes = [
         { value: 'light-theme', label: 'light' },
         { value: 'dark-theme', label: 'dark' },
         { value: 'pastel-theme', label: 'pastel' },
         { value: 'ocean-theme', label: 'ocean' }
     ]
 
+    //Finds the current selected theme within supported themes
+    const currentTheme = themes.find(o => o.value === theme);
     updateTheme(theme)
 
+    /**
+     * Handles the theme selection by the user
+     * @param event 
+     */
     const handleTheme = (event: any) => {
         var selectedTheme = event.value;
-        // keep html class in sync with button state.
         updateTheme(selectedTheme)
         setTheme(selectedTheme)
       };
-
-    return <Select options={themes} classNamePrefix="select" onChange={handleTheme} 
+    
+    return <Select options={themes} value={currentTheme} classNamePrefix="select" onChange={handleTheme} 
     components={{
         SingleValue: ({ children, ...props }) => {
           return (
@@ -32,6 +38,10 @@ export function ThemeSelector() {
         }}}/>
 }
 
+/**
+ * Keeps the html in sync with the current selected theme
+ * @param theme 
+ */
 function updateTheme(theme: Theme) {
     var doc = document.querySelector("html")!;
     doc.className = theme

src/contexts/UIPreferencesContext.tsx

@@ -26,9 +26,12 @@ export interface UIPreferenceProviderProps {
     initalValue: UIPreferences | undefined
 }
 
+/**
+ * Returns a default theme based on the user's browser settings.
+ * @returns Theme
+ */
 function getDefaultTheme(): Theme {
     if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
-        // browser supports light/dark mode and user prefers dark theme.
         return "dark-theme";
     }