From 8f69e96e0660015ce85fda892453052180418d6d Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Sun, 9 Mar 2025 00:44:30 +0100
Subject: [PATCH] ui fix

---
 src/app.css                                   |   2 +-
 src/lib/components/HoverStockChart.svelte     |   4 +-
 src/lib/components/Table/TableHeader.svelte   |   6 +-
 .../dropdown-menu-content.svelte              |   2 +-
 .../dropdown-menu-separator.svelte            |  16 +--
 .../dropdown-menu-sub-content.svelte          |   2 +-
 src/routes/+layout.svelte                     |   5 +-
 src/routes/market-flow/+layout.svelte         |  38 ++---
 src/routes/market-flow/+page.svelte           | 124 ++++++++--------
 .../market-flow/sector-flow/+page.svelte      | 133 ++++++++----------
 10 files changed, 162 insertions(+), 170 deletions(-)

diff --git a/src/app.css b/src/app.css
index 525e0344..61d870c3 100644
--- a/src/app.css
+++ b/src/app.css
@@ -55,7 +55,7 @@
 
   .table {
     tr {
-  @apply border-b border-gray-800;
+  @apply border-b border-gray-300 dark:border-gray-800;
 }
    
 }
diff --git a/src/lib/components/HoverStockChart.svelte b/src/lib/components/HoverStockChart.svelte
index b69322fd..f5d58fc7 100644
--- a/src/lib/components/HoverStockChart.svelte
+++ b/src/lib/components/HoverStockChart.svelte
@@ -179,7 +179,9 @@
       <HoverCard.Trigger
         class="rounded-sm underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8 focus-visible:outline-black"
       >
-        <a href={getHref(symbol)} class="sm:hover:text-white text-blue-400"
+        <a
+          href={getHref(symbol)}
+          class="sm:hover:text-muted dark:sm:hover:text-white text-blue-500 dark:text-blue-400"
           >{symbol?.length !== 0 ? symbol : "-"}</a
         >
       </HoverCard.Trigger>
diff --git a/src/lib/components/Table/TableHeader.svelte b/src/lib/components/Table/TableHeader.svelte
index 58e346de..bb0e359d 100644
--- a/src/lib/components/Table/TableHeader.svelte
+++ b/src/lib/components/Table/TableHeader.svelte
@@ -16,11 +16,13 @@
   `;
 </script>
 
-<tr class="bg-default border-b border-[#27272A]">
+<tr
+  class="bg-white dark:bg-default border-b border-[#27272A] text-muted dark:text-white"
+>
   {#each columns as column}
     <th
       on:click={() => sortData(column.key)}
-      class="cursor-pointer select-none text-white font-semibold text-sm whitespace-nowrap {column.align ===
+      class="cursor-pointer select-none font-semibold text-sm whitespace-nowrap {column.align ===
       'right'
         ? 'text-end'
         : 'text-start'}"
diff --git a/src/lib/components/shadcn/dropdown-menu/dropdown-menu-content.svelte b/src/lib/components/shadcn/dropdown-menu/dropdown-menu-content.svelte
index e386c34a..5332520d 100644
--- a/src/lib/components/shadcn/dropdown-menu/dropdown-menu-content.svelte
+++ b/src/lib/components/shadcn/dropdown-menu/dropdown-menu-content.svelte
@@ -17,7 +17,7 @@
   {transitionConfig}
   {sideOffset}
   class={cn(
-    "z-50 min-w-[8rem] no-scrollbar rounded-md border border-gray-500 bg-default p-1 text-white shadow-md focus:outline-hidden",
+    "z-50 min-w-[8rem] no-scrollbar rounded-md border border-gray-300 dark:border-gray-500 bg-white dark:bg-default p-1 text-muted dark:text-white shadow-md focus:outline-hidden",
     className,
   )}
   {...$$restProps}
diff --git a/src/lib/components/shadcn/dropdown-menu/dropdown-menu-separator.svelte b/src/lib/components/shadcn/dropdown-menu/dropdown-menu-separator.svelte
index 9143b8e5..3078b02a 100644
--- a/src/lib/components/shadcn/dropdown-menu/dropdown-menu-separator.svelte
+++ b/src/lib/components/shadcn/dropdown-menu/dropdown-menu-separator.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+  import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils";
 
-	type $$Props = DropdownMenuPrimitive.SeparatorProps;
+  type $$Props = DropdownMenuPrimitive.SeparatorProps;
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+  let className: $$Props["class"] = undefined;
+  export { className as class };
 </script>
 
 <DropdownMenuPrimitive.Separator
-	class={cn("-mx-1 my-1 h-px bg-gray-800", className)}
-	{...$$restProps}
-/>
\ No newline at end of file
+  class={cn("-mx-1 my-1 h-px bg-gray-300 dark:bg-gray-800", className)}
+  {...$$restProps}
+/>
diff --git a/src/lib/components/shadcn/dropdown-menu/dropdown-menu-sub-content.svelte b/src/lib/components/shadcn/dropdown-menu/dropdown-menu-sub-content.svelte
index 5022e734..a4f1e377 100644
--- a/src/lib/components/shadcn/dropdown-menu/dropdown-menu-sub-content.svelte
+++ b/src/lib/components/shadcn/dropdown-menu/dropdown-menu-sub-content.svelte
@@ -18,7 +18,7 @@
   {transition}
   {transitionConfig}
   class={cn(
-    "z-50 min-w-[8rem] rounded-md border bg-default p-1 text-white shadow-lg focus:outline-hidden",
+    "z-50 min-w-[8rem] rounded-md border bg-white dark:bg-default p-1 text-white shadow-lg focus:outline-hidden",
     className,
   )}
   {...$$restProps}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index b1ace209..aa628263 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -53,7 +53,6 @@
   import Newspaper from "lucide-svelte/icons/newspaper";
   import AudioLine from "lucide-svelte/icons/audio-lines";
   import Gem from "lucide-svelte/icons/gem";
-  import stocknear_logo from "$lib/images/stocknear_logo.png";
 
   export let data;
 
@@ -812,13 +811,13 @@
           </Sheet.Content>
         </Sheet.Root>
 
-        <a href="/" class="-ml-2 flex shrink-0">
+        <a href="/" class="-ml-2 flex flex-row items-center shrink-0">
           <img
             class="avatar w-9 3xl:w-10 rounded-full"
             src="/pwa-192x192.png"
             alt="Stocknear Logo"
           />
-          <span class="text-muted dark:text-white font-semibold ml-2 text-lg">Stocknear</span>
+          <span class="text-muted dark:text-white font-semibold ml-2 text-xl">Stocknear</span>
         </a>
 
         <div
diff --git a/src/routes/market-flow/+layout.svelte b/src/routes/market-flow/+layout.svelte
index 1bb3525a..eee8c48b 100644
--- a/src/routes/market-flow/+layout.svelte
+++ b/src/routes/market-flow/+layout.svelte
@@ -27,12 +27,12 @@
 </script>
 
 <section
-  class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden min-h-screen pb-40 pt-5 px-4 lg:px-3"
+  class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden min-h-screen pb-40 pt-5 px-4 lg:px-3 text-muted dark:text-white"
 >
   <div class="text-sm sm:text-[1rem] breadcrumbs">
     <ul>
-      <li><a href="/" class="text-gray-300">Home</a></li>
-      <li class="text-gray-300">Market Flow</li>
+      <li><a href="/" class="text-muted dark:text-gray-300">Home</a></li>
+      <li class="text-muted dark:text-gray-300">Market Flow</li>
     </ul>
   </div>
 
@@ -42,18 +42,20 @@
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
         <main class="w-full lg:w-3/4 lg:pr-10">
-          <h1 class="mb-3 text-white text-2xl sm:text-3xl font-bold">
+          <h1 class="mb-3 text-2xl sm:text-3xl font-bold">
             {activeIdx === 0 ? "Market Flow" : "Sector Flow"}
           </h1>
 
-          <nav class=" border-b-[2px] overflow-x-auto whitespace-nowrap">
-            <ul class="flex flex-row items-center w-full text-lg text-white">
+          <nav
+            class="border-[#2C6288] dark:border-white border-b-[2px] overflow-x-auto whitespace-nowrap"
+          >
+            <ul class="flex flex-row items-center w-full text-lg">
               {#each tabs as item, i}
                 <a
                   href={item?.path}
                   class="p-2 px-5 cursor-pointer {activeIdx === i
-                    ? 'text-white bg-primary/90 font-semibold'
-                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                    ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                    : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
                 >
                   {item.title}
                 </a>
@@ -67,38 +69,42 @@
         </main>
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
+            class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer sm:hover:shadow-lg dark:sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/list/highest-open-interest-change"
               class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
             >
               <div class="w-full flex justify-between items-center p-3 mt-3">
-                <h2 class="text-start text-xl font-semibold text-white ml-3">
+                <h2 class="text-start text-xl font-semibold ml-3">
                   Highest OI Change
                 </h2>
-                <ArrowLogo class="w-8 h-8 mr-3 shrink-0" />
+                <ArrowLogo
+                  class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
+                />
               </div>
-              <span class="text-white p-3 ml-3 mr-3">
+              <span class=" p-3 ml-3 mr-3">
                 Stocks with the highest changes in open interest (OI).
               </span>
             </a>
           </div>
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
+            class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer sm:hover:shadow-lg dark:sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/list/highest-option-premium"
               class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
             >
               <div class="w-full flex justify-between items-center p-3 mt-3">
-                <h2 class="text-start text-xl font-semibold text-white ml-3">
+                <h2 class="text-start text-xl font-semibold ml-3">
                   Highest Option Premium
                 </h2>
-                <ArrowLogo class="w-8 h-8 mr-3 shrink-0" />
+                <ArrowLogo
+                  class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
+                />
               </div>
-              <span class="text-white p-3 ml-3 mr-3">
+              <span class=" p-3 ml-3 mr-3">
                 Stocks with the highest option premium.
               </span>
             </a>
diff --git a/src/routes/market-flow/+page.svelte b/src/routes/market-flow/+page.svelte
index 31ccd128..dc734dc6 100644
--- a/src/routes/market-flow/+page.svelte
+++ b/src/routes/market-flow/+page.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
   import HoverStockChart from "$lib/components/HoverStockChart.svelte";
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
-  import { abbreviateNumberWithColor } from "$lib/utils";
+  import { abbreviateNumber } from "$lib/utils";
   import InfoModal from "$lib/components/InfoModal.svelte";
+  import { mode } from "mode-watcher";
 
   import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
 
@@ -255,8 +256,8 @@
     const options = {
       chart: {
         type: "column",
-        backgroundColor: "#09090B",
-        plotBackgroundColor: "#09090B",
+        backgroundColor: $mode === "light" ? "#fff" : "#09090B",
+        plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
         height: 360, // Set the maximum height for the chart
         animation: false,
       },
@@ -295,7 +296,7 @@
           // Loop through each point in the shared tooltip
           this.points.forEach((point) => {
             tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span> 
-          <span class="text-white font-normal text-sm" style="color:${point.color}">${abbreviateNumberWithColor(
+          <span class="text-white font-normal text-sm" >${abbreviateNumber(
             point.y,
           )}</span><br>`;
           });
@@ -309,14 +310,12 @@
         min: startTime, // Force start at 9:30
         max: endTime, // Force end at 16:10
         crosshair: {
-          color: "#fff", // Set the color of the crosshair line
+          color: $mode === "light" ? "black" : "white", // Set the color of the crosshair line
           width: 1, // Adjust the line width as needed
           dashStyle: "Solid",
         },
         labels: {
-          style: {
-            color: "#fff",
-          },
+          style: { color: $mode === "light" ? "black" : "white" },
           distance: 20, // Increases space between label and axis
           formatter: function () {
             return new Date(this.value).toLocaleTimeString("en-US", {
@@ -352,9 +351,9 @@
         },
         {
           gridLineWidth: 1,
-          gridLineColor: "#111827",
+          gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
           labels: {
-            style: { color: "white" },
+            style: { color: $mode === "light" ? "black" : "white" },
           },
           title: { text: null },
           opposite: true,
@@ -367,7 +366,7 @@
           type: "spline",
           data: priceSeries,
           yAxis: 0,
-          color: "#fff",
+          color: $mode === "light" ? "#2C6288" : "#fff",
           marker: {
             enabled: false,
             states: {
@@ -379,12 +378,13 @@
           lineWidth: 2,
           zIndex: 10,
         },
+
         {
           name: "Net Call Prem",
           type: "spline",
           data: netCallPremSeries,
           yAxis: 1,
-          color: "#90EE90",
+          color: $mode === "light" ? "#208646" : "#90EE90",
           marker: {
             enabled: false,
             states: {
@@ -399,7 +399,7 @@
           type: "spline",
           data: netPutPremSeries,
           yAxis: 1,
-          color: "#FF6B6B",
+          color: $mode === "light" ? "#DC2626" : "#FF6B6B",
           marker: {
             enabled: false,
             states: {
@@ -427,7 +427,11 @@
     return options;
   }
 
-  config = marketTideData ? getPlotOptions() : null;
+  $: {
+    if ($mode) {
+      config = marketTideData ? getPlotOptions() : null;
+    }
+  }
 </script>
 
 <SEO
@@ -435,7 +439,7 @@
   description="Get real-time insights on S&P 500 market flow sentiment through options premium analysis. Track trends and make informed trading decisions."
 />
 
-<section class="w-full overflow-hidden">
+<section class="w-full overflow-hidden text-muted dark:text-white">
   <div class="w-full overflow-hidden m-auto">
     <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
       <div
@@ -444,18 +448,18 @@
         <main class="w-full">
           <div class="w-full m-auto">
             {#if config !== null}
-              <p class="mt-4 text-white">
+              <p class="mt-4">
                 Market Flow evaluates the balance between advancing and
                 declining stocks by analyzing SP& 500 price movements, net call
                 premiums and net put premiums, providing a real-time snapshot of
                 market sentiment and momentum. <a
                   href="/learning-center/article/market-sentiment-through-options-activity-riding-the-tide"
-                  class="text-blue-400 sm:hover:text-white sm:hover:underline sm:hover:underline-offset-4"
+                  class="text-blue-500 sm:hover:text-muted dark:text-blue-400 dark:sm:hover:text-white sm:hover:underline sm:hover:underline-offset-4"
                   >Learn more here.</a
                 >
               </p>
 
-              <div class="text-white text-sm italic mt-5 mb-3">
+              <div class=" text-sm italic mt-5 mb-3">
                 Last Updated: {formatDate(
                   findLastNonNull(marketTideData, "time"),
                 )}
@@ -464,15 +468,16 @@
                 class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6"
               >
                 <div
-                  class="bg-gray-800/30 rounded-lg p-4 sm:hover:bg-gray-800/40 transition-colors"
+                  class="shadow-md bg-gray-100 dark:bg-gray-800/30 rounded-lg p-4 transition-colors"
                 >
-                  <div class="text-[#c3c6d0] text-sm mb-2 flex items-center">
+                  <div
+                    class="dark:text-[#c3c6d0] text-sm mb-2 flex items-center"
+                  >
                     <span>Volume</span>
-                    <span class="ml-1 text-yellow-400">●</span>
                   </div>
                   <div class="flex items-baseline">
-                    <span class="text-xl font-bold text-white">
-                      {@html abbreviateNumberWithColor(
+                    <span class="text-xl font-bold">
+                      {@html abbreviateNumber(
                         findLastNonNull(marketTideData, "net_volume"),
                         false,
                         true,
@@ -482,15 +487,16 @@
                 </div>
 
                 <div
-                  class="bg-gray-800/30 rounded-lg p-4 sm:hover:bg-gray-800/40 transition-colors"
+                  class="shadow-md bg-gray-100 dark:bg-gray-800/30 rounded-lg p-4 transition-colors"
                 >
-                  <div class="text-[#c3c6d0] text-sm mb-2 flex items-center">
+                  <div
+                    class="dark:text-[#c3c6d0] text-sm mb-2 flex items-center"
+                  >
                     <span>Net Call Prem</span>
-                    <span class="ml-1 text-green-500">●</span>
                   </div>
                   <div class="flex items-baseline">
-                    <span class="text-xl font-bold text-white"
-                      >{@html abbreviateNumberWithColor(
+                    <span class="text-xl font-bold"
+                      >{@html abbreviateNumber(
                         findLastNonNull(marketTideData, "net_call_premium"),
                         false,
                         true,
@@ -500,15 +506,16 @@
                 </div>
 
                 <div
-                  class="bg-gray-800/30 rounded-lg p-4 sm:hover:bg-gray-800/40 transition-colors"
+                  class="shadow-md bg-gray-100 dark:bg-gray-800/30 rounded-lg p-4 transition-colors"
                 >
-                  <div class="text-[#c3c6d0] text-sm mb-2 flex items-center">
+                  <div
+                    class="dark:text-[#c3c6d0] text-sm mb-2 flex items-center"
+                  >
                     <span>Net Put Prem</span>
-                    <span class="ml-1 text-red-400">●</span>
                   </div>
                   <div class="flex items-baseline">
-                    <span class="text-xl font-bold text-white"
-                      >{@html abbreviateNumberWithColor(
+                    <span class="text-xl font-bold"
+                      >{@html abbreviateNumber(
                         findLastNonNull(marketTideData, "net_put_premium"),
                         false,
                         true,
@@ -519,7 +526,7 @@
               </div>
 
               <div
-                class=" border border-gray-800 rounded w-full"
+                class=" border border-gray-300 dark:border-gray-800 rounded w-full"
                 use:highcharts={config}
               ></div>
             {/if}
@@ -530,7 +537,7 @@
                 <div class="flex flex-row items-center">
                   <label
                     for="topPosNetPrem"
-                    class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl font-bold"
+                    class="mr-1 cursor-pointer flex flex-row items-center text-xl font-bold"
                   >
                     Top Stocks by Positive Net Prem
                   </label>
@@ -546,7 +553,7 @@
                 class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-auto"
               >
                 <table
-                  class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md text-white w-full bg-table border border-gray-800 m-auto"
+                  class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-table border border-gray-300 dark:border-gray-800 m-auto"
                 >
                   <thead>
                     <TableHeader
@@ -558,7 +565,7 @@
                   <tbody>
                     {#each displayPosTickers as item, index}
                       <tr
-                        class="sm:hover:bg-[#245073]/10 border-b border-gray-800 odd:bg-odd {index +
+                        class="bg-white dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
                           1 ===
                           originalPosTickers?.length &&
                         !['Pro']?.includes(data?.user?.tier)
@@ -566,7 +573,7 @@
                           : ''}"
                       >
                         <td
-                          class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                          class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
                         >
                           {item?.rank}
                         </td>
@@ -578,7 +585,7 @@
                         </td>
 
                         <td
-                          class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                          class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
                         >
                           {item?.name?.length > 20
                             ? item?.name?.slice(0, 20) + "..."
@@ -586,7 +593,7 @@
                         </td>
 
                         <td
-                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
                         >
                           {item?.price}
                         </td>
@@ -594,28 +601,28 @@
                         <td
                           class="text-sm sm:text-[1rem] {item?.changesPercentage >=
                           0
-                            ? "text-[#00FC50] before:content-['+'] "
-                            : 'text-[#FF2F1F]'} text-end"
+                            ? "text-[#208646] dark:text-[#00FC50] before:content-['+'] "
+                            : 'text-[#DC2626] dark:text-[#FF2F1F]'} text-end"
                         >
-                          {item?.changesPercentage}%
+                          {item?.changesPercentage?.toFixed(2)}%
                         </td>
 
                         <td class="text-sm sm:text-[1rem] text-end">
-                          {@html abbreviateNumberWithColor(
+                          {@html abbreviateNumber(
                             item?.net_premium,
                             false,
                             true,
                           )}
                         </td>
                         <td class="text-sm sm:text-[1rem] text-end">
-                          {@html abbreviateNumberWithColor(
+                          {@html abbreviateNumber(
                             item?.net_call_premium,
                             false,
                             true,
                           )}
                         </td>
                         <td class="text-sm sm:text-[1rem] text-end">
-                          {@html abbreviateNumberWithColor(
+                          {@html abbreviateNumber(
                             item?.net_put_premium,
                             false,
                             true,
@@ -635,7 +642,7 @@
                 <div class="flex flex-row items-center">
                   <label
                     for="topNegNetPrem"
-                    class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl font-bold"
+                    class="mr-1 cursor-pointer flex flex-row items-center text-xl font-bold"
                   >
                     Top Stocks by Negative Net Prem
                   </label>
@@ -650,7 +657,7 @@
                 class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-auto"
               >
                 <table
-                  class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md text-white w-full bg-table border border-gray-800 m-auto"
+                  class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-table border border-gray-300 dark:border-gray-800 m-auto"
                 >
                   <thead>
                     <TableHeader
@@ -662,7 +669,7 @@
                   <tbody>
                     {#each displayNegTickers as item, index}
                       <tr
-                        class="sm:hover:bg-[#245073]/10 border-b border-gray-800 odd:bg-odd {index +
+                        class="bg-white dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
                           1 ===
                           originalNegTickers?.length &&
                         !['Pro']?.includes(data?.user?.tier)
@@ -670,7 +677,7 @@
                           : ''}"
                       >
                         <td
-                          class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                          class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
                         >
                           {item?.rank}
                         </td>
@@ -682,7 +689,7 @@
                         </td>
 
                         <td
-                          class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                          class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
                         >
                           {item?.name?.length > 20
                             ? item?.name?.slice(0, 20) + "..."
@@ -690,7 +697,7 @@
                         </td>
 
                         <td
-                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
                         >
                           {item?.price}
                         </td>
@@ -705,21 +712,21 @@
                         </td>
 
                         <td class="text-sm sm:text-[1rem] text-end">
-                          {@html abbreviateNumberWithColor(
+                          {@html abbreviateNumber(
                             item?.net_premium,
                             false,
                             true,
                           )}
                         </td>
                         <td class="text-sm sm:text-[1rem] text-end">
-                          {@html abbreviateNumberWithColor(
+                          {@html abbreviateNumber(
                             item?.net_call_premium,
                             false,
                             true,
                           )}
                         </td>
                         <td class="text-sm sm:text-[1rem] text-end">
-                          {@html abbreviateNumberWithColor(
+                          {@html abbreviateNumber(
                             item?.net_put_premium,
                             false,
                             true,
@@ -742,10 +749,3 @@
     </div>
   </div>
 </section>
-
-<style lang="scss">
-  .chart {
-    width: 100%;
-    transition: none;
-  }
-</style>
diff --git a/src/routes/market-flow/sector-flow/+page.svelte b/src/routes/market-flow/sector-flow/+page.svelte
index 3b55c6e3..4fd4a1e6 100644
--- a/src/routes/market-flow/sector-flow/+page.svelte
+++ b/src/routes/market-flow/sector-flow/+page.svelte
@@ -3,7 +3,7 @@
 
   import HoverStockChart from "$lib/components/HoverStockChart.svelte";
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
-  import { abbreviateNumberWithColor, sectorList } from "$lib/utils";
+  import { abbreviateNumber, sectorList } from "$lib/utils";
   import InfoModal from "$lib/components/InfoModal.svelte";
   import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
 
@@ -11,6 +11,7 @@
   import { Button } from "$lib/components/shadcn/button/index.js";
   import SEO from "$lib/components/SEO.svelte";
   import highcharts from "$lib/highcharts.ts";
+  import { mode } from "mode-watcher";
 
   export let data;
   let isLoading = false;
@@ -280,8 +281,8 @@
     const options = {
       chart: {
         type: "column",
-        backgroundColor: "#09090B",
-        plotBackgroundColor: "#09090B",
+        backgroundColor: $mode === "light" ? "#fff" : "#09090B",
+        plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
         height: 360, // Set the maximum height for the chart
         animation: false,
       },
@@ -320,7 +321,7 @@
           // Loop through each point in the shared tooltip
           this.points.forEach((point) => {
             tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span> 
-          <span class="text-white font-normal text-sm" style="color:${point.color}">${abbreviateNumberWithColor(
+          <span class="text-white font-normal text-sm" >${abbreviateNumber(
             point.y,
           )}</span><br>`;
           });
@@ -334,13 +335,13 @@
         min: startTime, // Force start at 9:30
         max: endTime, // Force end at 16:10
         crosshair: {
-          color: "#fff", // Set the color of the crosshair line
+          color: $mode === "light" ? "black" : "white", // Set the color of the crosshair line
           width: 1, // Adjust the line width as needed
           dashStyle: "Solid",
         },
         labels: {
           style: {
-            color: "#fff",
+            color: $mode === "light" ? "black" : "white",
           },
           distance: 20, // Increases space between label and axis
           formatter: function () {
@@ -377,9 +378,9 @@
         },
         {
           gridLineWidth: 1,
-          gridLineColor: "#111827",
+          gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
           labels: {
-            style: { color: "white" },
+            style: { color: $mode === "light" ? "black" : "white" },
           },
           title: { text: null },
           opposite: true,
@@ -392,7 +393,7 @@
           type: "spline",
           data: priceSeries,
           yAxis: 0,
-          color: "#fff",
+          color: $mode === "light" ? "#2C6288" : "#fff",
           marker: {
             enabled: false,
             states: {
@@ -404,12 +405,13 @@
           lineWidth: 2,
           zIndex: 10,
         },
+
         {
           name: "Net Call Prem",
           type: "spline",
           data: netCallPremSeries,
           yAxis: 1,
-          color: "#90EE90",
+          color: $mode === "light" ? "#208646" : "#90EE90",
           marker: {
             enabled: false,
             states: {
@@ -424,7 +426,7 @@
           type: "spline",
           data: netPutPremSeries,
           yAxis: 1,
-          color: "#FF6B6B",
+          color: $mode === "light" ? "#DC2626" : "#FF6B6B",
           marker: {
             enabled: false,
             states: {
@@ -456,7 +458,7 @@
   config = marketTideData ? getPlotOptions() : null;
 
   $: {
-    if (selectedSector) {
+    if (selectedSector || $mode) {
       topPosNetPremium =
         data?.getData?.topPosNetPremium[sectorDict[selectedSector]] || [];
       topNegNetPremium =
@@ -479,7 +481,9 @@
   description="Get real-time insights on all sectors of the stock market flow sentiment through options premium analysis. Track trends and make informed trading decisions."
 />
 
-<section class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden">
+<section
+  class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden text-muted dark:text-white"
+>
   <div class="w-full overflow-hidden m-auto">
     <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
       <div
@@ -488,7 +492,7 @@
         <main class="w-full">
           <div class="w-full m-auto">
             {#if config !== null}
-              <p class="mt-4 text-white">
+              <p class="mt-4">
                 <strong>{selectedSector}</strong> Flow tracks sector stocks, net
                 call/put premiums, and price movements to gauge market sentiment
                 and momentum in real time.
@@ -497,7 +501,7 @@
               <div
                 class="flex flex-col sm:flex-row items-start sm:items-center sm:justify-between w-full mt-2 sm:mt-0"
               >
-                <div class="text-white text-xs sm:text-sm italic mt-5 mb-5">
+                <div class=" text-xs sm:text-sm italic mt-5 mb-5">
                   Last Updated: {formatDate(
                     findLastNonNull(marketTideData, "time"),
                   )}
@@ -507,10 +511,9 @@
                     <DropdownMenu.Trigger asChild let:builder>
                       <Button
                         builders={[builder]}
-                        class="w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
+                        class="w-full border-gray-300 font-semibold dark:font-normal dark:border-gray-600 border bg-white dark:bg-default sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-2  rounded-md truncate"
                       >
-                        <span class="truncate text-white">{selectedSector}</span
-                        >
+                        <span class="truncate">{selectedSector}</span>
                         <svg
                           class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
                           viewBox="0 0 20 20"
@@ -529,7 +532,7 @@
                     <DropdownMenu.Content
                       class="w-56 h-fit max-h-72 overflow-y-auto scroller"
                     >
-                      <DropdownMenu.Label class="text-gray-400">
+                      <DropdownMenu.Label class="text-muted dark:text-gray-400">
                         Select Sector
                       </DropdownMenu.Label>
                       <DropdownMenu.Separator />
@@ -538,14 +541,14 @@
                           {#if sector === "Technology" || data?.user?.tier === "Pro"}
                             <DropdownMenu.Item
                               on:click={() => (selectedSector = sector)}
-                              class="cursor-pointer hover:bg-primary"
+                              class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                             >
                               {sector}
                             </DropdownMenu.Item>
                           {:else}
                             <DropdownMenu.Item
                               on:click={() => goto("/pricing")}
-                              class="cursor-pointer hover:bg-primary"
+                              class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                             >
                               {sector}
                               <svg
@@ -574,15 +577,14 @@
                 class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6"
               >
                 <div
-                  class="bg-gray-800/30 rounded-lg p-4 sm:hover:bg-gray-800/40 transition-colors"
+                  class="shadow-md bg-gray-100 dark:bg-gray-800/30 rounded-lg p-4 transition-colors"
                 >
-                  <div class="text-[#c3c6d0] text-sm mb-2 flex items-center">
+                  <div class=" text-sm mb-2 flex items-center">
                     <span>Volume</span>
-                    <span class="ml-1 text-yellow-400">●</span>
                   </div>
                   <div class="flex items-baseline">
-                    <span class="text-xl font-bold text-white">
-                      {@html abbreviateNumberWithColor(
+                    <span class="text-xl font-bold">
+                      {@html abbreviateNumber(
                         findLastNonNull(marketTideData, "net_volume"),
                         false,
                         true,
@@ -592,15 +594,14 @@
                 </div>
 
                 <div
-                  class="bg-gray-800/30 rounded-lg p-4 sm:hover:bg-gray-800/40 transition-colors"
+                  class="shadow-md bg-gray-100 dark:bg-gray-800/30 rounded-lg p-4 transition-colors"
                 >
-                  <div class="text-[#c3c6d0] text-sm mb-2 flex items-center">
+                  <div class=" text-sm mb-2 flex items-center">
                     <span>Net Call Prem</span>
-                    <span class="ml-1 text-green-500">●</span>
                   </div>
                   <div class="flex items-baseline">
-                    <span class="text-xl font-bold text-white"
-                      >{@html abbreviateNumberWithColor(
+                    <span class="text-xl font-bold"
+                      >{@html abbreviateNumber(
                         findLastNonNull(marketTideData, "net_call_premium"),
                         false,
                         true,
@@ -610,15 +611,14 @@
                 </div>
 
                 <div
-                  class="bg-gray-800/30 rounded-lg p-4 sm:hover:bg-gray-800/40 transition-colors"
+                  class="shadow-md bg-gray-100 dark:bg-gray-800/30 rounded-lg p-4 transition-colors"
                 >
-                  <div class="text-[#c3c6d0] text-sm mb-2 flex items-center">
+                  <div class=" text-sm mb-2 flex items-center">
                     <span>Net Put Prem</span>
-                    <span class="ml-1 text-red-400">●</span>
                   </div>
                   <div class="flex items-baseline">
-                    <span class="text-xl font-bold text-white"
-                      >{@html abbreviateNumberWithColor(
+                    <span class="text-xl font-bold"
+                      >{@html abbreviateNumber(
                         findLastNonNull(marketTideData, "net_put_premium"),
                         false,
                         true,
@@ -629,7 +629,7 @@
               </div>
 
               <div
-                class="chart border border-gray-800 rounded"
+                class="chart border border-gray-300 dark:border-gray-800 rounded"
                 use:highcharts={config}
               ></div>
             {/if}
@@ -640,7 +640,7 @@
                 <div class="flex flex-row items-center">
                   <label
                     for="topPosNetPrem"
-                    class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl font-bold"
+                    class="mr-1 cursor-pointer flex flex-row items-center text-xl font-bold"
                   >
                     Top Stocks by Positive Net Prem
                   </label>
@@ -656,7 +656,7 @@
                 class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-auto"
               >
                 <table
-                  class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md text-white w-full bg-table border border-gray-800 m-auto"
+                  class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-table border border-gray-300 dark:border-gray-300 dark:border-gray-800 m-auto"
                 >
                   <thead>
                     <TableHeader
@@ -668,7 +668,7 @@
                   <tbody>
                     {#each displayPosTickers as item, index}
                       <tr
-                        class="sm:hover:bg-[#245073]/10 border-b border-gray-800 odd:bg-odd {index +
+                        class="bg-white dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
                           1 ===
                           originalPosTickers?.length &&
                         !['Pro']?.includes(data?.user?.tier)
@@ -676,7 +676,7 @@
                           : ''}"
                       >
                         <td
-                          class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                          class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
                         >
                           {item?.rank}
                         </td>
@@ -688,7 +688,7 @@
                         </td>
 
                         <td
-                          class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                          class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
                         >
                           {item?.name?.length > 20
                             ? item?.name?.slice(0, 20) + "..."
@@ -696,7 +696,7 @@
                         </td>
 
                         <td
-                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
                         >
                           {item?.price}
                         </td>
@@ -704,28 +704,28 @@
                         <td
                           class="text-sm sm:text-[1rem] {item?.changesPercentage >=
                           0
-                            ? "text-[#00FC50] before:content-['+'] "
-                            : 'text-[#FF2F1F]'} text-end"
+                            ? "text-[#208646] dark:text-[#00FC50] before:content-['+'] "
+                            : 'text-[#DC2626] dark:text-[#FF2F1F]'} text-end"
                         >
-                          {item?.changesPercentage}%
+                          {item?.changesPercentage?.toFixed(2)}%
                         </td>
 
                         <td class="text-sm sm:text-[1rem] text-end">
-                          {@html abbreviateNumberWithColor(
+                          {@html abbreviateNumber(
                             item?.net_premium,
                             false,
                             true,
                           )}
                         </td>
                         <td class="text-sm sm:text-[1rem] text-end">
-                          {@html abbreviateNumberWithColor(
+                          {@html abbreviateNumber(
                             item?.net_call_premium,
                             false,
                             true,
                           )}
                         </td>
                         <td class="text-sm sm:text-[1rem] text-end">
-                          {@html abbreviateNumberWithColor(
+                          {@html abbreviateNumber(
                             item?.net_put_premium,
                             false,
                             true,
@@ -745,7 +745,7 @@
                 <div class="flex flex-row items-center">
                   <label
                     for="topNegNetPrem"
-                    class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl font-bold"
+                    class="mr-1 cursor-pointer flex flex-row items-center text-xl font-bold"
                   >
                     Top Stocks by Negative Net Prem
                   </label>
@@ -761,7 +761,7 @@
                 class="w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-auto"
               >
                 <table
-                  class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md text-white w-full bg-table border border-gray-800 m-auto"
+                  class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-table border border-gray-300 dark:border-gray-300 dark:border-gray-800 m-auto"
                 >
                   <thead>
                     <TableHeader
@@ -773,7 +773,7 @@
                   <tbody>
                     {#each displayNegTickers as item, index}
                       <tr
-                        class="sm:hover:bg-[#245073]/10 border-b border-gray-800 odd:bg-odd {index +
+                        class="bg-white dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
                           1 ===
                           originalNegTickers?.length &&
                         !['Pro']?.includes(data?.user?.tier)
@@ -781,7 +781,7 @@
                           : ''}"
                       >
                         <td
-                          class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                          class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
                         >
                           {item?.rank}
                         </td>
@@ -793,7 +793,7 @@
                         </td>
 
                         <td
-                          class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                          class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
                         >
                           {item?.name?.length > 20
                             ? item?.name?.slice(0, 20) + "..."
@@ -801,7 +801,7 @@
                         </td>
 
                         <td
-                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap"
                         >
                           {item?.price}
                         </td>
@@ -816,21 +816,21 @@
                         </td>
 
                         <td class="text-sm sm:text-[1rem] text-end">
-                          {@html abbreviateNumberWithColor(
+                          {@html abbreviateNumber(
                             item?.net_premium,
                             false,
                             true,
                           )}
                         </td>
                         <td class="text-sm sm:text-[1rem] text-end">
-                          {@html abbreviateNumberWithColor(
+                          {@html abbreviateNumber(
                             item?.net_call_premium,
                             false,
                             true,
                           )}
                         </td>
                         <td class="text-sm sm:text-[1rem] text-end">
-                          {@html abbreviateNumberWithColor(
+                          {@html abbreviateNumber(
                             item?.net_put_premium,
                             false,
                             true,
@@ -853,20 +853,3 @@
     </div>
   </div>
 </section>
-
-<style>
-  .app {
-    height: 600px;
-    max-width: 100%; /* Ensure chart width doesn't exceed the container */
-  }
-
-  @media (max-width: 640px) {
-    .app {
-      height: 510px;
-    }
-  }
-
-  .chart {
-    width: 100%;
-  }
-</style>