From 1e34d10fb53766dd20bff6bb3e6bd19e7e086e5e Mon Sep 17 00:00:00 2001
From: Rkoester47 <koestr@rpi.edu>
Date: Thu, 12 Mar 2026 16:13:27 -0400
Subject: [PATCH 1/4] Make Light/Dark mode toggle global

---
 src/App.tsx                       |  2 ++
 src/components/DarkModeToggle.tsx | 11 ++++----
 src/css/dark-mode-toggle.css      | 44 +++++++++++++++++++++++++++++++
 src/pages/Testing.tsx             |  3 ---
 4 files changed, 51 insertions(+), 9 deletions(-)
 create mode 100644 src/css/dark-mode-toggle.css

diff --git a/src/App.tsx b/src/App.tsx
index 6938df3..e84d39e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,6 +6,7 @@ import Events from './pages/Events.tsx';
 import Organizations from './pages/Organizations.tsx';
 import Testing from './pages/Testing.tsx'; // temp page
 import Profile from './pages/Profile.tsx';
+import DarkModeToggle from './components/DarkModeToggle';
 import { AuthProvider } from './contexts/AuthContext.tsx';
 
 export default function App() {
@@ -23,6 +24,7 @@ export default function App() {
                                 <Route path="/testing" element={<Testing />} />
                             </Route>
                         </Routes>
+                        <DarkModeToggle />
                     </BrowserRouter>
                 </ThemeProvider>
             </AuthProvider>
diff --git a/src/components/DarkModeToggle.tsx b/src/components/DarkModeToggle.tsx
index af19af0..5689320 100644
--- a/src/components/DarkModeToggle.tsx
+++ b/src/components/DarkModeToggle.tsx
@@ -1,14 +1,13 @@
 import { useTheme } from '../contexts/ThemeContext';
+import '../css/dark-mode-toggle.css';
 
 export default function DarkModeToggle() {
     const { theme, toggleTheme } = useTheme();
 
     return (
-        <input
-            type="checkbox"
-            checked={theme === 'dark'}
-            onChange={toggleTheme}
-            style={{ height: '20px', width: '20px' }}
-        />
+        <label className="theme-switch"> 
+            <input type="checkbox" checked={theme === 'dark'} onChange={toggleTheme} />
+            <span className="theme-slider" />
+        </label>
     );
 }
diff --git a/src/css/dark-mode-toggle.css b/src/css/dark-mode-toggle.css
new file mode 100644
index 0000000..73f919f
--- /dev/null
+++ b/src/css/dark-mode-toggle.css
@@ -0,0 +1,44 @@
+.theme-switch {
+    position: fixed;
+    bottom: 20px;
+    left: 20px;
+    z-index: 9999;
+
+    display: inline-block;
+    width: 48px;
+    height: 26px;
+}
+
+.theme-switch input {
+    display: none;
+}
+
+.theme-slider {
+    position: absolute;
+    inset: 0;
+    cursor: pointer;
+    background-color: var(--primary-dark) ;
+    border-radius: 999px;
+    transition: 0.25s;
+}
+
+.theme-slider::before {
+    content: "";
+    position: absolute;
+    height: 20px;
+    width: 20px;
+    left: 3px;
+    bottom: 3px;
+    background: white;
+    border-radius: 50%;
+    transition: 0.25s;
+    box-shadow: 0 2px 6px var(--primary-extra-dark);
+}
+
+.theme-switch input:checked + .theme-slider {
+    background-color: var(--primary-light) ;
+}
+
+.theme-switch input:checked + .theme-slider::before {
+    transform: translateX(22px);
+}
diff --git a/src/pages/Testing.tsx b/src/pages/Testing.tsx
index 630d762..b15e44a 100644
--- a/src/pages/Testing.tsx
+++ b/src/pages/Testing.tsx
@@ -1,12 +1,9 @@
-import DarkModeToggle from '../components/DarkModeToggle.tsx';
-
 export default function Testing() {
     return (
         <>
             <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', color: 'black' }}>
                 <h1>[dev] Testing</h1>
                 <p>This page is for misc features that have been developed, but not placed.</p>
-                <DarkModeToggle />
             </div>
         </>
     );

From 92d4699c9aca7c0e04b0972f09bda4b4f36dc3dd Mon Sep 17 00:00:00 2001
From: Rkoester47 <koestr@rpi.edu>
Date: Thu, 12 Mar 2026 16:27:11 -0400
Subject: [PATCH 2/4] Linter fixes

---
 src/components/DarkModeToggle.tsx | 2 +-
 src/css/dark-mode-toggle.css      | 9 ++++-----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/DarkModeToggle.tsx b/src/components/DarkModeToggle.tsx
index 5689320..d2879cd 100644
--- a/src/components/DarkModeToggle.tsx
+++ b/src/components/DarkModeToggle.tsx
@@ -5,7 +5,7 @@ export default function DarkModeToggle() {
     const { theme, toggleTheme } = useTheme();
 
     return (
-        <label className="theme-switch"> 
+        <label className="theme-switch">
             <input type="checkbox" checked={theme === 'dark'} onChange={toggleTheme} />
             <span className="theme-slider" />
         </label>
diff --git a/src/css/dark-mode-toggle.css b/src/css/dark-mode-toggle.css
index 73f919f..a95280e 100644
--- a/src/css/dark-mode-toggle.css
+++ b/src/css/dark-mode-toggle.css
@@ -3,7 +3,6 @@
     bottom: 20px;
     left: 20px;
     z-index: 9999;
-
     display: inline-block;
     width: 48px;
     height: 26px;
@@ -17,26 +16,26 @@
     position: absolute;
     inset: 0;
     cursor: pointer;
-    background-color: var(--primary-dark) ;
+    background-color: var(--primary-dark);
     border-radius: 999px;
     transition: 0.25s;
 }
 
 .theme-slider::before {
-    content: "";
+    content: '';
     position: absolute;
     height: 20px;
     width: 20px;
     left: 3px;
     bottom: 3px;
-    background: white;
+    background: var(--highlight);
     border-radius: 50%;
     transition: 0.25s;
     box-shadow: 0 2px 6px var(--primary-extra-dark);
 }
 
 .theme-switch input:checked + .theme-slider {
-    background-color: var(--primary-light) ;
+    background-color: var(--primary-light);
 }
 
 .theme-switch input:checked + .theme-slider::before {

From 0eb5d63487db25b55f8e917d1314fdfe969d5b8f Mon Sep 17 00:00:00 2001
From: Rkoester47 <184577759+Rkoester47@users.noreply.github.com>
Date: Thu, 12 Mar 2026 20:39:03 -0400
Subject: [PATCH 3/4] Moved Light Mode Toggle back into Testing

Kept stylistic changes for light mode, but put it back into Testing for now.
---
 src/App.tsx           | 2 --
 src/pages/Testing.tsx | 3 +++
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index e84d39e..6938df3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,7 +6,6 @@ import Events from './pages/Events.tsx';
 import Organizations from './pages/Organizations.tsx';
 import Testing from './pages/Testing.tsx'; // temp page
 import Profile from './pages/Profile.tsx';
-import DarkModeToggle from './components/DarkModeToggle';
 import { AuthProvider } from './contexts/AuthContext.tsx';
 
 export default function App() {
@@ -24,7 +23,6 @@ export default function App() {
                                 <Route path="/testing" element={<Testing />} />
                             </Route>
                         </Routes>
-                        <DarkModeToggle />
                     </BrowserRouter>
                 </ThemeProvider>
             </AuthProvider>
diff --git a/src/pages/Testing.tsx b/src/pages/Testing.tsx
index b15e44a..c0fc574 100644
--- a/src/pages/Testing.tsx
+++ b/src/pages/Testing.tsx
@@ -1,9 +1,12 @@
+import DarkModeToggle from "../components/DarkModeToggle";
+
 export default function Testing() {
     return (
         <>
             <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', color: 'black' }}>
                 <h1>[dev] Testing</h1>
                 <p>This page is for misc features that have been developed, but not placed.</p>
+                <DarkModeToggle/>
             </div>
         </>
     );

From c248f3d2a32a4542a6d2118a5d273fed67ea5adc Mon Sep 17 00:00:00 2001
From: Rkoester47 <184577759+Rkoester47@users.noreply.github.com>
Date: Thu, 12 Mar 2026 20:43:36 -0400
Subject: [PATCH 4/4] Prettier fixes

---
 src/pages/Testing.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Testing.tsx b/src/pages/Testing.tsx
index c0fc574..1f2966c 100644
--- a/src/pages/Testing.tsx
+++ b/src/pages/Testing.tsx
@@ -1,4 +1,4 @@
-import DarkModeToggle from "../components/DarkModeToggle";
+import DarkModeToggle from '../components/DarkModeToggle';
 
 export default function Testing() {
     return (
@@ -6,7 +6,7 @@ export default function Testing() {
             <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', color: 'black' }}>
                 <h1>[dev] Testing</h1>
                 <p>This page is for misc features that have been developed, but not placed.</p>
-                <DarkModeToggle/>
+                <DarkModeToggle />
             </div>
         </>
     );