diff --git a/index.html b/index.html index 9df7649..8830a1b 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,12 @@ + + + diff --git a/src/App.tsx b/src/App.tsx index 1226399..8183866 100644 --- 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 ( <> - - - } /> - } /> - }> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - - - + + + + } /> + } /> + }> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + + + ); } diff --git a/src/components/.gitkeep b/src/components/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/DarkModeToggle.tsx b/src/components/DarkModeToggle.tsx new file mode 100644 index 0000000..fb64f7b --- /dev/null +++ b/src/components/DarkModeToggle.tsx @@ -0,0 +1,14 @@ +import { useTheme } from '../contexts/ThemeContext'; + +export function DarkModeToggle() { + const { theme, toggleTheme } = useTheme(); + + return ( + + ); +} diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 7977a8d..9114a1a 100644 --- 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 (

CAPY Web UI

@@ -13,6 +15,7 @@ export default function Header() { navigate('/register')}> Register +
); diff --git a/src/contexts/ThemeContext.tsx b/src/contexts/ThemeContext.tsx new file mode 100644 index 0000000..5ae81ff --- /dev/null +++ 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(undefined); + +export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { + const [theme, setThemeState] = useState(() => { + 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 ( + + {children} + + ); +}; + +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 index 2c29ab2..db80eeb 100644 --- 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 index 2e49e63..2bd68a4 100644 --- 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 index 201f918..fa92217 100644 --- 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 index c116325..6ed559c 100644 --- 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 deleted file mode 100644 index e69de29..0000000