WIP: dark mode

src/app.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 $fa-font-path: "../node_modules/@fortawesome/fontawesome-free/webfonts";
 
 $family-sans-serif:
@@ -66,6 +68,26 @@ $menu-item-active-background-color: $link-light;
 @import "bulma-prefers-dark/bulma-prefers-dark.sass";
 
 @media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+  }
+
+  .box {
+    box-shadow: none;
+  }
+
+  .has-text-white {
+    color: $black !important;
+  }
+
+  .has-text-black {
+    color: $white !important;
+  }
+
+  .has-text-black-ter {
+    color: $white-ter !important;
+  }
+
   .has-background-white-bis {
     background-color: $black-bis !important;
   }
@@ -83,6 +105,67 @@ $menu-item-active-background-color: $link-light;
     .navbar {
       background-color: $black-bis !important;
     }
+
+    navbar.is-spaced .navbar-dropdown,
+    .navbar-dropdown.is-boxed {
+      box-shadow:
+        0 8px 8px rgba(0, 0, 0, 1),
+        0 0 0 1px rgba(0, 0, 0, 1);
+    }
+
+    .tippy-box[data-theme~="light"] {
+      background-color: $black;
+      box-shadow:
+        0 8px 8px rgba(0, 0, 0, 1),
+        0 0 0 1px rgba(0, 0, 0, 1);
+    }
+
+    .tippy-box[data-theme~="light"][data-placement^="top"] > .tippy-arrow:before {
+      border-top-color: $black;
+    }
+    .tippy-box[data-theme~="light"][data-placement^="bottom"] > .tippy-arrow:before {
+      border-bottom-color: $black;
+    }
+    .tippy-box[data-theme~="light"][data-placement^="left"] > .tippy-arrow:before {
+      border-left-color: $black;
+    }
+    .tippy-box[data-theme~="light"][data-placement^="right"] > .tippy-arrow:before {
+      border-right-color: $black;
+    }
+    .tippy-box[data-theme~="light"] > .tippy-backdrop {
+      background-color: $black;
+    }
+    .tippy-box[data-theme~="light"] > .tippy-svg-arrow {
+      fill: $black;
+    }
+
+    .tag:not(body).is-danger.is-light {
+      background-color: $danger;
+      color: $danger-light;
+    }
+
+    .tag:not(body).is-success.is-light {
+      background-color: $success;
+      color: $success-light;
+    }
+
+    .card {
+      box-shadow:
+        0 2px 3px rgba(0, 0, 0, 1),
+        0 0 0 1px rgba(0, 0, 0, 1);
+    }
+  }
+
+  .table td,
+  .table th {
+    border: 1px solid $grey-darker;
+    border-width: 0 0 1px;
+  }
+
+  .content table td,
+  .content table th {
+    border: 1px solid $grey-darker;
+    border-width: 0 0 1px;
   }
 }
 
@@ -157,6 +240,12 @@ body {
   }
 }
 
+@media (prefers-color-scheme: dark) {
+  .secondary-link {
+    color: $grey-light;
+  }
+}
+
 .inline-text text {
   font-size: 12px;
   font-weight: bold;
@@ -410,6 +499,12 @@ svg text {
   align-items: center;
 }
 
+@media (prefers-color-scheme: dark) {
+  .d3-calendar .weekdays div {
+    background: $black-ter;
+  }
+}
+
 .d3-calendar .days .date {
   display: flex;
   justify-content: center;
@@ -442,7 +537,14 @@ svg text {
 
 .level-item p.title {
   padding: 5px;
-  color: white;
+  color: $white;
+}
+
+@media (prefers-color-scheme: dark) {
+  .level-item p.title {
+    padding: 5px;
+    color: $black;
+  }
 }
 
 .navbar-item,

src/lib/components/LevelItem.svelte

@@ -13,10 +13,10 @@
       <span>{title}</span>
       <span
         title={subtitle}
-        class="tag ml-2 has-text-weight-semibold"
-        style="padding: 5px; color: white; background-color: {subcolor};">{subvalue}</span
+        class="tag ml-2 has-text-weight-semibold has-text-white"
+        style="padding: 5px; background-color: {subcolor};">{subvalue}</span
       >
     </p>
-    <p class="title" style="padding: 5px; color: white; background-color: {color};">{value}</p>
+    <p class="title has-text-white" style="padding: 5px; background-color: {color};">{value}</p>
   </div>
 </div>

src/lib/components/Navbar.svelte

@@ -276,14 +276,22 @@
 </div>
 
 <style lang="scss">
+  @import "bulma/sass/utilities/_all.sass";
+
   .breadcrumb.has-chevron-separator li + li::before {
     content: "";
     color: hsl(229deg, 53%, 53%);
   }
 
   a.is-inactive {
-    color: hsl(0deg, 0%, 21%);
+    color: $grey-darker;
     cursor: default;
     pointer-events: none;
   }
+
+  @media (prefers-color-scheme: dark) {
+    a.is-inactive {
+      color: $grey-lighter;
+    }
+  }
 </style>

src/lib/components/RecurringCard.svelte

@@ -124,4 +124,14 @@
       background-color: $white-ter;
     }
   }
+
+  @media (prefers-color-scheme: dark) {
+    .custom-arrow {
+      background-color: $black-bis;
+
+      &:hover {
+        background-color: $black-ter;
+      }
+    }
+  }
 </style>

src/lib/utils.ts

@@ -751,7 +751,7 @@ export function setHtml(selector: string, value: string, color?: string) {
   if (color) {
     node.style.backgroundColor = color;
     node.style.padding = "5px";
-    node.style.color = "white";
+    node.classList.add("has-text-white");
   }
   node.innerHTML = value;
 }

src/routes/+page.svelte

@@ -114,7 +114,7 @@
                         <div class="level-item is-narrow has-text-centered">
                           <div>
                             <p class="heading">XIRR</p>
-                            <p class="title has-text-black">{formatFloat(xirr)}</p>
+                            <p class="title has-text-black-ter">{formatFloat(xirr)}</p>
                           </div>
                         </div>
                       </nav>
@@ -143,9 +143,8 @@
               <span
                 ><a class="secondary-link" href="/expense/monthly">Expenses</a>
                 <span
-                  class="is-size-5 has-text-weight-bold px-2"
-                  style="background-color: {COLORS.lossText}; color: white;"
-                  >{formatCurrency(totalExpense)}</span
+                  class="is-size-5 has-text-weight-bold px-2 has-text-white"
+                  style="background-color: {COLORS.lossText};">{formatCurrency(totalExpense)}</span
                 ></span
               >
               <LastNMonths n={3} bind:value={month} />