TeleOp Mode
-
-
Collection Ability
diff --git a/greenscoutjs/src/components/matchform/auto/autocounter/Autocounter.jsx b/greenscoutjs/src/components/matchform/auto/autocounter/Autocounter.jsx
index 53ea9cf..a2620f1 100644
--- a/greenscoutjs/src/components/matchform/auto/autocounter/Autocounter.jsx
+++ b/greenscoutjs/src/components/matchform/auto/autocounter/Autocounter.jsx
@@ -3,13 +3,15 @@ import "./Autocounter.css";
function Autocounter({ nameText, value, onChange, name }) {
return (
-
+ type="number"
+ step="1"
+ >
);
}
diff --git a/greenscoutjs/src/components/matchform/teleopcycles/Cycles.jsx b/greenscoutjs/src/components/matchform/teleopcycles/Cycles.jsx
index a0384b5..33653cd 100644
--- a/greenscoutjs/src/components/matchform/teleopcycles/Cycles.jsx
+++ b/greenscoutjs/src/components/matchform/teleopcycles/Cycles.jsx
@@ -1,6 +1,22 @@
import "../Matchform.css";
import { useEffect, useRef } from "react";
+// Methods for handling cycles, in matchform.jsx
+const updateCycleAccuracy = (index, newAccuracy) => {
+ setCycleList((prevList) =>
+ prevList.map((item, i) =>
+ i === index ? { ...item, accuracy: parseInt(newAccuracy) } : item,
+ ),
+ );
+};
+
+const removeCycleEvent = (indexRemoval) => {
+ setCycleList((prevList) => [
+ ...prevList.slice(0, indexRemoval),
+ ...prevList.slice(indexRemoval + 1),
+ ]);
+};
+
const Cycles = ({
list,
runningBool,
From c9b6ba71cd6f769905daaa1926a0d0d6f8e78bca Mon Sep 17 00:00:00 2001
From: Awesome65432139 <104233315+AWESOME654321@users.noreply.github.com>
Date: Thu, 2 Apr 2026 22:11:45 -0500
Subject: [PATCH 4/4] theme switching
---
greenscoutjs/public/themes/dark.css | 34 +++++++++++++++++++
greenscoutjs/public/themes/green.css | 34 +++++++++++++++++++
greenscoutjs/public/themes/light.css | 34 +++++++++++++++++++
greenscoutjs/src/App.jsx | 28 +++++++++++++++
greenscoutjs/src/components/Settings.jsx | 4 +--
.../themes/ThemeDropdown.jsx | 29 +++++++++++++---
greenscoutjs/src/index.css | 33 ------------------
7 files changed, 157 insertions(+), 39 deletions(-)
create mode 100644 greenscoutjs/public/themes/dark.css
create mode 100644 greenscoutjs/public/themes/green.css
create mode 100644 greenscoutjs/public/themes/light.css
diff --git a/greenscoutjs/public/themes/dark.css b/greenscoutjs/public/themes/dark.css
new file mode 100644
index 0000000..8dcda3a
--- /dev/null
+++ b/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;
+}
diff --git a/greenscoutjs/public/themes/green.css b/greenscoutjs/public/themes/green.css
new file mode 100644
index 0000000..d6a7d6b
--- /dev/null
+++ b/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;
+}
diff --git a/greenscoutjs/public/themes/light.css b/greenscoutjs/public/themes/light.css
new file mode 100644
index 0000000..ebb26fc
--- /dev/null
+++ b/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;
+}
diff --git a/greenscoutjs/src/App.jsx b/greenscoutjs/src/App.jsx
index 6f114ab..3638756 100644
--- a/greenscoutjs/src/App.jsx
+++ b/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");
diff --git a/greenscoutjs/src/components/Settings.jsx b/greenscoutjs/src/components/Settings.jsx
index 770697b..8610722 100644
--- a/greenscoutjs/src/components/Settings.jsx
+++ b/greenscoutjs/src/components/Settings.jsx
@@ -26,10 +26,10 @@ function Settings() {
Settings
- {/*
+
Themes (Work In Progress)
- */}
+
Debug Info
diff --git a/greenscoutjs/src/components/settings-sub-pages/themes/ThemeDropdown.jsx b/greenscoutjs/src/components/settings-sub-pages/themes/ThemeDropdown.jsx
index e7de54b..e8f7184 100644
--- a/greenscoutjs/src/components/settings-sub-pages/themes/ThemeDropdown.jsx
+++ b/greenscoutjs/src/components/settings-sub-pages/themes/ThemeDropdown.jsx
@@ -1,12 +1,33 @@
+import { useState } from "react";
import "../../settings.css";
-function ThemeDrop({ value, onChange, name }) {
+function ThemeDrop({ name }) {
+ const [selectedTheme, setSelectedTheme] = useState(
+ localStorage.getItem("app-theme") || "Light",
+ );
+
+ const handleChange = (e) => {
+ const newTheme = e.target.value;
+
+ setSelectedTheme(newTheme);
+
+ localStorage.setItem("app-theme", newTheme);
+
+ window.dispatchEvent(new Event("storage"));
+ };
+
return (
Theme Palette
-
- Light
- Dark
+
+ Light
+ Dark
+ Green
);
diff --git a/greenscoutjs/src/index.css b/greenscoutjs/src/index.css
index 2241c84..abb84de 100644
--- a/greenscoutjs/src/index.css
+++ b/greenscoutjs/src/index.css
@@ -1,37 +1,4 @@
-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;
-
/* General Sizing Variables */
--font-size-large: 3vh;
--font-size-small: 2.5vh;