diff --git a/.stylelint.json b/.stylelint.json
deleted file mode 100644
index 2e8ff58..0000000
--- a/.stylelint.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": ["stylelint-config-standard", "stylelint-config-prettier"]
-}
diff --git a/README.md b/README.md
index 8a09936..bc0bd65 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,8 @@ Quipu is a simple [Pinboard](http://pinboard.in) powered session manager.
 
 [Add to Chrome](https://chrome.google.com/webstore/detail/quipu/ekiaicefngglagjldocoldkinmhegnjo) | [Add to Firefox](https://addons.mozilla.org/addon/quipu/)
 
+**Notice**: Currently the chrome build is broken due to the manifest 2/3 issue. I don't have the time to fix the chrome builds, but there is an issue for it: [#56](https://github.com/janrito/quipu/issues/56)
+
 I have too many tabs open. I struggle to keep them organised. If I have to switch context, I often keep a group of tabs related to a topic open, or I save them in an email, or a slack message or a variety of different bookmarking services, and lose them. I fear my browser crashing and losing work.
 
 Quipu allows me to save some tabs for later, arranged in a simple, two level hierarchy. It doesn't require me to spend too much time curating them, but it does make saving and having them available quickly.
@@ -29,7 +31,6 @@ This extension was inspired by different tools that I have used in the past, but
 
 - [tab decay](https://github.com/benkehoe/tab-decay) - where the idea of using half-lives to decay old tabs came from.
 - [toby](https://www.gettoby.com/) – keep track of old bookmarks
--
 
 ## Contributing
 
diff --git a/media/previewer.png b/media/previewer.png
index c07d56e..1248ea6 100644
Binary files a/media/previewer.png and b/media/previewer.png differ
diff --git a/source/App.svelte b/source/App.svelte
index 10dc9d8..373588d 100644
--- a/source/App.svelte
+++ b/source/App.svelte
@@ -33,14 +33,15 @@ const toggleSettings = () => {
       </div>
     </div>
   </header>
-  <main class="mb-auto w-full flex-grow overflow-hidden pl-3">
+  <main
+    class="mb-auto w-full flex-grow overflow-hidden bg-white pl-3 text-gray-800 dark:bg-black dark:text-gray-100">
     <div class="flex h-full w-full flex-row overflow-hidden">
       <div class="h-full flex-grow overflow-hidden py-3">
         {#if $settings}
           {#if settingsActive}<Settings on:close="{toggleSettings}" />{:else}<Bookmarks />{/if}
         {/if}
       </div>
-      <div class="h-full w-56 flex-none bg-gray-100 p-2"><Tabs /></div>
+      <div class="h-full w-56 flex-none bg-gray-100 p-2 dark:bg-gray-800"><Tabs /></div>
     </div>
   </main>
   <footer class="h-2 border-t border-head-600 bg-head-800 py-1 px-3">
diff --git a/source/components/Bookmark.svelte b/source/components/Bookmark.svelte
index bbf7633..ecf503c 100644
--- a/source/components/Bookmark.svelte
+++ b/source/components/Bookmark.svelte
@@ -2,15 +2,6 @@
 :global(#dnd-action-dragged-el) {
   @apply shadow-xl;
 }
-.parentTag {
-  @apply border-blue-400 bg-blue-50 text-blue-500;
-}
-.leafTag {
-  @apply border-yellow-400 bg-yellow-50 text-yellow-500;
-}
-.tag {
-  @apply border-b-2;
-}
 </style>
 
 <script>
@@ -33,11 +24,24 @@ const openBookmark = () => dispatch("open");
 const closeBookmark = () => dispatch("close");
 const highlightBookmark = () => key && dispatch("highlight", key);
 
-const darkBackground = decay <= 0.7 ? "bg-blue-500" : decay <= 0.9 ? "bg-orange-500" : "bg-red-500";
-const lightBackground =
-  decay <= 0.7 ? "bg-blue-200" : decay <= 0.9 ? "bg-orange-200" : "bg-red-200";
-const darkForeground =
-  decay <= 0.7 ? "text-blue-400" : decay <= 0.9 ? "text-orange-400" : "text-red-400";
+const decayProgressBackground =
+  decay <= 0.7
+    ? "bg-blue-500 dark:bg-blue-500"
+    : decay <= 0.9
+    ? "bg-orange-500 dark:bg-orange-400"
+    : "bg-red-500 dark:bg-red-400";
+const tooltipBackground =
+  decay <= 0.7
+    ? "bg-blue-200 dark:bg-blue-700"
+    : decay <= 0.9
+    ? "bg-orange-200 dark:bg-orange-700"
+    : "bg-red-200 dark:bg-red-700";
+const tooltipForeground =
+  decay <= 0.7
+    ? "text-blue-400 dark:text-blue-500"
+    : decay <= 0.9
+    ? "text-orange-400 dark:text-orange-500"
+    : "text-red-400 dark:text-red-500";
 
 $: tagsToDraw = tags
   .map(tag => ({
@@ -48,7 +52,7 @@ $: tagsToDraw = tags
 </script>
 
 <div
-  class="group/bookmark relative m-1.5 flex cursor-pointer flex-col bg-gray-50 p-1"
+  class="group/bookmark relative m-1.5 flex cursor-pointer flex-col bg-gray-50 p-1 shadow-gray-900 dark:bg-gray-900 "
   on:keydown="{e => e.key === 'Enter' && openBookmark()}"
   on:click|preventDefault="{openBookmark}">
   {#if closeEnabled}
@@ -56,8 +60,8 @@ $: tagsToDraw = tags
       <div
         on:keydown="{e => e.key === 'Enter' && closeBookmark()}"
         on:click|preventDefault|stopPropagation="{closeBookmark}"
-        class="block cursor-pointer align-top text-sm text-red-300 hover:text-red-500">
-        <IconDelete />
+        class="group/close-button block cursor-pointer align-top text-sm text-red-300 hover:text-red-500">
+        <IconDelete class="drop-shadow-sm group-hover/close-button:drop-shadow-lg" />
       </div>
     </div>
   {/if}
@@ -70,7 +74,7 @@ $: tagsToDraw = tags
           <span
             on:keydown="{e => e.key === 'Enter' && highlightBookmark()}"
             on:click|preventDefault|stopPropagation="{highlightBookmark}"
-            class="block cursor-pointer align-top text-sm text-gray-200 group-hover/bookmark:text-blue-800"
+            class="block cursor-pointer align-top text-sm text-gray-200 group-hover/bookmark:text-blue-800 dark:text-gray-700 dark:group-hover/bookmark:text-blue-100"
             >¶</span>
         </div>
       {/if}
@@ -82,26 +86,28 @@ $: tagsToDraw = tags
             : decay <= 0.9
             ? 'left-10'
             : '-right-2'} mt-6 flex-col items-center">
-          <div class="-mb-2 h-3 w-3 rotate-45 {lightBackground}"></div>
+          <div class="-mb-2 h-3 w-3 rotate-45 {tooltipBackground}"></div>
           <span
-            class="whitespace-no-wrap relative p-2 text-xs leading-none shadow-lg {lightBackground} {darkForeground}"
+            class="whitespace-no-wrap relative p-2 text-xs leading-none shadow-lg {tooltipBackground} {tooltipForeground}"
             >Decay: {Math.round(decay * 100)}%</span>
         </div>
       {/if}
     </div>
     <div class="flex-grow overflow-hidden">
-      <p class="mt-0.5 mb-1.5 truncate text-xs font-normal">
+      <p class="mt-0.5 truncate text-xs font-normal">
         {#if title}{title}{:else}{parsedUrl.hostname}{/if}
       </p>
-      <p
-        class="mb-0.5 truncate border-b-2 border-pink-300 bg-pink-100 text-xs font-extralight text-pink-400">
+      <p class="mb-0.5 truncate  text-2xs font-extralight text-gray-300  dark:text-gray-600">
         <span class="font-normal">{parsedUrl.hostname}</span
         >{#if parsedUrl.port}:{parsedUrl.port}{/if}{parsedUrl.pathname}{parsedUrl.search}{parsedUrl.hash}
       </p>
       {#if tagsToDraw && tags.length > 0}
         <p class="truncate text-xs font-extralight">
           {#each tagsToDraw as tag}
-            <span class="tag" class:parentTag="{tag.isParent}" class:leafTag="{!tag.isParent}"
+            <span
+              class="inline-block border-b px-1 {tag.isParent
+                ? 'border-blue-400 bg-blue-50 text-blue-500 dark:border-blue-500 dark:bg-blue-900 dark:text-blue-500'
+                : 'border-yellow-400 bg-yellow-50 text-yellow-500 dark:border-yellow-500 dark:bg-yellow-900 dark:text-yellow-500'}"
               >{tag.name}</span>
             <span> </span>
           {/each}
@@ -110,8 +116,8 @@ $: tagsToDraw = tags
     </div>
   </div>
   <div class="-m-1 mt-2 h-px shrink-0 ">
-    <div class="w-full bg-gray-200">
-      <div class="{darkBackground} h-px" style="width: {decay * 100}%"></div>
+    <div class="w-full bg-gray-200 dark:bg-gray-700">
+      <div class="{decayProgressBackground} h-px" style="width: {decay * 100}%"></div>
     </div>
   </div>
 </div>
diff --git a/source/components/BookmarkEditor.svelte b/source/components/BookmarkEditor.svelte
index f7d0924..4b8de4c 100644
--- a/source/components/BookmarkEditor.svelte
+++ b/source/components/BookmarkEditor.svelte
@@ -1,18 +1,3 @@
-<style>
-.parentTag {
-  @apply border-blue-400 bg-blue-50 text-blue-500;
-}
-.cardTag {
-  @apply border-green-400 bg-green-50 text-green-500;
-}
-.leafTag {
-  @apply border-yellow-400 bg-yellow-50 text-yellow-500;
-}
-.tag {
-  @apply border-b-2;
-}
-</style>
-
 <script>
 import { createEventDispatcher } from "svelte";
 
@@ -52,6 +37,14 @@ const updateTags = event => {
 };
 
 const typeOrder = ["leafTag", "cardTag", "parentTag"];
+const tagStyle = {
+  parentTag:
+    "border-blue-400 bg-blue-50 text-blue-500 dark:border-blue-500 dark:bg-blue-900 dark:text-blue-400",
+  cardTag:
+    "border-green-400 bg-green-50 text-green-500 dark:border-green-500 dark:bg-green-900 dark:text-green-400",
+  leafTag:
+    "border-yellow-400 bg-yellow-50 text-yellow-500 dark:border-yellow-500 dark:bg-yellow-900 dark:text-yellow-400",
+};
 
 $: tagsToDraw = tags
   .map(tag => ({
@@ -70,25 +63,26 @@ $: tagsToDraw = tags
 </script>
 
 <div class="p-2">
-  <div class="border-b-2 border-gray-200 bg-gray-50 px-2 py-6">
+  <div
+    class="border-b-2 border-gray-200 bg-gray-50 px-2 py-6 dark:border-gray-700 dark:bg-gray-900">
     <h1 class="mb-2 font-normal" contenteditable="true" bind:textContent="{description}">
       {description}
     </h1>
 
     <p
-      class="mb-2 break-all border-b-2 border-pink-300 bg-pink-100 text-sm font-extralight text-pink-400">
+      class="mb-2 break-all border-b-2 border-pink-300 bg-pink-100 text-sm font-extralight text-pink-400 dark:border-pink-600 dark:bg-pink-800 dark:text-pink-500">
       {href}
     </p>
 
     <p
-      class="mb-2 h-32 border-b-2 border-gray-400 bg-gray-100 text-gray-500"
+      class="mb-2 h-32 border-b-2 border-gray-400 bg-gray-100 text-gray-500 dark:border-gray-500 dark:bg-gray-800 dark:text-gray-400"
       contenteditable="true"
       bind:textContent="{extended}">
       {extended}
     </p>
 
     <p
-      class="mb-2 border-b-2 border-gray-400 bg-gray-100 text-gray-500"
+      class="mb-2 border-b-2 border-gray-400 bg-gray-100 text-gray-500 dark:border-gray-500 dark:bg-gray-800 dark:text-gray-400"
       contenteditable="true"
       on:keyup="{updateTags}">
       {tags.join(" ")}
@@ -97,7 +91,7 @@ $: tagsToDraw = tags
     {#if tagsToDraw}
       <p class="mb-2 text-sm font-extralight">
         {#each tagsToDraw as tag}
-          <span class="tag {tag.type}">
+          <span class="border-b-2 px-1 {tagStyle[tag.type]}">
             {tag.name}
           </span>
           <span> </span>
@@ -107,14 +101,14 @@ $: tagsToDraw = tags
   </div>
   <div class="flex flex-row justify-end">
     <button
-      class="max-w-1/3 my-2 mr-auto border-b-2 border-red-500 bg-red-200 px-1.5  text-red-500 hover:border-red-200 hover:bg-red-500 hover:text-red-200"
+      class="max-w-1/3 my-2 mr-auto border-b-2 border-red-500 bg-red-200 px-1.5 text-red-500 hover:border-red-200 hover:bg-red-500 hover:text-red-200 dark:border-red-400 dark:bg-red-700 dark:text-red-400 dark:hover:border-red-700 dark:hover:bg-red-400 dark:hover:text-red-700"
       on:click="{onDelete}"
       >delete <span class="inline-block align-text-bottom"><IconDelete /></span></button>
     <button
-      class="max-w-1/3 my-2 ml-2  border-b-2 border-gray-500 bg-gray-200 px-1.5  text-gray-500 hover:border-gray-200 hover:bg-gray-500 hover:text-gray-200"
+      class="max-w-1/3 my-2 ml-2 border-b-2 border-gray-500 bg-gray-200 px-1.5 text-gray-500 hover:border-gray-200 hover:bg-gray-500 hover:text-gray-200 dark:border-gray-400 dark:bg-gray-700 dark:text-gray-400 dark:hover:border-gray-700 dark:hover:bg-gray-400 dark:hover:text-gray-700"
       on:click="{onDone}">cancel</button>
     <button
-      class="max-w-1/3 my-2 ml-2 border-b-2 border-blue-500 bg-blue-200 px-1.5  text-blue-500 hover:border-blue-200 hover:bg-blue-500 hover:text-blue-200"
+      class="max-w-1/3 my-2 ml-2 border-b-2 border-blue-500 bg-blue-200 px-1.5 text-blue-500 hover:border-blue-200 hover:bg-blue-500 hover:text-blue-200 dark:border-blue-400 dark:bg-blue-700 dark:text-blue-400 dark:hover:border-blue-700 dark:hover:bg-blue-400 dark:hover:text-blue-700"
       on:click="{onSave}">save</button>
   </div>
 </div>
diff --git a/source/components/Card.svelte b/source/components/Card.svelte
index d2a2161..5398303 100644
--- a/source/components/Card.svelte
+++ b/source/components/Card.svelte
@@ -1,10 +1,6 @@
 <style>
-.untagged {
-  @apply text-gray-200;
-}
-
 :global(.active-droppable-card) {
-  @apply bg-gray-50 shadow-inner;
+  @apply opacity-80 shadow-inner;
 }
 </style>
 
@@ -138,7 +134,7 @@ $: tagStore = createTagStore($settings.pinboardAPIToken);
 
 <svelte:window on:keydown="{handleAltKeyPressed}" on:keyup="{handleAltKeyPressed}" />
 
-<div class="flex flex-col bg-white">
+<div class="flex flex-col bg-white shadow-gray-900 dark:bg-black dark:shadow-gray-50">
   {#if editMode}
     <div class="ml-7 flex-shrink-0 py-3">
       <TagEditor
@@ -149,14 +145,20 @@ $: tagStore = createTagStore($settings.pinboardAPIToken);
         tags="{$tagStore}" />
     </div>
   {:else}
-    <h3 class:untagged class="ml-7 py-3 text-sm text-gray-400">
+    <h3
+      class="ml-7 py-3 text-sm {untagged
+        ? 'text-gray-200 dark:text-gray-700'
+        : 'text-gray-400 dark:text-gray-500'}">
       <a href="#edit-card-{name}" on:click|preventDefault="{enterEditMode}">{name}</a>
-      <span class="text-xs text-gray-300"> ({bookmarks.length})</span>
+      <span class="text-xs text-gray-300 dark:text-gray-600"> ({bookmarks.length})</span>
       {#if bookmarks.length > 1}
-        <button class="text-xs text-gray-300" on:click|preventDefault="{openAllBookmarks}">
+        <button
+          class="text-xs text-gray-300 dark:text-gray-600"
+          on:click|preventDefault="{openAllBookmarks}">
           open all</button>
       {/if}
-      <button class="text-gray-200" on:click|preventDefault="{createNewCard}">+</button>
+      <button class="text-gray-200 dark:text-gray-700" on:click|preventDefault="{createNewCard}"
+        >+</button>
     </h3>
   {/if}
 
@@ -181,6 +183,7 @@ $: tagStore = createTagStore($settings.pinboardAPIToken);
         tags="{bookmark.tags}"
         favIconUrl="{bookmark.favIcon}"
         parentTags="{[...parentTags, name]}"
+        cardsIn
         on:highlight="{e => dispatch('highlightBookmark', e.detail)}"
         on:close="{closeBookmarkDispatcher(bookmark.href)}"
         on:open="{openBookmarkDispatcher(bookmark.href)}" />
diff --git a/source/components/IconDelete.svelte b/source/components/IconDelete.svelte
index 6ada7f8..d9c14b7 100644
--- a/source/components/IconDelete.svelte
+++ b/source/components/IconDelete.svelte
@@ -1,3 +1,8 @@
+<script>
+let className = "";
+export { className as class };
+</script>
+
 <!--
 solid backspace heroicon svg
 
@@ -25,6 +30,7 @@ SOFTWARE.
 -->
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5">
   <path
+    class="{className}"
     fill-rule="evenodd"
     d="M7.22 3.22A.75.75 0 017.75 3h9A2.25 2.25 0 0119 5.25v9.5A2.25 2.25 0 0116.75 17h-9a.75.75 0 01-.53-.22L.97 10.53a.75.75 0 010-1.06l6.25-6.25zm3.06 4a.75.75 0 10-1.06 1.06L10.94 10l-1.72 1.72a.75.75 0 101.06 1.06L12 11.06l1.72 1.72a.75.75 0 101.06-1.06L13.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L12 8.94l-1.72-1.72z"
     clip-rule="evenodd"></path>
diff --git a/source/components/Page.svelte b/source/components/Page.svelte
index 9244171..b082271 100644
--- a/source/components/Page.svelte
+++ b/source/components/Page.svelte
@@ -179,9 +179,12 @@ $: errors = $bookmarksStore.errors;
         untagged="{true}"
         on:createNewCard="{createNewCardDispatcher(cards.length)}" />
     {:else}
-      <p class="py-20 text-center text-lg text-gray-300">
+      <p class="py-20 text-center text-lg text-gray-300 dark:text-gray-600">
         Add a
-        <a class="text-gray-400" href="#new-card" on:click="{createNewCardDispatcher(0)}">card</a>
+        <a
+          class="text-gray-400 dark:text-gray-500"
+          href="#new-card"
+          on:click="{createNewCardDispatcher(0)}">card</a>
         or some bookmarks here!
       </p>
     {/if}
diff --git a/source/components/Settings.svelte b/source/components/Settings.svelte
index d524884..18e8717 100644
--- a/source/components/Settings.svelte
+++ b/source/components/Settings.svelte
@@ -105,7 +105,7 @@ $: tabsMatchingLiveExceptions = $browserTabs
         <label id="pinboard-api-token" for="pinboardAPIToken" class="mt-5 w-1/2 p-1 pl-7">
           <span>Pinboard API Token</span>
           <input
-            class="w-full border-b-2 border-gray-300 bg-gray-100"
+            class="w-full border-b-2 border-gray-300 bg-gray-100 dark:border-gray-600 dark:bg-gray-800"
             type="text"
             name="pinboardAPIToken"
             bind:value="{$settings.pinboardAPIToken}" />
@@ -121,7 +121,7 @@ $: tabsMatchingLiveExceptions = $browserTabs
           <span>Pinboard Root Tag</span>
           <input
             type="text"
-            class="w-full border-b-2 border-gray-300 bg-gray-100"
+            class="w-full border-b-2 border-gray-300 bg-gray-100 dark:border-gray-600 dark:bg-gray-800"
             name="pinboardRootTag"
             bind:value="{$settings.pinboardRootTag}" />
         </label>
@@ -129,7 +129,7 @@ $: tabsMatchingLiveExceptions = $browserTabs
         <label id="tab-decay-half-life" class="mt-5 w-1/2 p-1 pl-7">
           <span>Half Life </span>
           <input
-            class="w-full border-b-2 border-gray-300 bg-gray-100"
+            class="w-full border-b-2 border-gray-300 bg-gray-100 dark:border-gray-600 dark:bg-gray-800"
             type="text"
             name="tabDecayHalfLife"
             on:focusout="{updateTabDecayHalfLife}"
@@ -149,7 +149,7 @@ $: tabsMatchingLiveExceptions = $browserTabs
             <span>Exceptions</span>
             {#if tabDecayExceptionsEditMode}
               <pre
-                class="h-min-content w-full border-b-2 border-gray-300 bg-gray-100 p-3 text-xs text-gray-400"
+                class="h-min-content w-full border-b-2 border-gray-300 bg-gray-100 p-3 text-xs text-gray-800 dark:border-gray-300 dark:bg-gray-100 dark:text-gray-100"
                 contenteditable="true"
                 role="textbox"
                 on:focusout="{updateTabDecayExemptions}"
@@ -157,7 +157,7 @@ $: tabsMatchingLiveExceptions = $browserTabs
                 name="tabDecayExceptions">{$settings.tabDecayExceptions.join("\n")}</pre>
             {:else}
               <pre
-                class="h-min-content w-full border-b-2 border-gray-300 bg-gray-50 p-3 text-xs text-gray-400"
+                class="h-min-content w-full border-b-2 border-gray-300 bg-gray-50 p-3 text-xs text-gray-400 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-500"
                 on:click="{enableTabDecayExceptionsEditMode}"
                 on:keydown="{e => e.key === 'Enter' && enableTabDecayExceptionsEditMode()}"
                 name="tabDecayExceptions">{$settings.tabDecayExceptions.join("\n")}</pre>
@@ -168,7 +168,7 @@ $: tabsMatchingLiveExceptions = $browserTabs
           </label>
           <p class="mt-4 mb-1 text-sm ">Open tabs matching exceptions</p>
           <pre
-            class="h-min-content w-full whitespace-pre-wrap border-b-2 border-gray-300 bg-gray-50 p-3 text-xs text-gray-400">{tabsMatchingLiveExceptions.join(
+            class="h-min-content w-full whitespace-pre-wrap border-b-2 border-gray-300 bg-gray-50 p-3 text-xs text-gray-400 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-500">{tabsMatchingLiveExceptions.join(
               "\n"
             )}</pre>
         </div>
@@ -177,24 +177,24 @@ $: tabsMatchingLiveExceptions = $browserTabs
           <span>All Settings</span>
           {#if allSettingsEditMode}
             <pre
-              class="h-min-content w-full border-b-2 border-gray-300 bg-gray-100 p-3 text-xs text-gray-400"
+              class="h-min-content w-full border-b-2 border-gray-300 bg-gray-100 p-3 text-xs text-gray-800 dark:border-gray-300 dark:bg-gray-100 dark:text-gray-100"
               contenteditable="true"
               role="textbox"
               on:focusout="{updateAllSettings}"
-              name="allSettings">{JSON.stringify($settings, null, "  ")}</pre>
+              name="allSettings">{JSON.stringify($settings, null, " ")}</pre>
           {:else}
             <pre
-              class="h-min-content w-full border-b-2 border-gray-300 bg-gray-50 p-3 text-xs text-gray-400 "
+              class="h-min-content w-full border-b-2 border-gray-300 bg-gray-50 p-3 text-xs text-gray-400 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-500"
               on:click="{enableAllSettingsEditMode}"
               on:keydown="{e => e.key === 'Enter' && enableAllSettingsEditMode()}"
-              name="allSettings">{JSON.stringify($settings, null, "  ")}</pre>
+              name="allSettings">{JSON.stringify($settings, null, " ")}</pre>
           {/if}
         </label>
       {:else if currentTab.name === "cache"}
         <div class="w-full flex-grow">
           <p class="ml-7 mt-5">
             <button
-              class="border-b-2 border-red-500 bg-red-200 px-1.5 text-red-500 hover:border-red-200 hover:bg-red-500 hover:text-red-200"
+              class="border-b-2 border-red-500 bg-red-200 px-1.5 text-red-500 hover:border-red-200 hover:bg-red-500 hover:text-red-200 dark:border-red-400 dark:bg-red-700 dark:text-red-400 dark:hover:border-red-700 dark:hover:bg-red-400 dark:hover:text-red-700"
               on:click|preventDefault="{clearCacheHandler}">
               clear cache <span class="inline-block align-text-bottom"><IconDelete /></span>
             </button>
@@ -204,7 +204,7 @@ $: tabsMatchingLiveExceptions = $browserTabs
       <div class="w-3/4"></div>
       <div class="w-1/4 p-1">
         <button
-          class="w-full border-b-2 border-gray-500 bg-gray-200 pr-1.5 pl-5 text-left text-gray-500 hover:border-gray-200 hover:bg-gray-500 hover:text-gray-200"
+          class="w-full border-b-2 border-gray-500 bg-gray-200 pr-1.5 pl-5 text-left text-gray-500 hover:border-gray-200 hover:bg-gray-500 hover:text-gray-200 dark:border-gray-400 dark:bg-gray-700 dark:text-gray-400 dark:hover:border-gray-700 dark:hover:bg-gray-400 dark:hover:text-gray-700"
           on:click|preventDefault="{closeSettings}">
           done
         </button>
diff --git a/source/components/Tabs.svelte b/source/components/Tabs.svelte
index 4154439..556308b 100644
--- a/source/components/Tabs.svelte
+++ b/source/components/Tabs.svelte
@@ -125,7 +125,7 @@ $: updatedLifetimes = $tabLifetimes;
   {#each drawingWindowTabs as tabs, windowIndex}
     <h3 class="pl-5 text-sm font-extralight">
       {#if windowIndex === 0}Current {/if}Window Tabs
-      <span class="text-gray-300">({tabs.length})</span>
+      <span class="text-gray-300 dark:text-gray-600">({tabs.length})</span>
     </h3>
     <div
       use:dndzone="{{
@@ -151,7 +151,7 @@ $: updatedLifetimes = $tabLifetimes;
     </div>
   {/each}
   <h3 class="mt-3 pl-5 text-sm font-extralight">
-    Decayed Tabs <span class="text-gray-300">({$decayedTabs.length})</span>
+    Decayed Tabs <span class="text-gray-300 dark:text-gray-600">({$decayedTabs.length})</span>
   </h3>
   <div
     use:dndzone="{{
diff --git a/source/components/TagEditor.svelte b/source/components/TagEditor.svelte
index b68669f..d0e6d7c 100644
--- a/source/components/TagEditor.svelte
+++ b/source/components/TagEditor.svelte
@@ -1,9 +1,3 @@
-<style>
-.selected {
-  @apply bg-gray-200;
-}
-</style>
-
 <script>
 import { createEventDispatcher } from "svelte";
 
@@ -67,7 +61,7 @@ $: drawTags = prefix
 <div class="relative flex min-w-fit flex-row text-sm">
   <input
     type="text"
-    class="h-full w-36 border-b-2 bg-gray-100 px-2 pr-6 pl-2"
+    class="h-full w-36 border-b-2 border-gray-200 bg-gray-100 px-2 pr-6 pl-2 dark:border-gray-700 dark:bg-gray-800"
     bind:this="{element}"
     value="{value}"
     on:blur="{handleEdit}"
@@ -75,15 +69,17 @@ $: drawTags = prefix
     on:keyup="{handleKeyUp}"
     use:focus />
   <button
-    class="-ml-6 mr-2 text-red-300 hover:text-red-500"
+    class="-ml-6 mr-2 text-red-300 hover:text-red-500 dark:text-red-600 dark:hover:text-red-400"
     on:click|preventDefault="{handleDelete}"><IconDelete /></button>
   {#if drawTags.length > 0}
-    <div class="absolute top-7 left-0 z-20 w-36 border-b-2 border-gray-300 bg-gray-100 shadow">
+    <div
+      class="absolute top-7 left-0 z-20 w-36 border-b-2 border-gray-300 bg-gray-100 shadow dark:border-gray-600 dark:bg-gray-800">
       <ul>
         {#each drawTags as tag, tagIdx}
           <li
-            class:selected="{selectedSuggestedTagIdx === tagIdx && drawTags.length > 1}"
-            class="p-2"
+            class="p-2 {selectedSuggestedTagIdx === tagIdx && drawTags.length > 1
+              ? 'bg-gray-200 dark:bg-gray-700'
+              : ''}"
             on:keydown="{e => e.key === 'Enter' && selectSuggestedTag(tag)()}"
             on:click="{selectSuggestedTag(tag)}">
             {tag.name}
diff --git a/source/components/UITabs.svelte b/source/components/UITabs.svelte
index 1d79126..374994c 100644
--- a/source/components/UITabs.svelte
+++ b/source/components/UITabs.svelte
@@ -1,10 +1,6 @@
 <style>
-.selected {
-  @apply border-gray-600 text-gray-800;
-}
-
 :global(.active-droppable-tab-target) {
-  @apply bg-gray-50;
+  @apply opacity-80;
 }
 </style>
 
@@ -82,7 +78,7 @@ $: drawTabs = tabs;
 <div class="flex h-full flex-col">
   <nav class="flex h-8 flex-shrink-0 flex-row overflow-y-visible pl-5">
     <div
-      class="grid h-7 auto-cols-max grid-flow-col gap-0 overflow-y-visible border-b-2 border-gray-300"
+      class="grid h-7 auto-cols-max grid-flow-col gap-0 overflow-y-visible border-gray-300 dark:border-gray-600"
       use:dndzone="{{
         items: drawTabs,
         dropTargetStyle: {},
@@ -103,9 +99,11 @@ $: drawTabs = tabs;
             tags="{tags}" />
         {:else}
           <a
-            class:selected="{tab.id === selectedTabId}"
             href="#page-{tab.name}"
-            class="mx-0 mt-0 -mb-0.5 truncate border-b-2 bg-white px-3 text-sm font-extralight text-gray-400 hover:border-gray-400"
+            class="mx-0 mt-0 -mb-0.5 truncate border-b-2 bg-white px-3 text-sm font-extralight hover:border-gray-400 dark:bg-black hover:dark:border-gray-500 {tab.id ===
+            selectedTabId
+              ? 'border-gray-600 text-gray-800 dark:border-gray-300 dark:text-gray-200'
+              : 'border-gray-300 text-gray-400 dark:border-gray-600 dark:text-gray-500'}"
             on:click|preventDefault="{clickTabDispatcher(tab.id)}">{tab.name}</a>
         {/if}
       {/each}
@@ -113,7 +111,7 @@ $: drawTabs = tabs;
 
     {#if editable}
       <a
-        class="mx-1.5 -mb-0.5 px-1.5 text-sm font-normal text-gray-200"
+        class="mx-1.5 -mb-0.5 px-1.5 text-sm font-normal text-gray-200 dark:text-gray-700"
         href="#new-tab"
         on:click|preventDefault="{createNewTab}">+</a>
     {/if}
diff --git a/tailwind.config.js b/tailwind.config.js
index e8b2230..e06319a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -17,6 +17,10 @@ module.exports = {
       "3/4": "75%",
       ...defaultTheme.minHeight,
     },
+    fontSize: {
+      "2xs": ["10px", "16px"],
+      ...defaultTheme.fontSize,
+    },
     extend: {
       colors: {
         head: process.env.NODE_ENV === "production" ? colors.gray : colors.fuchsia,