move dark: to end

Author: caged

src/lib/FretBoard.svelte

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

src/lib/FretNote.svelte

@@ -26,38 +26,38 @@
   @reference "tailwindcss";
 
   .fret-note-background {
-    @apply fill-white dark:fill-gray-800;
+    @apply fill-transparent;
   }
 
   .fret-note-text {
-    @apply text-xs fill-gray-500 dark:fill-gray-400;
+    @apply text-xs fill-gray-500 dark:fill-blue-600;
   }
 
   .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 dark:fill-gray-400;
+    @apply font-normal fill-gray-500 dark:fill-blue-500;
   }
 
   .in-scale .fret-note-background {
-    @apply fill-sky-600 stroke-1 stroke-sky-800;
+    @apply fill-sky-600 stroke-1 stroke-sky-800 dark:fill-blue-900 dark:stroke-sky-800;
   }
 
   .in-scale .fret-note-text {
     @apply fill-white font-black;
   }
 
   .in-scale[data-interval="1P"] circle {
-    @apply fill-gray-800 dark:fill-gray-200 stroke-gray-900 dark:stroke-gray-100 stroke-2;
+    @apply fill-gray-800 stroke-gray-900 dark:fill-blue-600 dark:stroke-blue-300;
   }
 
   .in-scale[data-interval="1P"] .fret-note-text {
-    @apply dark:fill-gray-900;
+    @apply dark:fill-blue-100;
   }
 
   .in-scale:is([data-interval^="3"], [data-interval^="5"]) circle {
-    @apply fill-sky-800;
+    @apply fill-blue-700 stroke-blue-600;
   }
 </style>

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 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 w-fit">
+<select bind:value class="border-gray-300 w-fit dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100">
   {#each notes as note}
     <option value={note}>
       {note}

src/lib/ScaleChords.svelte

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

src/lib/ScaleSelector.svelte

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

src/routes/+page.svelte

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