Dark mode

Author: breadthe

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.4.0
+### Features
+* Dark mode.
+### Fixes
+* Prevent the feed from refreshing when closing Settings.
+
 ## 0.3.0
 ### Features
 * Settings.

src/Main.svelte

@@ -1,15 +1,14 @@
 <script lang="ts">
   import appLogo from "./assets/128x128@2x.png"
-  import { feedDownloadError, fetchingFeed, feedData, refreshInterval, refreshIntervalTimer } from "./store"
+  import { feedDownloadError, fetchingFeed, feedData } from "./store"
   import { tooltip } from "./tooltip"
-  import { refreshFeed, startFeedRefreshInterval } from "./feed"
+  import { refreshFeed } from "./feed"
   import { round1, timestampToLocalString } from "./utils"
   import SettingsButton from "./lib/SettingsButton.svelte"
-
 </script>
 
 <main class="w-full overflow-hide">
-  <header class="sticky top-0 z-10 bg-gray-100">
+  <header class="sticky top-0 z-10 bg-gray-100 dark:bg-gray-900">
     <div class="flex items-center justify-between gap-4 px-4 py-2">
       <button
         on:click={refreshFeed}
@@ -22,31 +21,33 @@
       </button>
 
       {#if $fetchingFeed}
-        <small class="font-xs text-gray-600">fetching data...</small>
+        <small class="font-xs dark:text-gray-400">fetching data...</small>
       {/if}
 
       {#if $feedDownloadError}
         <small class="font-xs text-red-600">{$feedDownloadError}</small>
       {/if}
 
-      <!-- <small class="font-xs text-gray-600" title={timestampToLocalString($lastFetchedAt)}>
+      <!-- <small class="font-xs dark:text-gray-400" title={timestampToLocalString($lastFetchedAt)}>
         {diffForHumans($lastFetchedAt)}
       </small> -->
 
       <SettingsButton />
     </div>
 
     {#if $feedData && $feedData.type === "FeatureCollection"}
-      <div class="w-full bg-white p-2 text-sm border-b">
+      <div class="w-full bg-white dark:bg-gray-800 p-2 text-sm border-b dark:border-gray-600">
         {$feedData.metadata.title} - <small class="font-bold text-xs">{$feedData.metadata.count}</small> events
       </div>
     {/if}
   </header>
 
   {#if $feedData && $feedData.type === "FeatureCollection"}
-    <div class="w-full h-full min-h-screen bg-white">
+    <div class="w-full h-full min-h-screen bg-white dark:bg-gray-800">
       {#each $feedData.features as feature}
-        <div class="flex items-center justify-between border-b hover:bg-gray-100 p-2">
+        <div
+          class="flex items-center justify-between border-b dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-900 p-2"
+        >
           <div class="w-full flex items-center gap-4">
             <div class="w-8 text-center">
               <span class:font-bold={feature.properties.mag >= 4.5} class:text-red-600={feature.properties.mag >= 7}>
@@ -57,20 +58,20 @@
               <p class:font-bold={feature.properties.mag >= 4.5} class:text-red-600={feature.properties.mag >= 7}>
                 {feature.properties.place}
               </p>
-              <small class="font-xs text-gray-600">{timestampToLocalString(feature.properties.time)}</small>
+              <small class="font-xs dark:text-gray-400">{timestampToLocalString(feature.properties.time)}</small>
             </div>
           </div>
 
           <div class="w-24 text-right">
-            <small class="font-xs text-gray-600" title="Depth">
+            <small class="font-xs dark:text-gray-400" title="Depth">
               {round1(feature.geometry.coordinates[2])} km
             </small>
           </div>
         </div>
       {/each}
     </div>
   {:else}
-    <p class="mt-36 text-center text-gray-600">💡 click the logo to refresh earthquake data</p>
+    <p class="mt-36 text-center dark:text-gray-400">💡 click the logo to refresh earthquake data</p>
   {/if}
 </main>
 

src/Settings.svelte

@@ -34,7 +34,7 @@
 </script>
 
 <main class="w-full overflow-hide">
-  <header class="sticky top-0 z-10 bg-gray-100">
+  <header class="sticky top-0 z-10 bg-gray-100 dark:bg-gray-900">
     <div class="flex items-center justify-between gap-4 px-4 py-2">
       <button
         on:click={closeSettings}
@@ -49,17 +49,17 @@
     </div>
   </header>
 
-  <section class="w-full h-full bg-white">
+  <section class="w-full h-full bg-white dark:bg-gray-800">
     <!-- Theme -->
-    <div class="w-full flex items-center gap-4 border-b p-2">
+    <div class="w-full flex items-center gap-4 border-b dark:border-gray-600 p-2">
       <div class="w-1/2">
         <h2 class="font-bold text-right">Theme</h2>
       </div>
       <div class="w-1/2">
         <select
           bind:value={selectedTheme}
           on:change={saveTheme}
-          class="bg-white appearance-none px-2 py-1 border rounded"
+          class="bg-white dark:bg-gray-800 appearance-none px-2 py-1 border dark:border-gray-600 rounded"
         >
           {#each preferences.themes as theme}
             <option value={theme.value}>{theme.label}</option>
@@ -69,7 +69,7 @@
     </div>
 
     <!-- Feed refresh interval -->
-    <div class="w-full flex items-center gap-4 border-b p-2">
+    <div class="w-full flex items-center gap-4 border-b dark:border-gray-600 p-2">
       <div class="w-1/2">
         <h2 class="font-bold text-right">Feed refresh interval (s)</h2>
       </div>
@@ -80,7 +80,7 @@
           step="1"
           bind:this={refreshIntervalInput}
           value={$refreshInterval}
-          class="w-16 border px-2 py-1 rounded"
+          class="w-16 bg-white dark:bg-gray-800 border dark:border-gray-600 px-2 py-1 rounded"
         />
         <button
           on:click={saveRefreshInterval}

src/app.postcss

@@ -14,6 +14,12 @@ body {
   min-height: 100vh;
 }
 
+html.dark body {
+    //color: rgba(255, 255, 255, 0.87);
+    color: theme("colors.gray.300");
+    background-color: theme("colors.gray.800");
+}
+
 @media (prefers-color-scheme: light) {
   :root {
       /* ... */

tailwind.config.cjs

@@ -1,11 +1,13 @@
 const config = {
-  content: ["./src/**/*.{html,js,svelte,ts}"],
+    darkMode: "class",
 
-  theme: {
-    extend: {},
-  },
+    content: ["./src/**/*.{html,js,svelte,ts}"],
 
-  plugins: [],
-};
+    theme: {
+        extend: {},
+    },
 
-module.exports = config;
+    plugins: [],
+}
+
+module.exports = config