Remove hardcoded colors

Author: aidanpscott

src/lib/components/AlphabetStrip.svelte

@@ -10,10 +10,12 @@
     {#each alphabet as letter}
         <button
             class="px-3 py-2 text-sm font-bold border rounded-md bg-gray-100 hover:bg-gray-200 cursor-pointer snap-start
-            {activeLetter === letter ? 'bg-[#bb9ac2] border-black' : ''}
             sm:px-4 sm:py-3 sm:text-base
             md:px-5 md:py-4 md:text-base
             lg:px-6 lg:py-4 lg:text-lg"
+            style={activeLetter === letter
+                ? 'background-color: var(--TitleBackgroundColor); border-color: black;'
+                : ''}
             on:click={() => onLetterSelect(letter)}
         >
             {letter}

src/lib/components/WordNavigationStrip.svelte

@@ -84,7 +84,10 @@
     }
 </script>
 
-<div class="flex items-center justify-between bg-[#e1bee8] p-2 sticky top-0 z-10">
+<div
+    class="flex items-center justify-between p-2"
+    style="background-color: var(--TabBackgroundColor);"
+>
     <button
         class="flex items-center justify-center w-10 h-10 text-gray-700 hover:text-black disabled:opacity-50 disabled:cursor-not-allowed"
         on:click={goToPrevious}