ui fix

package-lock.json

@@ -50,7 +50,7 @@
         "lucide-svelte": "^0.438.0",
         "luxon": "^3.5.0",
         "memoize-one": "^6.0.0",
-        "mode-watcher": "^0.5.1",
+        "mode-watcher": "^0.5.0",
         "object-to-formdata": "^4.5.1",
         "parse5": "^7.1.2",
         "pocketbase": "^0.25.2",
@@ -6921,9 +6921,9 @@
       }
     },
     "node_modules/mode-watcher": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/mode-watcher/-/mode-watcher-0.5.1.tgz",
-      "integrity": "sha512-adEC6T7TMX/kzQlaO/MtiQOSFekZfQu4MC+lXyoceQG+U5sKpJWZ4yKXqw846ExIuWJgedkOIPqAYYRk/xHm+w==",
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/mode-watcher/-/mode-watcher-0.5.0.tgz",
+      "integrity": "sha512-5E6fh/aXhAVv+U+DbeM0hCmskQE9u7WSmvnCRijJB/MJu7HtB73sjiCaZ9n1M8QHmzLrBFo8XBAUcWXkDm8Z9A==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {

package.json

@@ -50,7 +50,7 @@
     "lucide-svelte": "^0.438.0",
     "luxon": "^3.5.0",
     "memoize-one": "^6.0.0",
-    "mode-watcher": "^0.5.1",
+    "mode-watcher": "^0.5.0",
     "object-to-formdata": "^4.5.1",
     "parse5": "^7.1.2",
     "pocketbase": "^0.25.2",

src/app.html

@@ -7,6 +7,7 @@
     <link rel="manifest" href="%sveltekit.assets%/manifest.json" />
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
     %sveltekit.head%
   </head>
 

src/lib/components/Options/GreekByExpiry.svelte

@@ -168,7 +168,7 @@
         gridLineWidth: 1,
         gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
         labels: {
-          style: { color: "white" },
+          style: { color: $mode === "light" ? "black" : "white" },
           formatter: function () {
             return abbreviateNumber(this.value);
           },

src/lib/components/Options/GreekExposure.svelte

@@ -193,7 +193,7 @@
           gridLineWidth: 1,
           gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
           labels: {
-            style: { color: "white" },
+            style: { color: $mode === "light" ? "black" : "white" },
             formatter: function () {
               return abbreviateNumber(this.value);
             },

src/routes/+layout.svelte

@@ -272,6 +272,10 @@
   </script>
 </svelte:head>
 
+<ModeWatcher defaultMode={data?.themeMode} />
+
+
+
 <div class="app text-muted dark:text-white {$page?.url?.pathname === '/' ? 'bg-[#000]' : ''}">
   <div class="flex min-h-screen w-full flex-col bg-white dark:bg-default">
     <div class="w-full">
@@ -1231,7 +1235,7 @@
 
 
               <slot />
-              <ModeWatcher defaultMode={data?.themeMode} disableTransitions={true}/>
+ 
               <Toaster position="top-center" />
               {#if Cookie && $showCookieConsent === true}
                 <Cookie />