Defaults theme to follow system

src/components/App.tsx

@@ -38,8 +38,12 @@ class App extends React.Component<{}, AppState> {
     }%`;
 
     const currentTheme = localStorage.getItem("theme");
-    if (currentTheme) {
+    if (currentTheme == "light" || currentTheme == "dark") {
       document.documentElement.setAttribute("data-theme", currentTheme);
+    } else {
+      let mq = window.matchMedia("(prefers-color-scheme: dark)");
+      mq.addListener((mq) => this.setDarkTheme(mq.matches));
+      this.setDarkTheme(mq.matches);
     }
 
     window.addEventListener("resize", () => {
@@ -51,6 +55,13 @@ class App extends React.Component<{}, AppState> {
     this.showOrHideSideBars();
   }
 
+  setDarkTheme(toSet: boolean) {
+    document.documentElement.setAttribute(
+      "data-theme",
+      toSet ? "dark" : "light"
+    );
+  }
+
   toggleLeftBar() {
     if (window.innerWidth <= 1024) {
       this.setState({
@@ -108,6 +119,7 @@ class App extends React.Component<{}, AppState> {
           fileView={this.state.fileView}
           onCardViewClick={() => this.setFileView("card")}
           onListViewClick={() => this.setFileView("list")}
+          setDarkTheme={(b) => this.setDarkTheme(b)}
         />
 
         <Switch>

src/components/pages/SettingsModal/index.tsx

@@ -13,6 +13,7 @@ interface Props {
   show: boolean;
   onHide: any;
   fileView: string;
+  setDarkTheme: (toSet: boolean) => any;
   onCardViewClick: (event: React.MouseEvent) => void;
   onListViewClick: (event: React.MouseEvent) => void;
 }
@@ -21,6 +22,7 @@ const SettingsModal: React.FC<Props> = ({
   show,
   onHide,
   fileView,
+  setDarkTheme,
   onCardViewClick,
   onListViewClick,
 }) => {
@@ -29,7 +31,7 @@ const SettingsModal: React.FC<Props> = ({
     "90"
   );
 
-  const [theme, setTheme] = useLocalStorage("theme", "light");
+  const [theme, setTheme] = useLocalStorage("theme", "default");
 
   return (
     <Modal
@@ -72,11 +74,24 @@ const SettingsModal: React.FC<Props> = ({
           <Form.Group style={{ alignItems: "center" }}>
             <Form.Label>Theme</Form.Label>
             <ButtonGroup style={{ float: "right" }}>
+              <Button
+                className={styles.modalToggleButton}
+                active={theme === "default"}
+                onClick={() => {
+                  let mq = window.matchMedia("(prefers-color-scheme: dark)");
+                  mq.addListener((mq) => setDarkTheme(mq.matches));
+                  setDarkTheme(mq.matches);
+                  setTheme("default");
+                }}
+                variant="secondary"
+              >
+                Default
+              </Button>
               <Button
                 className={styles.modalToggleButton}
                 active={theme === "light"}
                 onClick={() => {
-                  document.documentElement.setAttribute("data-theme", "light");
+                  setDarkTheme(false);
                   setTheme("light");
                 }}
                 variant="secondary"
@@ -87,7 +102,7 @@ const SettingsModal: React.FC<Props> = ({
                 className={styles.modalToggleButton}
                 active={theme === "dark"}
                 onClick={() => {
-                  document.documentElement.setAttribute("data-theme", "dark");
+                  setDarkTheme(true);
                   setTheme("dark");
                 }}
                 variant="secondary"