update blue theme, some other theme updates

public/global.css

@@ -105,27 +105,36 @@ svg {
     -moz-osx-font-smoothing: grayscale
 }
 
-/* dark green themes */
-.greenTheme {
+
+/* dark blue theme */
+.theme-2, .theme-2 .invertTheme {
+	filter: grayscale(100%) sepia(15%) brightness(100%) hue-rotate(325deg) saturate(625%) invert(100%);
+	-webkit-filter: grayscale(100%) sepia(15%) brightness(100%) hue-rotate(325deg) saturate(625%) invert(100%);
+	-moz-filter: grayscale(100%) sepia(15%) brightness(100%) hue-rotate(325deg) saturate(625%) invert(100%);
+}
+
+/* dark green theme */
+.theme-3, .theme-3 .invertTheme {
 	filter: grayscale(100%) sepia(5%) brightness(95%) hue-rotate(315deg) saturate(625%) invert(100%);
 	-webkit-filter: grayscale(100%) sepia(5%) brightness(95%) hue-rotate(315deg) saturate(625%) invert(100%);
 	-moz-filter: grayscale(100%) sepia(5%) brightness(95%) hue-rotate(315deg) saturate(625%) invert(100%);
 }
 
-/* sepia theme */
-.sepiaTheme {
-	filter: brightness(70%) contrast(145%) saturate(0%) sepia(65%);
-	-webkit-filter: brightness(70%) contrast(145%) saturate(0%) sepia(65%);
-	-moz-filter: brightness(70%) contrast(145%) saturate(0%) sepia(65%);
-}
-
 /* pure black theme (OLED) */
-.pureBlackTheme {
+.theme-4, .theme-4 .invertTheme {
 	filter: brightness(70%) contrast(300%) invert(100%) saturate(0%);
 	-webkit-filter: brightness(70%) contrast(300%) invert(100%) saturate(0%);
 	-moz-filter: brightness(70%) contrast(300%) invert(100%) saturate(0%);
 }
 
-.pureBlackTheme .custom-backdrop {
+.theme-4 .custom-backdrop {
 	filter: invert(90%)
-}
+}
+
+/* sepia theme */
+.theme-5, .theme-5 .invertTheme {
+	filter: brightness(70%) contrast(145%) saturate(0%) sepia(65%);
+	-webkit-filter: brightness(70%) contrast(145%) saturate(0%) sepia(65%);
+	-moz-filter: brightness(70%) contrast(145%) saturate(0%) sepia(65%);
+}
+

public/index.html

@@ -22,17 +22,7 @@
     <script>
       try {
         const websiteTheme = JSON.parse(localStorage.getItem("userSettings")).displaySettings.websiteTheme;
-
-        let theme;
-
-        if (websiteTheme === 1) theme = "";
-        else if (websiteTheme === 2) theme = "dark";
-        else if (websiteTheme === 3) theme = "invert";
-        else if (websiteTheme === 4) theme = "sepiaTheme";
-        else if (websiteTheme === 5) theme = "greenTheme";
-        else if (websiteTheme === 6) theme = "pureBlackTheme";
-
-        document.documentElement.classList = theme;
+        document.documentElement.classList = `theme-${websiteTheme}`;
       } catch (error) {}
     </script>
   </head>

src/components/ui/Drawer.svelte

@@ -1,6 +1,6 @@
 <script>
   import { currentPageStore, wordTypeStore, displayTypeStore, websiteThemeStore, wordTranslationStore, wordTranslationEnabledStore, wordTransliterationEnabledStore, verseTranslationsStore, reciterStore, playbackSpeedStore, userSettingsStore } from "$utils/stores";
-  import { displayOptions, selectableFontTypes, selectableVerseTranslations, selectableWordTranslations, selectableReciters, selectablePlaybackSpeeds } from "$data/options";
+  import { displayOptions, selectableFontTypes, selectableThemes, selectableVerseTranslations, selectableWordTranslations, selectableReciters, selectablePlaybackSpeeds } from "$data/options";
   import { updateSettings } from "$utils/updateSettings";
   import { disabledElement, buttonElement } from "$utils/commonStyles";
 
@@ -22,15 +22,12 @@
 
   <p class="mb-6 text-xs text-gray-500 dark:text-gray-400">Change the website settings like the theme, display, translations or the audio settings.</p>
 
-  <div class="flex flex-col justify-between items-center py-5 space-y-2 text-xs border-gray-200 dark:border-slate-700">
-    <span class="block text-gray-900 dark:text-slate-400">Theme</span>
+  <div class="flex flex-col justify-between items-center py-5 space-y-4 text-xs border-gray-200 dark:border-slate-700">
+    <span class="block text-gray-900 dark:text-slate-400">Theme: {selectableThemes[$websiteThemeStore].name}</span>
     <div class="inline-flex rounded-md shadow-sm" role="group">
-      <button type="button" on:click={() => updateSettings({ type: "websiteTheme", value: 1 })} class="{$websiteThemeStore === 1 && 'border-gray-900'} inline-flex items-center px-4 py-2 text-gray-900 bg-white border rounded-l-lg hover:bg-[#ebebeb] focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-slate-700 dark:text-slate-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white"> 1 </button>
-      <button type="button" on:click={() => updateSettings({ type: "websiteTheme", value: 2 })} class="{$websiteThemeStore === 2 && 'border-gray-900'} inline-flex items-center px-4 py-2 text-gray-900 bg-white border hover:bg-[#ebebeb] focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-slate-700 dark:text-slate-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white"> 2 </button>
-      <button type="button" on:click={() => updateSettings({ type: "websiteTheme", value: 3 })} class="{$websiteThemeStore === 3 && 'border-gray-900'} inline-flex items-center px-4 py-2 text-gray-900 bg-white border hover:bg-[#ebebeb] focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-slate-700 dark:text-slate-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white"> 3 </button>
-      <button type="button" on:click={() => updateSettings({ type: "websiteTheme", value: 4 })} class="{$websiteThemeStore === 4 && 'border-gray-900'} inline-flex items-center px-4 py-2 text-gray-900 bg-white border hover:bg-[#ebebeb] focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-slate-700 dark:text-slate-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white"> 4 </button>
-      <button type="button" on:click={() => updateSettings({ type: "websiteTheme", value: 5 })} class="{$websiteThemeStore === 5 && 'border-gray-900'} inline-flex items-center px-4 py-2 text-gray-900 bg-white border hover:bg-[#ebebeb] focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-slate-700 dark:text-slate-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white"> 5 </button>
-      <button type="button" on:click={() => updateSettings({ type: "websiteTheme", value: 6 })} class="{$websiteThemeStore === 6 && 'border-gray-900'} inline-flex items-center px-4 py-2 text-gray-900 bg-white border rounded-r-lg hover:bg-[#ebebeb] focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-slate-700 dark:text-slate-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white"> 6 </button>
+      {#each Array.from(Array(5 + 1).keys()).slice(1) as theme}
+        <button type="button" on:click={() => updateSettings({ type: "websiteTheme", value: theme })} class="{$websiteThemeStore === theme && 'border-gray-900'} inline-flex items-center px-4 py-2 text-gray-900 bg-white border hover:bg-[#ebebeb] focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-slate-700 dark:text-slate-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white"> {theme} </button>
+      {/each}
     </div>
   </div>
 

src/data/options.js

@@ -13,6 +13,14 @@ export const selectableFontTypes = {
   4: { id: 4, font: "Uthmanic Hafs Mushaf V4 (Tajweed)" },
 };
 
+export const selectableThemes = {
+  1: { id: 1, name: "Light" },
+  2: { id: 2, name: "Blue" },
+  3: { id: 3, name: "Green" },
+  4: { id: 4, name: "Black" },
+  5: { id: 5, name: "Sepia" },
+};
+
 export const selectableVerseTranslations = {
   1: {
     id: 1,

src/utils/updateSettings.js

@@ -23,19 +23,8 @@ export function updateSettings(props) {
     case "websiteTheme":
       websiteThemeStore.set(props.value);
       userSettings.displaySettings.websiteTheme = props.value;
-
-      let theme;
-
       document.documentElement.classList = "";
-
-      if (props.value === 1) theme = "";
-      else if (props.value === 2) theme = "dark";
-      else if (props.value === 3) theme = "invert";
-      else if (props.value === 4) theme = "sepiaTheme";
-      else if (props.value === 5) theme = "greenTheme";
-      else if (props.value === 6) theme = "pureBlackTheme";
-
-      document.documentElement.classList = theme;
+      document.documentElement.classList = `theme-${props.value}`;
       break;
 
     // for word translation view