dark mode spike

Author: caged

src/frets/Chord.svelte

@@ -1,7 +1,7 @@
 <script>
   import { getChordVariations } from "../frets/chordFingerings.js";
   import { tunings } from "$lib";
-  import { getContext } from "svelte";
+  import { getContext, onMount } from "svelte";
   import { SVGuitarChord } from "svguitar";
 
   let {
@@ -16,11 +16,15 @@
   let el = $state(null);
   let width = $state(0);
   let height = $state(0);
+  let isDarkMode = $state(false);
 
   const variations = $derived(getChordVariations(chordName, tuning));
   // Use the first variation
   const chordData = $derived(variations.positions[position]);
 
+  // Colors based on color scheme
+  const chordColor = $derived(isDarkMode ? "#e5e7eb" : "#333");
+
   function playChord() {
     if (chordData?.midi) {
       console.log("Playing chord:", chordName, "MIDI:", chordData.midi);
@@ -32,6 +36,17 @@
     }
   }
 
+  onMount(() => {
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    isDarkMode = mediaQuery.matches;
+
+    const handler = (e) => {
+      isDarkMode = e.matches;
+    };
+    mediaQuery.addEventListener("change", handler);
+    return () => mediaQuery.removeEventListener("change", handler);
+  });
+
   $effect(() => {
     // Redraw the chord whenever props or chordData changes
     if (!el || !chordData) return;
@@ -49,11 +64,12 @@
         position: chordData.position,
         strokeWidth: 1,
         fingerSize: 0.5,
-        fingerColor: "#333",
+        fingerColor: chordColor,
+        fingerTextColor: isDarkMode ? "#374151" : "#fff",
         fingerTextSize: 20,
         fretSize: 1.1,
-        fretColor: "#333",
-        color: "#333",
+        fretColor: chordColor,
+        color: chordColor,
         titleFontSize: 28,
         titleBottomMargin: 10,
         fretLabelFontSize: 20,
@@ -87,7 +103,7 @@
 
 <style>
   :global(.barre-rectangle) {
-    fill: #333 !important;
+    @apply fill-[#333] dark:fill-[#e5e7eb];
   }
 
   :global(.tuning) {

src/index.css

@@ -14,3 +14,8 @@
   --color-purple-900: #581c87;
   --color-purple-950: #3b0764;
 }
+
+/* Base styles for light/dark mode */
+html {
+  @apply bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100;
+}

src/lib/FretBoard.svelte

@@ -52,7 +52,7 @@
           <line
             x1={fretX(1) - margin.left}
             x2={width - margin.right - margin.left}
-            class="stroke-gray-100"
+            class="stroke-gray-100 dark:stroke-gray-600"
             stroke-width={lineW(i)} />
           {#each notes as stringNote}
             <g
@@ -99,12 +99,12 @@
   @reference "tailwindcss";
 
   .fret-label {
-    @apply text-xs fill-gray-800 text-center -translate-y-2;
+    @apply text-xs fill-gray-800 dark:fill-gray-200 text-center -translate-y-2;
     text-anchor: middle;
     dominant-baseline: ideographic;
   }
 
   .fret-line {
-    @apply fill-gray-400 stroke-0;
+    @apply fill-gray-400 dark:fill-gray-500 stroke-0;
   }
 </style>

src/lib/FretNote.svelte

@@ -26,19 +26,19 @@
   @reference "tailwindcss";
 
   .fret-note-background {
-    @apply fill-white;
+    @apply fill-white dark:fill-gray-800;
   }
 
   .fret-note-text {
-    @apply text-xs fill-gray-500;
+    @apply text-xs fill-gray-500 dark:fill-gray-400;
   }
 
   .fret-note:not(.in-position):is(.in-scale) .fret-note-background {
     @apply hidden;
   }
 
   .fret-note:not(.in-position):is(.in-scale) .fret-note-text {
-    @apply font-normal fill-gray-500;
+    @apply font-normal fill-gray-500 dark:fill-gray-400;
   }
 
   .in-scale .fret-note-background {
@@ -50,7 +50,11 @@
   }
 
   .in-scale[data-interval="1P"] circle {
-    @apply fill-gray-800 stroke-gray-900 stroke-2;
+    @apply fill-gray-800 dark:fill-gray-200 stroke-gray-900 dark:stroke-gray-100 stroke-2;
+  }
+
+  .in-scale[data-interval="1P"] .fret-note-text {
+    @apply dark:fill-gray-900;
   }
 
   .in-scale:is([data-interval^="3"], [data-interval^="5"]) circle {

src/lib/KeySelector.svelte

@@ -3,7 +3,7 @@
   let notes = ["C", "C#", "D", "Eb", "E", "F", "F#", "G", "Ab", "A", "Bb", "B"];
 </script>
 
-<select bind:value class="border-gray-300 w-fit">
+<select bind:value class="border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 w-fit">
   {#each notes as note}
     <option value={note}>
       {note}

src/lib/ScaleChords.svelte

@@ -21,9 +21,9 @@
   });
 </script>
 
-<div class="text-xs text-gray-500 grid grid-cols-4 md:grid-cols-7 gap-5">
+<div class="text-xs text-gray-500 dark:text-gray-400 grid grid-cols-4 md:grid-cols-7 gap-5">
   {#each chords as chord}
-    <div class="bg-gray-100 py-5">
+    <div class="bg-gray-100 dark:bg-gray-700 py-5">
       <Chord chordName={chord} />
     </div>
   {/each}

src/lib/ScaleInfo.svelte

@@ -43,7 +43,7 @@
           text-anchor="middle"
           dy="25"
           font-size="10"
-          class="text-black"
+          class="text-black dark:text-gray-200"
           fill="currentColor">{note.interval}</text>
       </g>
     {/each}

src/lib/ScaleSelector.svelte

@@ -17,7 +17,7 @@
   ];
 </script>
 
-<select bind:value class="border-gray-300 w-fit">
+<select bind:value class="border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 w-fit">
   {#each scales as scale}
     <option value={scale}>
       {scale}

src/lib/SystemSelector.svelte

@@ -12,7 +12,7 @@
 
 <div class="flex gap-5">
   <div>
-    <select bind:value={system} class="w-fit border border-gray-200">
+    <select bind:value={system} class="w-fit border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100">
       <option value="CAGED">CAGED</option>
       <option value="Pentatonic">Pentatonic</option>
     </select>
@@ -47,7 +47,7 @@
   @reference "tailwindcss";
 
   input[type="radio"] {
-    @apply border-gray-400 checked:bg-sky-600 checked:border-sky-600 active:bg-sky-200 focus:ring-1 focus:ring-sky-500;
+    @apply border-gray-400 checked:bg-sky-600 checked:border-sky-600 active:bg-sky-200 focus:ring-1 focus:ring-sky-500 dark:bg-gray-700 dark:border-gray-500 dark:active:bg-sky-700;
   }
 
   label {

src/lib/TuningSelector.svelte

@@ -4,7 +4,7 @@
   let { value = $bindable() } = $props();
 </script>
 
-<select bind:value name="tuning" class="w-full border border-gray-200">
+<select bind:value name="tuning" class="w-full border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100">
   {#each tunings as [name]}
     <option value={name}>{name}</option>
   {/each}