Add dark mode & refactor styling

site/package.json

@@ -28,7 +28,6 @@
     "react-transition-group": "^4.4.1",
     "react-twemoji": "^0.5.0",
     "semantic-ui-react": "^2.1.4",
-    "styled-components": "^5.3.11",
     "typescript": "^4.3.5",
     "websoc-fuzzy-search": "^0.8.0-rc.1"
   },

site/src/App.scss

@@ -1,3 +1,8 @@
+body {
+    color: var(--text);
+    background: var(--background);
+}
+
 .app-body {
     display: flex;
     height: 92vh;
@@ -14,6 +19,6 @@
     height: 100%;
     overflow-y: auto;
     overflow-x: hidden;
-    background-color: var(--peterportal-gray-blue);
+    background-color: var(--background);
     box-sizing: border-box;
 }

site/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import {
   BrowserRouter as Router,
@@ -7,6 +7,7 @@ import {
 } from 'react-router-dom';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'react-bootstrap-range-slider/dist/react-bootstrap-range-slider.css';
+import './style/theme.scss';
 import './App.scss';
 import { Fade } from 'react-bootstrap';
 
@@ -24,26 +25,29 @@ import SideBar from './component/SideBar/SideBar';
 import { useAppSelector } from './store/hooks';
 import { darkTheme, lightTheme } from './style/theme';
 import { ThemeProvider } from 'styled-components';
-import GlobalStyle from './style/globalStyle';
+import ThemeContext from './style/theme-context';
 
 export default function App() {
   const [darkMode, setDarkMode] = useState(localStorage.getItem('darkMode') === 'true' ? true : (localStorage.getItem('darkMode') === 'false' ? false : (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)));
   const sidebarOpen = useAppSelector(state => state.ui.sidebarOpen);
   const [isShown, setIsShown] = useState(false);
 
+  useEffect(() => {
+    localStorage.setItem('darkMode', darkMode ? 'true' : 'false');
+    document.querySelector('body')!.setAttribute('data-theme', darkMode ? 'dark' : 'light');
+  }, [darkMode])
+
   const toggleTheme = () => {
-    localStorage.setItem('darkMode', darkMode ? 'false' : 'true');
     setDarkMode(!darkMode);
   }
 
   return (
     <Router basename={process.env.PUBLIC_URL}>
-      <ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
-        <GlobalStyle />
-        <AppHeader />
+      <ThemeContext.Provider value={{ darkMode: darkMode, toggleTheme: toggleTheme }} >
+        <AppHeader/>
         <div className='app-body'>
           <div className='app-sidebar'>
-            <SideBar darkMode={darkMode} toggleTheme={toggleTheme} />
+            <SideBar/>
           </div>
           <div className='app-content'>
             <Switch>
@@ -67,7 +71,7 @@ export default function App() {
             <Footer />
           </div>
         </div>
-      </ThemeProvider>
+      </ThemeContext.Provider>
     </Router>
   )
 }