Add options for dark mode

src/components/App.scss

@@ -15,6 +15,19 @@ code {
     monospace;
 }
 
+
+:root {
+	--primary-color: #{$gray-100};
+	--font-color: #{$black};
+	--bg-color: #{$white};
+}
+
+[data-theme="dark"] {
+	--primary-color: #{$gray-900};
+	--font-color: #{$white};
+	--bg-color: #{$black};
+}
+
 .btn-primary.focus,
 .btn-primary:focus {
   color: #000;
@@ -25,8 +38,8 @@ code {
 
 .btn-primary {
   margin-bottom: 0.625rem;
-  color: #000;
-  background: #f6f8fa;
+  color: var(--font-color);
+  background: var(--primary-color);
   font-size: 1.05rem;
   letter-spacing: 0;
   border-width: 0rem;

src/components/App.tsx

@@ -6,7 +6,7 @@ import {
   faBookOpen,
   faHome,
   faCalendarWeek,
-  faChalkboardTeacher
+  faChalkboardTeacher,
 } from "@fortawesome/free-solid-svg-icons";
 import StandardView from "./pages/StandardView";
 import { Switch, Route } from "react-router-dom";
@@ -28,14 +28,19 @@ class App extends React.Component<{}, AppState> {
       toggledLeft: false,
       toggledRight: false,
       showSettings: false,
-      fileView: localStorage.getItem("fileView") || "card"
+      fileView: localStorage.getItem("fileView") || "card",
     };
   }
 
   componentDidMount() {
-    document.documentElement.style.fontSize = `${localStorage.getItem(
-      "interfaceSize"
-    ) || "90"}%`;
+    document.documentElement.style.fontSize = `${
+      localStorage.getItem("interfaceSize") || "90"
+    }%`;
+
+    const currentTheme = localStorage.getItem("theme");
+    if (currentTheme) {
+      document.documentElement.setAttribute("data-theme", currentTheme);
+    }
 
     window.addEventListener("resize", () => {
       if (window.innerWidth !== this.width) {
@@ -49,22 +54,22 @@ class App extends React.Component<{}, AppState> {
   toggleLeftBar() {
     if (window.innerWidth <= 1024) {
       this.setState({
-        toggledRight: false
+        toggledRight: false,
       });
     }
-    this.setState(state => ({
-      toggledLeft: !state.toggledLeft
+    this.setState((state) => ({
+      toggledLeft: !state.toggledLeft,
     }));
   }
 
   toggleRightBar() {
     if (window.innerWidth <= 1024) {
       this.setState({
-        toggledLeft: false
+        toggledLeft: false,
       });
     }
-    this.setState(state => ({
-      toggledRight: !state.toggledRight
+    this.setState((state) => ({
+      toggledRight: !state.toggledRight,
     }));
   }
 
@@ -72,12 +77,12 @@ class App extends React.Component<{}, AppState> {
     if (window.innerWidth <= 1024) {
       this.setState({
         toggledLeft: false,
-        toggledRight: false
+        toggledRight: false,
       });
     } else {
       this.setState({
         toggledLeft: true,
-        toggledRight: true
+        toggledRight: true,
       });
     }
   }
@@ -92,7 +97,7 @@ class App extends React.Component<{}, AppState> {
       { name: "Dashboard", path: "/dashboard", icon: faHome },
       { name: "Modules", path: "/modules", icon: faChalkboardTeacher },
       { name: "Timeline", path: "/timeline", icon: faCalendarWeek },
-      { name: "Exams", path: "/exams", icon: faBookOpen }
+      { name: "Exams", path: "/exams", icon: faBookOpen },
     ];
 
     return (
@@ -113,11 +118,11 @@ class App extends React.Component<{}, AppState> {
           <Route path="/">
             <TopBar
               pages={horizontalBarPages}
-              onFavIconClick={e => {
+              onFavIconClick={(e) => {
                 e.preventDefault();
                 this.toggleLeftBar();
               }}
-              onUserIconClick={e => {
+              onUserIconClick={(e) => {
                 e.preventDefault();
                 this.toggleRightBar();
               }}
@@ -127,7 +132,7 @@ class App extends React.Component<{}, AppState> {
               onSettingsClick={() => this.setState({ showSettings: true })}
               toggledLeft={this.state.toggledLeft}
               toggledRight={this.state.toggledRight}
-              onOverlayClick={e => {
+              onOverlayClick={(e) => {
                 e.preventDefault();
                 this.setState({ toggledLeft: false, toggledRight: false });
               }}

src/components/atoms/FileListItem/index.tsx

@@ -3,7 +3,6 @@ import styles from "./style.module.scss";
 import classNames from "classnames";
 
 import Row from "react-bootstrap/esm/Row";
-import Col from "react-bootstrap/esm/Col";
 import Badge from "react-bootstrap/Badge";
 import { IconDefinition } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

src/components/pages/SettingsModal/index.tsx

@@ -22,13 +22,15 @@ const SettingsModal: React.FC<Props> = ({
   onHide,
   fileView,
   onCardViewClick,
-  onListViewClick
+  onListViewClick,
 }) => {
   const [interfaceSize, setInterfaceSize] = useLocalStorage(
     "interfaceSize",
     "90"
   );
 
+  const [theme, setTheme] = useLocalStorage("theme", "light");
+
   return (
     <Modal
       style={{ zIndex: "10000" }}
@@ -59,7 +61,7 @@ const SettingsModal: React.FC<Props> = ({
               <Form.Control
                 className={styles.inputBar}
                 value={interfaceSize}
-                onChange={e => setInterfaceSize(e.target.value)}
+                onChange={(e) => setInterfaceSize(e.target.value)}
                 onBlur={() =>
                   (document.documentElement.style.fontSize = `${interfaceSize}%`)
                 }
@@ -67,6 +69,34 @@ const SettingsModal: React.FC<Props> = ({
             </Col>
           </Form.Group>
 
+          <Form.Group style={{ alignItems: "center" }}>
+            <Form.Label>Theme</Form.Label>
+            <ButtonGroup style={{ float: "right" }}>
+              <Button
+                className={styles.modalToggleButton}
+                active={theme === "light"}
+                onClick={() => {
+                  document.documentElement.setAttribute("data-theme", "light");
+                  setTheme("light");
+                }}
+                variant="secondary"
+              >
+                Light
+              </Button>
+              <Button
+                className={styles.modalToggleButton}
+                active={theme === "dark"}
+                onClick={() => {
+                  document.documentElement.setAttribute("data-theme", "dark");
+                  setTheme("dark");
+                }}
+                variant="secondary"
+              >
+                Dark
+              </Button>
+            </ButtonGroup>
+          </Form.Group>
+
           <Form.Group style={{ alignItems: "center" }}>
             <Form.Label>File View</Form.Label>
             <ButtonGroup style={{ float: "right" }}>