Theme switching

greenscoutjs/public/themes/dark.css

@@ -0,0 +1,34 @@
+html {
+  scrollbar-color: var(--font-color-prompt-title) var(--background-color);
+}
+
+:root {
+  /* Color Variables */
+  --background-color: #3c3c3c;
+  --accent-color: #9bcbfb;
+  --accent-color2: #8fbdeb;
+  --accent-color3: #cee5ff;
+
+  --matchform-sectionbox-background-color: rgba(0, 0, 0, 0.1);
+
+  --blue-color: #9bcbfb;
+  --error-color: var(--disabled-color);
+  --disabled-color: #717172;
+
+  --font-color: black;
+  --font-color-prompt-title: white;
+  --font-color-header: white;
+
+  --drop-shadow-color: #626263;
+  --sidenav-hover-color: var(--accent-color);
+  --faded-text-color: #5f6167;
+
+  --kelly-green: #4cbb17;
+  --error-message-color: var(--disabled-color);
+  --check-background-color: #4cbb17;
+  --checkbox-default-color: #eee;
+  --checkbox-hover-color: #ccc;
+  --border-color-faded: #d9d9db;
+  --border-color-active: #417096;
+  --sidenav-button-color: #dfdfdf;
+}

greenscoutjs/public/themes/green.css

@@ -0,0 +1,34 @@
+html {
+  scrollbar-color: var(--font-color-prompt-title) var(--background-color);
+}
+
+:root {
+  /* Color Variables */
+  --background-color: #3c3c3c;
+  --accent-color: linear-gradient(0deg, #3aea3a 0%, #59eb5a 100%);
+  --accent-color2: linear-gradient(0deg, #3aea3a 0%, #59eb5a 100%);
+  --accent-color3: linear-gradient(0deg, #3db43d 0%, #43c343 100%);
+
+  --matchform-sectionbox-background-color: rgba(0, 0, 0, 0.1);
+
+  --blue-color: #9bcbfb;
+  --error-color: var(--disabled-color);
+  --disabled-color: #717172;
+
+  --font-color: black;
+  --font-color-prompt-title: white;
+  --font-color-header: white;
+
+  --drop-shadow-color: #626263;
+  --sidenav-hover-color: linear-gradient(0deg, #3aea3a 0%, #59eb5a 100%);
+  --faded-text-color: #5f6167;
+
+  --kelly-green: #4cbb17;
+  --error-message-color: var(--disabled-color);
+  --check-background-color: #4cbb17;
+  --checkbox-default-color: #eee;
+  --checkbox-hover-color: #ccc;
+  --border-color-faded: #d9d9db;
+  --border-color-active: #4cbb17;
+  --sidenav-button-color: #dfdfdf;
+}

greenscoutjs/public/themes/light.css

@@ -0,0 +1,34 @@
+html {
+  scrollbar-color: var(--font-color-prompt-title) var(--background-color);
+}
+
+:root {
+  /* Color Variables */
+  --background-color: white;
+  --accent-color: #9bcbfb;
+  --accent-color2: #8fbdeb;
+  --accent-color3: #cee5ff;
+
+  --matchform-sectionbox-background-color: rgba(0, 0, 0, 0.1);
+
+  --blue-color: #9bcbfb;
+  --error-color: var(--disabled-color);
+  --disabled-color: #717172;
+
+  --font-color: black;
+  --font-color-prompt-title: black;
+  --font-color-header: black;
+
+  --drop-shadow-color: #626263;
+  --sidenav-hover-color: var(--accent-color);
+  --faded-text-color: #5f6167;
+
+  --kelly-green: #4cbb17;
+  --error-message-color: var(--disabled-color);
+  --check-background-color: #4cbb17;
+  --checkbox-default-color: #eee;
+  --checkbox-hover-color: #ccc;
+  --border-color-faded: #d9d9db;
+  --border-color-active: #417096;
+  --sidenav-button-color: #dfdfdf;
+}

greenscoutjs/src/App.jsx

@@ -19,6 +19,34 @@ import SettingsThemes from "./components/settings-sub-pages/themes/SettingsTheme
 import { useState, useEffect } from "react";
 
 function App() {
+  useEffect(() => {
+    const updateStylesheet = () => {
+      const rawTheme = localStorage.getItem("app-theme") || "light";
+      const savedTheme = rawTheme.toLowerCase();
+
+      let link = document.getElementById("dynamic-theme-link");
+      if (!link) {
+        link = document.createElement("link");
+        link.id = "dynamic-theme-link";
+        link.rel = "stylesheet";
+        document.head.appendChild(link);
+      }
+
+      const base = import.meta.env.BASE_URL.endsWith("/")
+        ? import.meta.env.BASE_URL
+        : `${import.meta.env.BASE_URL}/`;
+
+      const newHref = `${base}themes/${savedTheme}.css`;
+
+      console.log("Loading CSS from:", newHref);
+      link.href = newHref;
+    };
+
+    updateStylesheet();
+    window.addEventListener("storage", updateStylesheet);
+    return () => window.removeEventListener("storage", updateStylesheet);
+  }, []);
+
   const getIpAddress = async () => {
     try {
       const response = await fetch("https://api.ipify.org?format=json");

greenscoutjs/src/components/NavComponent.css

@@ -19,7 +19,7 @@ body {
   padding: 0;
   height: var(--navbar-height);
   width: 100%;
-  background-color: var(--accent-color);
+  background: var(--sidenav-hover-color);
   z-index: 999999;
 }
 
@@ -36,7 +36,7 @@ body {
   margin-left: calc(0.1 * var(--navbar-height));
   height: calc(0.5 * var(--navbar-height));
   width: calc(0.5 * var(--navbar-height));
-  background-color: var(--font-color);
+  background: var(--font-color);
   -webkit-mask-image: url("../assets/bars-solid-full.svg");
   mask-image: url("../assets/bars-solid-full.svg");
   mask-repeat: no-repeat;
@@ -57,7 +57,7 @@ body {
   margin-left: calc(0.1 * var(--navbar-height));
   height: calc(0.5 * var(--navbar-height));
   width: calc(0.5 * var(--navbar-height));
-  background-color: var(--font-color);
+  background: var(--font-color);
   -webkit-mask-image: url("../assets/arrow-left-solid-full.svg");
   mask-image: url("../assets/arrow-left-solid-full.svg");
   mask-repeat: no-repeat;
@@ -150,9 +150,13 @@ body {
   text-decoration: none;
 }
 
+.side-nav button {
+  background: var(--accent-color);
+}
+
 .side-nav button:hover {
-  background-color: var(--sidenav-hover-color);
-  color: var(--background-color);
+  background: var(--sidenav-hover-color);
+  /* color: var(--background-color); */
   cursor: pointer;
 }
 
@@ -172,8 +176,12 @@ body {
   left: var(--sidenav-width);
 }
 
+#nav-toggle:checked ~ .hamburger {
+  background: var(--accent-color);
+}
+
 .textp {
-  background-color: var(--sidenav-button-color);
+  background: var(--sidenav-button-color);
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
   color: var(--font-color);

greenscoutjs/src/components/Settings.jsx

@@ -26,10 +26,10 @@ function Settings() {
       <NavComponent />
       <div id="settingsContainer">
         <h1 className="settingsh1">Settings</h1>
-        {/* <button className="settingButton" onClick={navTheme}>
+        <button className="settingButton" onClick={navTheme}>
           <div className="image themeImage"></div>
           Themes (Work In Progress)
-        </button> */}
+        </button>
         <button className="settingButton" onClick={navDebug}>
           <div className="image debugImage"></div>
           Debug Info

greenscoutjs/src/components/homepage/Home.css

@@ -5,7 +5,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  background-color: var(--background-color);
+  background: var(--background-color);
 }
 
 #homeBody > * {
@@ -52,7 +52,7 @@
   outline: none;
   width: var(--refresh-button-size);
   height: var(--refresh-button-size);
-  background-color: var(--font-color-prompt-title);
+  background: var(--font-color-prompt-title);
   -webkit-mask-image: url("../../assets/reload.svg");
   mask-image: url("../../assets/reload.svg");
   mask-repeat: no-repeat;
@@ -66,13 +66,13 @@
 }
 
 #refreshButton:hover {
-  background-color: var(--accent-color);
+  background: var(--accent-color);
 }
 
 #newmatchbutton {
   width: var(--new-matchpit-button-width);
   height: var(--new-matchpit-button-height);
-  background-color: var(--accent-color);
+  background: var(--accent-color);
   border: 1px solid var(--accent-color);
   border-radius: var(--border-radius);
   box-shadow: 0px 4px 5px var(--drop-shadow-color);
@@ -87,13 +87,13 @@
 }
 
 #newmatchbutton:hover {
-  background-color: var(--accent-color2);
+  background: var(--accent-color2);
 }
 
 #newmatchbuttonimg {
   width: 100%;
   height: 40%;
-  background-color: var(--font-color);
+  background: var(--font-color);
   -webkit-mask-image: url("../../assets/pencil.svg");
   mask-image: url("../../assets/pencil.svg");
   mask-repeat: no-repeat;
@@ -107,7 +107,7 @@
 #newpitbutton {
   width: var(--new-matchpit-button-width);
   height: var(--new-matchpit-button-height);
-  background-color: var(--accent-color3);
+  background: var(--accent-color3);
   border: 1px solid var(--accent-color3);
   border-radius: var(--border-radius);
   box-shadow: 0px 4px 5px var(--drop-shadow-color);
@@ -126,5 +126,5 @@
 }
 
 #newpitbutton:hover {
-  background-color: var(--accent-color2);
+  background: var(--accent-color2);
 }

greenscoutjs/src/components/homepage/NewButtonMatch.jsx

@@ -1,5 +1,5 @@
 import "./Home.css";
-import { Navigate, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 function NewButtonMatch() {
   const navigate = useNavigate();

greenscoutjs/src/components/leaderboard/leaderBoard.css

@@ -60,7 +60,7 @@
   overflow: hidden;
   gap: 8%;
   padding: 2.5% 2.5%;
-  background-color: var(--background-color);
+  background: var(--background-color);
   border: 0.15vh solid var(--accent-color);
   border-radius: var(--border-radius);
   min-height: var(--leader-board-element-height);

greenscoutjs/src/components/loginpage/Login.css

@@ -3,7 +3,7 @@
   width: var(--page-width);
   height: var(--page-height);
   margin: 0;
-  background-color: var(--background-color);
+  background: var(--background-color);
 }
 
 #parent {
@@ -64,7 +64,7 @@
   width: var(--login-box-padding-left);
   height: var(--login-box-padding-left);
   flex-shrink: 0;
-  background-color: var(--font-color-prompt-title);
+  background: var(--font-color-prompt-title);
   mask-repeat: no-repeat;
   -webkit-mask-repeat: no-repeat;
   mask-position: center;
@@ -99,7 +99,7 @@
   font-weight: var(--font-weight);
   font-size: var(--font-size-large);
   border: none;
-  background-color: transparent;
+  background: transparent;
 }
 
 #user:focus,
@@ -125,7 +125,7 @@
   height: var(--login-button-height);
   margin-top: 5.7vh;
   margin-bottom: 4.4vh;
-  background-color: var(--accent-color3);
+  background: var(--accent-color3);
   border: 1px solid var(--accent-color3);
   border-radius: var(--border-radius);
   box-shadow: 0px 4px 5px var(--drop-shadow-color);
@@ -138,7 +138,7 @@
 }
 
 #loginButton:hover {
-  background-color: var(--accent-color2);
+  background: var(--accent-color2);
 }
 
 #loginButton:disabled {