Adjust theme colors

Co-authored-by: Brian Ginsburg <gins@brianginsburg.com>

src/components/auth/Register.svelte

@@ -137,7 +137,7 @@
         <!-- Warning when "This is a shared computer" is checked -->
         <label
           for="shared-computer"
-          class="cursor-pointer ml-1 text-sm text-slate-700 grid-inline"
+          class="cursor-pointer ml-1 text-sm grid-inline"
         >
           This is a shared computer
         </label>

src/components/icons/CheckThinIcon.svelte

@@ -1,3 +1,7 @@
+<script lang="ts">
+  export let color: string
+</script>
+
 <svg
   width="28px"
   height="28px"
@@ -10,7 +14,7 @@
     <g fill="none" fill-rule="nonzero">
       <path
         d="M4.03033009,13.4696699 C3.73743687,13.1767767 3.26256313,13.1767767 2.96966991,13.4696699 C2.6767767,13.7625631 2.6767767,14.2374369 2.96966991,14.5303301 L9.96966991,21.5303301 C10.2625631,21.8232233 10.7374369,21.8232233 11.0303301,21.5303301 L25.0303301,7.53033009 C25.3232233,7.23743687 25.3232233,6.76256313 25.0303301,6.46966991 C24.7374369,6.1767767 24.2625631,6.1767767 23.9696699,6.46966991 L10.5,19.9393398 L4.03033009,13.4696699 Z"
-        fill="#14532d"
+        fill={color}
       />
     </g>
   </g>

src/components/icons/XThinIcon.svelte

@@ -1,3 +1,7 @@
+<script lang="ts">
+  export let color: string
+</script>
+
 <svg
   width="15px"
   height="15px"
@@ -9,6 +13,6 @@
     fill-rule="evenodd"
     clip-rule="evenodd"
     d="M6.7929 7.49998L1.14645 1.85353L1.85356 1.14642L7.50001 6.79287L13.1465 1.14642L13.8536 1.85353L8.20711 7.49998L13.8536 13.1464L13.1465 13.8535L7.50001 8.20708L1.85356 13.8535L1.14645 13.1464L6.7929 7.49998Z"
-    fill="#7f1d1d"
+    fill={color}
   />
 </svg>

src/components/notifications/Toast.svelte

@@ -3,6 +3,7 @@
   import { quintOut } from 'svelte/easing'
   import { fade } from 'svelte/transition'
 
+  import { theme } from '../../stores'
   import CheckThinIcon from '$components/icons/CheckThinIcon.svelte'
   import XThinIcon from '$components/icons/XThinIcon.svelte'
 
@@ -26,9 +27,9 @@
   >
     <div>
       {#if kind === 'success'}
-        <CheckThinIcon />
+        <CheckThinIcon color={$theme === 'light' ? '#b8ffd3' : '#002e12'} />
       {:else if kind === 'error'}
-        <XThinIcon />
+        <XThinIcon color={$theme === 'light' ? '#ffd6d7' : '#fec3c3'} />
       {/if}
       <span class="pl-1">{message}</span>
     </div>

tailwind.config.cjs

@@ -7,16 +7,16 @@ module.exports = {
     themes: [
       {
         dark: {
-          primary: "#43919b",
+          primary: "#3b82f6",
           secondary: "#30aadd",
           accent: "#00ffc6",
           neutral: "#282828",
           info: "#bfdbfe",
-          success: "#bbf7d0",
+          success: "#22c55e",
           warning: "#fdba74",
-          error: "#fecaca",
+          error: "#ef4444",
-          "base-content": "#ffffff",
+          "base-content": "#f8fafc", // Base text content color
-          "base-100": "#111111",
+          "base-100": "#0f172a", // Base background color
           "--rounded-box": "16px",
           "--rounded-btn": "8px",
           "--rounded-badge": "2px",
@@ -24,16 +24,16 @@ module.exports = {
           "--btn-text-case": "normal-case"
         },
         light: {
-          primary: "#407FF3",
+          primary: "#3b82f6",
           secondary: "#30aadd",
           accent: "#00ffc6",
           neutral: "#e5e5e5",
           info: "#bfdbfe",
-          success: "#bbf7d0",
+          success: "#15803d",
           warning: "#fdba74",
-          error: "#fecaca",
+          error: "#b91c1c",
-          "base-content": "#000000",
+          "base-content": "#0f172a", // Base text content color
-          "base-100": "#ffffff",
+          "base-100": "#f8fafc", // Base background color
           "--rounded-box": "16px",
           "--rounded-btn": "8px",
           "--rounded-badge": "2px",