fix(settings): current active color theme

Author: iamludal

src/components/App.svelte

@@ -4,20 +4,19 @@
   import settings from '../store/settings';
   import { onMount } from 'svelte';
   import { _ } from 'svelte-i18n';
-  import Color from 'color';
   import { fetchWordsList } from '../services/words';
   import { loadSettings } from '../services/settings';
+  import { colorSecondary } from '../ts/constants';
 
   let wordsPromise = fetchWordsList();
   let lang = loadSettings().language;
 
   onMount(() => {
     settings.subscribe(newSettings => {
       const { style } = document.documentElement;
-      const white = Color('white');
       style.setProperty('--color-primary', newSettings.colorTheme.hex());
-      style.setProperty('--color-secondary', white.hex());
-      style.setProperty('--color-secondary-transparent', white.alpha(0.2).string());
+      style.setProperty('--color-secondary', colorSecondary.hex());
+      style.setProperty('--color-secondary-transparent', colorSecondary.alpha(0.2).string());
       if (newSettings.language !== lang) {
         lang = newSettings.language;
         wordsPromise = fetchWordsList();

src/components/Loader.svelte

@@ -13,7 +13,7 @@
     width: 64px;
     height: 64px;
     border: 7px solid;
-    border-color: white transparent white transparent;
+    border-color: var(--color-secondary) transparent var(--color-secondary) transparent;
     border-radius: var(--radius-high);
     pointer-events: none;
     animation: spin 1s forwards infinite linear;

src/components/Settings.svelte

@@ -3,7 +3,13 @@
   import { fade } from 'svelte/transition';
   import IoMdClose from 'svelte-icons/io/IoMdClose.svelte';
   import IconButton from './shared/IconButton.svelte';
-  import { defaultColors, LANGS } from '../ts/constants';
+  import {
+    colorSecondary,
+    COLOR_HEX_REGEX,
+    defaultColors,
+    LANGS,
+    MIN_CONTRAST,
+  } from '../ts/constants';
   import settings, { Settings } from '../store/settings';
   import Icon from './shared/Icon.svelte';
   import IoMdCheckmark from 'svelte-icons/io/IoMdCheckmark.svelte';
@@ -15,6 +21,8 @@
   let localSettings: Settings = loadSettings();
 
   let colorInput = localSettings.colorTheme.hex();
+  let colorErrorMessageKey: string | null;
+
   $: colorErrorMessageKey = getColorErrorMessageKey(colorInput);
 
   const dispatch = createEventDispatcher();
@@ -28,15 +36,13 @@
   };
 
   const getColorErrorMessageKey = (colorStr: string) => {
-    let color: Color;
-
-    try {
-      color = Color(colorStr);
-    } catch {
+    if (!colorStr.match(COLOR_HEX_REGEX)) {
       return 'color-invalid';
     }
 
-    if (color.contrast(Color('#fff')) < 1.5) {
+    const color = Color(colorStr);
+
+    if (color.contrast(colorSecondary) < MIN_CONTRAST) {
       return 'color-too-bright';
     }
 
@@ -46,12 +52,11 @@
   const handleColorInputChange = () => {
     if (colorErrorMessageKey !== null) return;
 
-    updateColorTheme(localSettings.colorTheme);
+    updateColorTheme(Color(colorInput));
   };
 
   const updateColorTheme = (color: Color) => {
     setColorTheme(color);
-    console.log(color.hex());
     colorInput = color.hex();
   };
 
@@ -123,11 +128,11 @@
         </div>
         {#each defaultColors as color}
           <div
-            class={`color ${localSettings.colorTheme === color ? 'color-active' : ''}`}
+            class={`color ${color.hex() === colorInput ? 'color-active' : ''}`}
             style={`--color: ${color}`}
             on:click={() => updateColorTheme(color)}
           >
-            {#if localSettings.colorTheme === color}
+            {#if color.hex() === colorInput}
               <Icon icon={IoMdCheckmark} />
             {/if}
           </div>

src/ts/constants.ts

@@ -2,6 +2,12 @@ import Color from 'color';
 
 export const defaultColors = ['#3498db', '#313131', '#c77a99'].map(color => Color(color));
 
+export const colorSecondary = Color('white');
+
+export const MIN_CONTRAST = 1.5;
+
+export const COLOR_HEX_REGEX = /^#[0-9a-f]{3}([0-9a-f]{3})?$/i;
+
 export const LANGS = {
   en: 'English',
   fr: 'Français',