fix: persist dark mode

src/background/index.ts

···
   // ignore errors; receiving end won't exist if it's the newtab page
   try {
     chrome.tabs.sendMessage(tabId, { type: MessageRequest.PING });
-  } catch (err) {}
+  } catch (err) { }
 }
 
 // this is meant to be called async
···
           sendResponse(err);
         });
       break;
+
     default:
   }
 

src/lib/Rabbithole.svelte

···
     getOrderedProjects,
     NotificationDuration,
   } from "../utils";
-  import {
-    SvelteUIProvider,
-    AppShell,
-    Navbar,
-  } from "@svelteuidev/core";
+  import { SvelteUIProvider, AppShell, Navbar } from "@svelteuidev/core";
+
   let activeProject = {};
   let websites = [];
   let projects = [];
   let isDark = false;
   let opened = true;
   let syncSuccess = false;
-  let syncFail = false;
+  let settings = {
+    show: false,
+    alignment: "right",
+    darkMode: false,
+  };
 
   onMount(async () => {
+    settings = await chrome.runtime.sendMessage({
+      type: MessageRequest.GET_SETTINGS,
+    });
+    isDark = settings.darkMode;
+    document.body.classList.toggle("dark-mode", isDark);
     projects = await getOrderedProjects();
     activeProject = await chrome.runtime.sendMessage({
       type: MessageRequest.GET_ACTIVE_PROJECT,
···
     });
     websites = possiblyDuplicatedWebsites.filter(
       (value, index, self) =>
-        index === self.findIndex((t) => t.url === value.url),
+        index === self.findIndex((t) => t.url === value.url)
     );
   }
 
···
     link.click();
   }
 
-  function toggleTheme() {
+  async function toggleTheme() {
     isDark = !isDark;
     document.body.classList.toggle("dark-mode", isDark);
+    settings.darkMode = isDark;
+    chrome.runtime.sendMessage({
+      type: MessageRequest.UPDATE_SETTINGS,
+      settings,
+    });
   }
 
   function handleToggleSidebar() {
···
           on:projectSync={saveWindowToActiveProject}
           on:exportRabbitholes={exportRabbitholes}
           on:toggleSidebar={handleToggleSidebar}
-      />
-    </Navbar>
+        />
+      </Navbar>
     {:else}
       <div class="hamburger-only">
         <Sidebar

src/lib/Sidebar.svelte

···
 <script>
   import { createEventDispatcher } from "svelte";
-  import {
-    Button,
-    Group,
-    Text,
-    TextInput,
-    Tooltip,
-  } from "@svelteuidev/core";
+  import { Button, Group, Text, TextInput, Tooltip } from "@svelteuidev/core";
   import SettingsButtons from "src/lib/SettingsButtons.svelte";
   import UpdatingComponent from "src/lib/UpdatingComponent.svelte";
   import { NotificationDuration } from "../utils";
···
         <Text weight="bold" size="lg" override={textStyleOverride}
           >Change Project</Text
         >
-        <ProjectSelector id="project-selector" {projects} {handleProjectChange} />
+        <ProjectSelector
+          id="project-selector"
+          {projects}
+          {handleProjectChange}
+        />
         <Tooltip
           {isHoveringOverSync}
           label="Save all tabs in window to current project"
···
         <Text weight="bold" size="lg" override={textStyleOverride}
           >Create Project</Text
         >
-        <UpdatingComponent fail={createProjectFail} failMsg={createProjectFailMsg}>
+        <UpdatingComponent
+          fail={createProjectFail}
+          failMsg={createProjectFailMsg}
+        >
           <TextInput
             placeholder="My new rabbithole"
             bind:value={newRabbitholeName}

src/storage/db.ts

···
 export interface Settings {
   alignment: string;
   show: boolean;
+  darkMode: boolean;
 }
 
 export interface Website {
···
             });
             objectStore.createIndex("name", "name", { unique: false });
             objectStore.createIndex("url", "url", { unique: true });
-            objectStore.transaction.oncomplete = () => {};
+            objectStore.transaction.oncomplete = () => { };
           }
           if (event.oldVersion < 2) {
             db.createObjectStore("user", { keyPath: "id" });
···
         .put(user);
 
       request.onsuccess = (event) => {
-        console.log(`update settings success: ${event.target}`);
+        console.log(`update settings success: ${JSON.stringify(event.target)}`);
         resolve(settings);
       };