Merge pull request #69 from Pinjasaur/dark-theme

feat: dark theme

packages/web/components/top_bar.tsx

@@ -1,5 +1,6 @@
-import { faRunning, faHome } from "@fortawesome/free-solid-svg-icons";
+import { faRunning, faHome, faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useEffect, useState } from "react";
 import { Notification } from "../types";
 
 function prettyName(s: string | undefined): string {
@@ -14,6 +15,7 @@ export function TopBar({
   unsavedChanges,
   notifications,
   onClick,
+  onThemeClick,
   onHomeClick,
   onActionClick,
   lhs,
@@ -23,11 +25,15 @@ export function TopBar({
   unsavedChanges: boolean;
   notifications: Notification[];
   onClick: () => void;
+  onThemeClick: () => void;
   onHomeClick: () => void;
   onActionClick: () => void;
   lhs?: React.ReactNode;
   rhs?: React.ReactNode;
 }) {
+
+  const [theme, setTheme] = useState<string>(localStorage.theme ?? 'light');
+
   return (
     <div id="sb-top" onClick={onClick}>
       {lhs}
@@ -71,6 +77,16 @@ export function TopBar({
             >
               <FontAwesomeIcon icon={faRunning} />
             </button>
+            <button
+              onClick={(e) => {
+                onThemeClick();
+                setTheme(localStorage.theme ?? 'light');
+                e.stopPropagation();
+              }}
+              title="Toggle theme"
+            >
+              <FontAwesomeIcon icon={theme === 'dark' ? faSun : faMoon} />
+            </button>
           </div>
         </div>
       </div>

packages/web/editor.tsx

@@ -719,6 +719,13 @@ export class Editor {
           onClick={() => {
             dispatch({ type: "start-navigate" });
           }}
+          onThemeClick={() => {
+            if (localStorage.theme === 'dark')
+              localStorage.theme = 'light';
+            else
+              localStorage.theme = 'dark';
+            document.documentElement.dataset.theme = localStorage.theme;
+          }}
           onHomeClick={() => {
             editor.navigate("");
           }}

packages/web/index.html

@@ -13,8 +13,10 @@
         overflow: hidden;
       }
     </style>
+    <script>
+      document.documentElement.dataset.theme = localStorage.theme ?? "light";
+    </script>
     <link rel="stylesheet" href="styles/main.scss" />
-    <link rel="stylesheet" href="styles/theme.css" />
     <script type="module" src="boot.ts"></script>
     <link rel="manifest" href="manifest.json" />
     <link rel="icon" type="image/x-icon" href="images/favicon.gif" />

packages/web/styles/main.scss

@@ -1,5 +1,6 @@
 @use "editor.scss";
 @use "filter_box.scss";
+@use "theme.scss";
 
 @font-face {
   font-family: "iA-Mono";

packages/web/styles/theme.scss

@@ -270,3 +270,42 @@
   font-size: 75%;
   line-height: 75%;
 }
+
+html[data-theme="dark"] {
+  #sb-root {
+    background-color: #555;
+    color: rgb(200, 200, 200);
+  }
+
+  #sb-top {
+    background-color: rgb(38, 38, 38);
+    border-bottom: rgb(62, 62, 62) 1px solid;
+    color: rgb(200, 200, 200);
+  }
+
+  .sb-saved {
+    color: rgb(225, 225, 225);
+  }
+
+  .sb-filter-box,
+  /* duplicating the class name to increase specificity */
+  .sb-help-text.sb-help-text {
+    color: #ccc;
+    background-color: rgb(38, 38, 38);
+  }
+
+  .sb-help-text {
+    border-bottom: 1px solid #6c6c6c;
+  }
+
+  .sb-code,
+  .sb-line-fenced-code,
+  .sb-task-marker {
+    background-color: #333;
+  }
+
+  .sb-notifications > div {
+    border: rgb(197, 197, 197) 1px solid;
+    background-color: #333;
+  }
+}