Dark mode toggle in settings

.gitignore

@@ -1 +1,2 @@
 /graphics
+.DS_Store

crabfit-frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import { useState, Suspense, lazy } from 'react';
+import { useState, useEffect, Suspense, lazy } from 'react';
 import {
 	BrowserRouter,
   Switch,
@@ -8,16 +8,22 @@ import { ThemeProvider, Global } from '@emotion/react';
 
 import { Settings, Loading } from 'components';
 
+import { useSettingsStore } from 'stores';
 import theme from 'theme';
 
 const Home = lazy(() => import('pages/Home/Home'));
 const Event = lazy(() => import('pages/Event/Event'));
 
 const App = () => {
+  const colortheme = useSettingsStore(state => state.theme);
 	const darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
 	const [isDark, setIsDark] = useState(darkQuery.matches);
 
-	darkQuery.addListener(e => setIsDark(e.matches));
+	darkQuery.addListener(e => colortheme === 'System' && setIsDark(e.matches));
+
+  useEffect(() => {
+    setIsDark(colortheme === 'System' ? darkQuery.matches : colortheme === 'Dark');
+  }, [colortheme]);
 
   return (
 		<BrowserRouter>

crabfit-frontend/src/components/Settings/Settings.tsx

@@ -49,6 +49,15 @@ const Settings = () => {
           value={store.timeFormat}
           onChange={value => store.setTimeFormat(value)}
         />
+
+        <ToggleField
+          label="Theme"
+          name="theme"
+          id="theme"
+          options={['System', 'Light', 'Dark']}
+          value={store.theme}
+          onChange={value => store.setTheme(value)}
+        />
       </Modal>
     </>
   );

crabfit-frontend/src/components/Settings/settingsStyle.ts

@@ -50,7 +50,9 @@ export const Modal = styled.div`
   top: 70px;
   right: 12px;
   background-color: ${props => props.theme.background};
-  border: 1px solid ${props => props.theme.primaryBackground};
+  ${props => props.theme.mode === 'dark' && `
+    border: 1px solid ${props.theme.primaryBackground};
+  `}
   z-index: 150;
   padding: 10px 18px;
   border-radius: 3px;

crabfit-frontend/src/stores/index.ts

@@ -5,9 +5,11 @@ export const useSettingsStore = create(persist(
   set => ({
     weekStart: 0,
     timeFormat: '12h',
+    theme: 'System',
 
     setWeekStart: weekStart => set({ weekStart }),
     setTimeFormat: timeFormat => set({ timeFormat }),
+    setTheme: theme => set({ theme }),
   }),
   { name: 'crabfit-settings' },
 ));