✨ Add dark mode (#349)

components/EditorPanel.tsx

@@ -166,6 +166,7 @@ export default function EditorPanel({
         alignItems={"center"}
         borderBottom
         zIndex={2}
+        backgroundColor="#FFFFFF"
         flexShrink={0}
       >
         <Pane flex={1}>
@@ -187,6 +188,7 @@ export default function EditorPanel({
                 alignItems="center"
                 justifyContent="center"
                 flexDirection="column"
+                backgroundColor="#FFFFFF"
               >
                 <FilePicker
                   width={"100%"}

components/Navigator.tsx

@@ -16,6 +16,7 @@ export default function Navigator() {
       display="flex"
       flexDirection="column"
       paddingTop={20}
+      backgroundColor="#FFFFFF"
     >
       <Pane paddingX={15}>
         <SearchBox />

hooks/useDarkMode.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react";
+
+const STORAGE_KEY = "__transform_tools_isDarkMode";
+
+export function useDarkMode() {
+  const [isDarkMode, setIsDarkMode] = useState<boolean>(false);
+
+  const toggleDarkMode = () => {
+    setIsDarkMode(prev => !prev);
+    /** Persist in local storage */
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(!isDarkMode));
+  };
+
+  useEffect(() => {
+    /** Use persisted local storage value if present */
+    setIsDarkMode(JSON.parse(localStorage.getItem(STORAGE_KEY) || "false"));
+  }, []);
+
+  return { isDarkMode, toggleDarkMode };
+}

pages/_app.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { Button, Pane } from "evergreen-ui";
+import { Button, IconButton, Pane, Tooltip } from "evergreen-ui";
 import Navigator from "@components/Navigator";
 import "@styles/main.css";
 
@@ -8,6 +8,7 @@ import Router, { useRouter } from "next/router";
 import { activeRouteData } from "@utils/routes";
 import Head from "next/head";
 import { Meta } from "@components/Meta";
+import { useDarkMode } from "@hooks/useDarkMode";
 
 const logo = (
   <svg
@@ -31,6 +32,7 @@ const logo = (
 );
 
 export default function App(props) {
+  const { isDarkMode, toggleDarkMode } = useDarkMode();
   const router = useRouter();
 
   useEffect(() => {
@@ -92,7 +94,16 @@ export default function App(props) {
         <Pane flex={1} display="flex" paddingX={20} className="logo-transform">
           {logo}
         </Pane>
-
+        <Pane display="flex" alignItems={"center"}>
+          <Tooltip content="Toggle dark mode">
+            <IconButton
+              height={20}
+              marginRight={10}
+              icon="moon"
+              onClick={toggleDarkMode}
+            />
+          </Tooltip>
+        </Pane>
         <Pane display="flex" alignItems={"center"}>
           <a
             style={{
@@ -106,6 +117,7 @@ export default function App(props) {
               alt=""
             />
           </a>
+
           <a href="https://github.com/ritz078/transform" target="_blank">
             <Button
               appearance="minimal"
@@ -119,7 +131,13 @@ export default function App(props) {
           </a>
         </Pane>
       </Pane>
-      <Pane display="flex" flexDirection="row">
+
+      <Pane
+        backgroundColor="#FFFFFF"
+        className={isDarkMode ? "dark" : "light"}
+        display="flex"
+        flexDirection="row"
+      >
         <Navigator />
         <Component {...pageProps} />
       </Pane>

styles/main.css

@@ -10,6 +10,16 @@ html {
   overflow: hidden;
 }
 
+.dark {
+  -webkit-filter: invert(1);
+  filter: invert(1);
+}
+
+.light {
+  -webkit-filter: none;
+  filter: none;
+}
+
 .monaco-editor {
   padding-top: 15px;
 }