Refactor CSS for scatter plots

client/src/components/Widgets/VaaActivity7Day.jsx

@@ -1,11 +1,18 @@
 import { useMemo } from 'react';
 import { Box, Flex, Spinner, Text } from '@chakra-ui/react';
 import Plot from 'react-plotly.js';
-import VdapApi from '../../hooks/useVdapApi.js'; // Adjust path as needed
+import VdapApi from '../../hooks/useVdapApi.js';
+import { useColorMode } from "@/components/ui/color-mode.jsx";
+
+// Import central color dictionary
+import { rawWidgetColors } from '../../theme.js'; // Adjust path if needed
 
 export default function VaaActivity7Day({ settings, widgetID }) {
-    console.log("3. Chart received settings:", settings);
+    const { colorMode } = useColorMode();
-    // Plotly expects 'linear' for normal axes
+
+    // 2. Assign the active palette based on the current mode
+    const plotColors = colorMode === 'dark' ? rawWidgetColors.dark : rawWidgetColors.light;
+
     const plotYAxisType = settings?.yAxisScale === 'symlog' ? 'symlog' : 'linear';
 
     // Clean, single-line data fetching
@@ -17,10 +24,8 @@ export default function VaaActivity7Day({ settings, widgetID }) {
 
         // Array of distinct Plotly shapes
         const Symbolway = [
-            'circle', 'square', 'diamond',
+            'circle', 'square', 'diamond', 'triangle-up', 'triangle-down',
-            'triangle-up', 'triangle-down',
+            'star', 'hexagram', 'pentagon', 'hexagon', 'octagon', 'cross', 'x'
-            'star', 'hexagram', 'pentagon',
-            'hexagon', 'octagon', 'cross', 'x'
         ];
 
         const sortedData = [...apiData].sort((a, b) => b.obs_fl - a.obs_fl);
@@ -43,7 +48,7 @@ export default function VaaActivity7Day({ settings, widgetID }) {
             mode: 'markers',
             marker: {
                 size: 7,
-                line: { width: 0.5, color: 'var(--chakra-colors-textInverted)' },
+                line: { width: 0.5, color: plotColors.text },
                 symbol: Symbolway[index % Symbolway.length],
             },
             // Replicating the clean Observable tooltip
@@ -52,35 +57,35 @@ export default function VaaActivity7Day({ settings, widgetID }) {
               'Date: %{x|%b %d %Y %H:%M}<br>' +
               'Flight Level: %{y}<extra></extra>'
         }));
-    }, [apiData]);
+    }, [apiData, plotColors]);
 
     // 2. Build the Layout (Styling and Grid)
     const layout = useMemo(() => {
         return {
             autosize: true,
-            paper_bgcolor: 'transparent', // Let Chakra UI background show through
+            paper_bgcolor: 'transparent',
             plot_bgcolor: 'transparent',
-            font: { color: 'var(--chakra-colors-widgetTextMuted)' },
+            font: { color: plotColors.muted },
             margin: { t: 40, r: 20, l: 20, b: 20 },
             xaxis: {
                 title: {
                     text: 'Date (UTC)',
-                    font: { color: 'var(--chakra-colors-text)', size: 12 }
+                    font: { color: plotColors.text, size: 12 }
                 },
                 type: 'date',
                 tickformat: '%b %d<br>%Y %H:%M',
-                gridcolor: 'var(--chakra-colors-glassSeperator)',
+                gridcolor: plotColors.grid, 
-                zerolinecolor: 'var(--chakra-colors-glassSeperator)',
+                zerolinecolor: plotColors.grid,
                 automargin: true,
             },
             yaxis: {
                 title: {
                     text: 'Flight Level',
-                    font: { color: 'var(--chakra-colors-text)', size: 12 }
+                    font: { color: plotColors.text, size: 12 }
                 },
                 type: plotYAxisType,
-                gridcolor: 'var(--chakra-colors-glassSeperator)',
+                gridcolor: plotColors.grid,
-                zerolinecolor: 'var(--chakra-colors-text)',
+                zerolinecolor: plotColors.text,
                 automargin: true,
             },
             hovermode: 'closest',
@@ -93,11 +98,11 @@ export default function VaaActivity7Day({ settings, widgetID }) {
                     y0: 0,
                     y1: 0,
                     yref: 'y',
-                    line: { color: 'var(--chakra-colors-text)', width: 1 }
+                    line: { color: plotColors.text, width: 1 }
                 }
             ],
         };
-    }, [apiData, plotYAxisType]);
+    }, [plotYAxisType, plotColors]);
 
     if (isLoading) return (
       <Flex w="100%" h="100%" bg="transparent" align="center" justify="center">
@@ -120,7 +125,7 @@ export default function VaaActivity7Day({ settings, widgetID }) {
     return (
       <Box height="100%" width="100%" bg="transparent" overflow="hidden">
           <Plot
-            key={plotYAxisType}
+            key={`${plotYAxisType}-${colorMode}`}
             data={plotTraces}
             layout={layout}
             useResizeHandler={true}

client/src/theme.js

@@ -509,6 +509,22 @@ const glassTabRecipe = defineRecipe({
   },
 });
 
+/* ==========================================================================
+   RAW WIDGET COLORS (For Canvas/Plotly libraries that reject CSS variables)
+   ========================================================================== */
+export const rawWidgetColors = {
+  light: {
+    text: "#000000",
+    muted: "#4A5568", // gray.600
+    grid: "rgba(0, 0, 0, 0.1)",
+  },
+  dark: {
+    text: "#FFFFFF",
+    muted: "#A0AEC0", // gray.400
+    grid: "rgba(255, 255, 255, 0.15)",
+  }
+};
+
 /* ==========================================================================
    CONFIG & SYSTEM
    ========================================================================== */