Merge pull request #107 from janrito/dark-mode

Dark mode
janrito · Jan 6, 2023 · 88bc29d · 88bc29d
2 parents 3b40b90 + d822f75
commit 88bc29d
Show file tree

Hide file tree

Showing 14 changed files with 110 additions and 101 deletions.
diff --git a/.stylelint.json b/.stylelint.json
diff --git 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
diff --git 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
@@ -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,16 +52,16 @@ $: 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}
     <div class="z-10 ml-5 -mb-5 hidden h-5 flex-row justify-end pl-1 group-hover/bookmark:flex">
       <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
@@ -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
@@ -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
@@ -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
@@ -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}