Dark mode

src/frets/Chord.svelte

@@ -58,7 +58,6 @@
     const chart = new SVGuitarChord(el);
     chart
       .configure({
-        title: chordName,
         strings: tuning.length,
         frets: frets,
         position: chordData.position,
@@ -70,7 +69,7 @@
         fretSize: 1.1,
         fretColor: chordColor,
         color: chordColor,
-        titleFontSize: 28,
+        titleFontSize: 40,
         titleBottomMargin: 10,
         fretLabelFontSize: 20,
         tuning,
@@ -88,18 +87,27 @@
   });
 </script>
 
-<button
-  class="flex cursor-pointer w-full h-full"
-  aria-label="Play {chordName} chord at position {position}"
-  onclick={playChord}>
-  <div
+<div
+  class="flex flex-col justify-center items-center relative w-full h-full p-1">
+  <a
     bind:clientWidth={width}
     bind:clientHeight={height}
     bind:this={el}
     data-chord={chordName}
+    href="#"
+    title="Chord diagram for {chordName}"
     class="w-full h-full flex">
+  </a>
+  <div class="flex w-full justify-center items-center py-2">
+    <button
+      class="flex justify-center items-center gap-1 w-full h-fit p-1 mx-5 text-xs cursor-pointer border border-gray-500 bg-gray-200 rounded-full hover:text-white hover:bg-green-600 hover:border-green-800"
+      aria-label="Play {chordName} chord at position {position}"
+      onclick={playChord}>
+      <div class="font-medium">{chordName}</div>
+      <span>▶</span>
+    </button>
   </div>
-</button>
+</div>
 
 <style>
   :global(.barre-rectangle) {

src/lib/FretNote.svelte

@@ -42,7 +42,7 @@
   }
 
   .in-scale .fret-note-background {
-    @apply fill-sky-600 stroke-0 stroke-sky-800 dark:fill-blue-900 dark:stroke-sky-800;
+    @apply fill-blue-400 stroke-0 stroke-sky-800 dark:fill-blue-900 dark:stroke-sky-800;
   }
 
   .in-scale .fret-note-text {

src/lib/ScaleChords.svelte

@@ -25,7 +25,7 @@
   class="text-xs text-gray-500 grid grid-cols-4 md:grid-cols-7 gap-5 dark:text-gray-400">
   {#each chords as chord}
     <div
-      class="bg-gray-100 py-5 transition-all dark:bg-blue-900/20 dark:border dark:border-blue-900/50 dark:hover:bg-blue-900/40 rounded">
+      class="bg-gray-50 border border-transparent hover:bg-gray-100 hover:border-gray-200 transition-all dark:bg-blue-900/20 dark:border dark:border-blue-900/50 dark:hover:bg-blue-900/40 rounded">
       <Chord chordName={chord} />
     </div>
   {/each}

src/lib/SystemSelector.svelte

@@ -18,7 +18,7 @@
     </select>
   </div>
 
-  <div class="flex items-center space-x-2">
+  <div class="flex items-start space-x-2">
     {#if system === "CAGED"}
       {#each cagedMap as [pos, label]}
         <label
@@ -40,6 +40,11 @@
           <span>{index + 1}</span></label>
       {/each}
     {/if}
+    {#if position !== null}
+      <button
+        class="flex justify-center items-center text-xs text-gray-500 bg-gray-300 border border-gray-500 rounded-full size-5 scale-75 cursor-pointer hover:bg-gray-100"
+        onclick={() => (position = null)}>✕</button>
+    {/if}
   </div>
 </div>
 

src/routes/+page.svelte

@@ -104,7 +104,7 @@
 </svelte:head>
 
 <div
-  class="flex bg-gray-50 *:p-5 *:border-r *:border-gray-200 border-b border-gray-300 dark:bg-blue-950 dark:*:border-blue-900 dark:border-blue-900">
+  class="flex items-center bg-gray-50 *:p-5 *:border-r *:border-gray-200 border-b border-gray-300 dark:bg-blue-950 dark:*:border-blue-900 dark:border-blue-900">
   <div>
     <TuningSelector bind:value={tuning} />
   </div>
@@ -127,7 +127,7 @@
 </div>
 
 {#if triads.length > 0}
-  <div class="relative bg-gray-50 p-5 dark:bg-transparent dark:border-blue-900">
+  <div class="relative px-5 dark:border-blue-900">
     <ScaleChords scale={scaleObj} />
   </div>
 {/if}