started setting up dark-theme implementation

src/components/menu.tsx

@@ -12,6 +12,8 @@ import {
   mdiLogoutVariant,
   mdiCloudUpload,
   mdiInformationOutline,
+  mdiBrightness2,
+  mdiBrightness7,
 } from '@mdi/js'
 import { logout, useJWT } from '@/jwt'
 import { createShadow } from '@/utils/create-shadow'
@@ -25,6 +27,8 @@ import IconButton from './icon-button'
 import { useSavedReports } from '@/api/report/submit-report'
 import { useSavedTeams } from '@/api/save-teams'
 import { useEventInfo } from '@/cache/event-info/use'
+import { useState } from 'preact/hooks'
+import { useTheme } from '@/utils/use-theme'
 
 const spacing = '0.3rem'
 
@@ -170,6 +174,8 @@ export const Menu = ({ onHide, visible }: Props) => {
   const isLoggedIn = jwt
   const savedReports = useSavedReports()
   const savedTeams = useSavedTeams()
+  const [darkTheme, setDarkTheme] = useState(useTheme())
+
   return (
     <Scrim visible={visible} onClickOutside={onHide}>
       <aside class={menuStyle}>
@@ -217,21 +223,36 @@ export const Menu = ({ onHide, visible }: Props) => {
             )}
             {isLoggedIn ? (
               <MenuItem icon={mdiLogoutVariant} onClick={logoutHandler}>
-                Log out
+                Log Out
               </MenuItem>
             ) : (
               <>
                 <MenuItem
                   icon={mdiLoginVariant}
                   href={`/login?from=${encodeURIComponent(location.pathname)}`}
                 >
-                  Log in
+                  Log In
                 </MenuItem>
                 <MenuItem icon={mdiAccountPlus} href="/signup">
                   Sign Up
                 </MenuItem>
               </>
             )}
+            {darkTheme ? (
+              <MenuItem
+                icon={mdiBrightness7}
+                onClick={() => setDarkTheme(true)}
+              >
+                Switch to Light Theme
+              </MenuItem>
+            ) : (
+              <MenuItem
+                icon={mdiBrightness2}
+                onClick={() => setDarkTheme(false)}
+              >
+                Switch to Dark Theme
+              </MenuItem>
+            )}
             <MenuItem icon={mdiInformationOutline} href="/about">
               About Peregrine
             </MenuItem>

src/style.css

@@ -36,11 +36,16 @@ body {
   background: #e5e5e5;
 
   @media (prefers-color-scheme: dark) {
-    background: black;
+    background: #000;
     color: #eee;
   }
 }
 
+body.dark {
+  background: #000;
+  color: #eee;
+}
+
 /* The font-loading code below is copied from https://fonts.googleapis.com/css2?family=Roboto+Condensed&family=Roboto:wght@400;500;700&display=swap */
 /* Some character ranges were removed since they aren't used in Peregrine (only the latin ranges were preserved). */
 

src/utils/use-theme.ts

@@ -0,0 +1,3 @@
+export const useTheme = (newTheme?: boolean) => {
+
+}