CAPY-RPI · JManion32 · Feb 15, 2026 · Feb 15, 2026
diff --git a/index.html b/index.html
@@ -1,6 +1,12 @@
 <!doctype html>
 <html lang="en">
     <head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Asap:ital,wght@0,100..900;1,100..900&display=swap"
+            rel="stylesheet"
+        />
         <meta charset="UTF-8" />
         <link rel="icon" type="image/svg+xml" href="/vite.svg" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,5 @@
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { ThemeProvider } from './contexts/ThemeContext';
 import AppLayout from './components/AppLayout.tsx';
 import Home from './pages/Home.tsx';
 import Register from './pages/Register.tsx';
@@ -13,21 +14,23 @@ import Settings from './pages/Settings.tsx';
 function App() {
     return (
         <>
-            <BrowserRouter>
-                <Routes>
-                    <Route path="/" element={<Home />} />
-                    <Route path="/register" element={<Register />} />
-                    <Route element={<AppLayout />}>
-                        <Route path="/dashboard" element={<Dashboard />} />
-                        <Route path="/events" element={<Events />} />
-                        <Route path="/calendar" element={<Calendar />} />
-                        <Route path="/roster" element={<Roster />} />
-                        <Route path="/notifications" element={<Notifications />} />
-                        <Route path="/profile" element={<Profile />} />
-                        <Route path="/settings" element={<Settings />} />
-                    </Route>
-                </Routes>
-            </BrowserRouter>
+            <ThemeProvider>
+                <BrowserRouter>
+                    <Routes>
+                        <Route path="/" element={<Home />} />
+                        <Route path="/register" element={<Register />} />
+                        <Route element={<AppLayout />}>
+                            <Route path="/dashboard" element={<Dashboard />} />
+                            <Route path="/events" element={<Events />} />
+                            <Route path="/calendar" element={<Calendar />} />
+                            <Route path="/roster" element={<Roster />} />
+                            <Route path="/notifications" element={<Notifications />} />
+                            <Route path="/profile" element={<Profile />} />
+                            <Route path="/settings" element={<Settings />} />
+                        </Route>
+                    </Routes>
+                </BrowserRouter>
+            </ThemeProvider>
         </>
     );
 }

diff --git a/src/components/.gitkeep b/src/components/.gitkeep
diff --git a/src/components/DarkModeToggle.tsx b/src/components/DarkModeToggle.tsx
@@ -0,0 +1,14 @@
+import { useTheme } from '../contexts/ThemeContext';
+
+export function DarkModeToggle() {
+    const { theme, toggleTheme } = useTheme();
+
+    return (
+        <input
+            type="checkbox"
+            checked={theme === 'dark'}
+            onChange={toggleTheme}
+            style={{ height: '20px', width: '20px' }}
+        />
+    );
+}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,8 +1,10 @@
 import '../css/header.css';
 import { useNavigate } from 'react-router-dom';
+import { DarkModeToggle } from './DarkModeToggle.tsx';
 
 export default function Header() {
     const navigate = useNavigate();
+
     return (
         <div className="header-container">
             <h1 className="header-title">CAPY Web UI</h1>
@@ -13,6 +15,7 @@ export default function Header() {
                 <a className="register-btn" onClick={() => navigate('/register')}>
                     Register
                 </a>
+                <DarkModeToggle />
             </div>
         </div>
     );

diff --git a/src/contexts/ThemeContext.tsx b/src/contexts/ThemeContext.tsx
@@ -0,0 +1,47 @@
+/* eslint-disable react-refresh/only-export-components */
+
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+type Theme = 'light' | 'dark';
+
+interface ThemeContextType {
+    theme: Theme;
+    toggleTheme: () => void;
+    setTheme: (theme: Theme) => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+    const [theme, setThemeState] = useState<Theme>(() => {
+        const saved = localStorage.getItem('site_mode');
+        return (saved as Theme) || 'light';
+    });
+
+    const setTheme = (newTheme: Theme) => {
+        setThemeState(newTheme);
+    };
+
+    const toggleTheme = () => {
+        setThemeState((prev) => (prev === 'dark' ? 'light' : 'dark'));
+    };
+
+    useEffect(() => {
+        document.documentElement.setAttribute('data-theme', theme);
+        localStorage.setItem('site_mode', theme);
+    }, [theme]);
+
+    return (
+        <ThemeContext.Provider value={{ theme, toggleTheme, setTheme }}>
+            {children}
+        </ThemeContext.Provider>
+    );
+};
+
+export const useTheme = (): ThemeContextType => {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error('useTheme must be used within a ThemeProvider');
+    }
+    return context;
+};
diff --git a/src/css/colors.css b/src/css/colors.css
@@ -1,13 +1,66 @@
-/* All of the Web UI's color variables in one place */
+/* colors.css: All of the Web UI's color variables in one place */
+
+/*
+
+PURPOSE: Consistent, easily modifiable color variables 
+abstracted to a single file.
+
+HOW TO USE: All variables in the CAPY COLOR SUITE should be treated 
+as constants. These constants should NOT be found in other CSS files. 
+Instead, create variables in the COLOR VARIABLES section, and use those. 
+COLOR VARIABLES should be duplicated and properly adjusted in the dark 
+mode section as well.
+
+*/
 
 :root {
+    /* GLOBAL STYLES ============================ */
     --site-transition: 0.25s;
-    --site-bg: #f5f5f5;
-    --header-bg: #fff;
-    --sidebar-bg: #fff;
-    --sidebar-link-hover-bg: #f4f4f4;
-    --sidebar-active-link-bg: #e4e4e4;
-    --standard-white: #fff;
-    --standard-black: #000;
-    --standard-text: #1c1c1c;
+    --site-font: 'Asap', sans-serif;
+
+    /* ========================================== */
+
+    /* CAPY COLOR SUITE ========================= */
+
+    /* All colors used on the site are found here */
+    --primary-light: #339b92;
+    --primary: #007a75;
+    --primary-dark: #00464d;
+    --primary-extra-dark: #002633;
+    --accent: #f1602f;
+    --off-white: #f9fafa;
+    --highlight: #f4f8f6;
+    --off-black: #20201f;
+
+    /* ========================================== */
+
+    /* COLOR VARIABLES ========================== */
+
+    /* Global Styles: backgrounds, text */
+    --site-bg: var(--off-white);
+    --standard-white: var(--off-white);
+    --standard-black: var(--off-black);
+    --standard-text: var(--primary);
+
+    /* Sidebar / Header */
+    --header-bg: var(--highlight);
+    --sidebar-bg: var(--highlight);
+    --sidebar-link-hover-bg: var(--off-white);
+    --sidebar-active-link-bg: var(--primary-light);
+}
+
+[data-theme='dark'] {
+    /* COLOR VARIABLES ========================== */
+
+    /* Global Styles: backgrounds, text */
+    --site-bg: var(--off-black);
+    --standard-white: var(--off-black);
+    --standard-black: var(--off-white);
+    --standard-text: var(--primary);
+
+    /* Sidebar / Header */
+    --header-bg: var(--primary-extra-dark);
+    --sidebar-bg: var(--primary-extra-dark);
+    --sidebar-link-hover-bg: var(--accent);
+    --sidebar-active-link-bg: var(--accent);
 }
diff --git a/src/css/header.css b/src/css/header.css
@@ -15,19 +15,20 @@
 .header-title {
     margin: 0;
     flex-grow: 1;
+    font-weight: 500;
 }
 
 .header-right-btns {
     display: flex;
     flex-direction: row;
     gap: 1.75rem;
+    align-items: center;
 }
 
 .profile-btn,
 .register-btn {
     cursor: pointer;
     font-size: 1.25rem;
-    font-weight: bold;
     padding: 0.35rem 1rem;
     border-radius: 0.7rem;
     display: flex;

diff --git a/src/css/index.css b/src/css/index.css
@@ -4,7 +4,7 @@
 
 /* ================================================= */
 :root {
-    font-family: Helvetica, Arial, sans-serif;
+    font-family: var(--site-font);
     line-height: 1.5;
     font-weight: 400;
     color-scheme: light dark;
@@ -32,6 +32,7 @@ body {
 
 h1 {
     color: var(--standard-text);
+    font-weight: 500;
 }
 
 /* ================================================= */

diff --git a/src/css/sidebar.css b/src/css/sidebar.css
@@ -90,7 +90,6 @@
 
 .sidebar-link-label {
     font-size: 1rem;
-    font-weight: bold;
     max-width: 200px;
     overflow: hidden;
     white-space: nowrap;

diff --git a/src/hooks/.gitkeep b/src/hooks/.gitkeep