chore: linting fixes and added color changes to the chart, based on the user's theme

Author: benduran

apps/insights/src/components/PythProDemoPriceChart/index.tsx

@@ -6,6 +6,7 @@ import type {
   UTCTimestamp,
 } from "lightweight-charts";
 import { createChart, LineSeries } from "lightweight-charts";
+import { useTheme } from "next-themes";
 import { useEffect, useLayoutEffect, useRef } from "react";
 
 import type { AppStateContextVal } from "../../context/pyth-pro-demo";
@@ -29,6 +30,10 @@ export function PythProDemoPriceChartImpl({
   metrics,
   selectedSource,
 }: PythProDemoPriceChartImplProps) {
+  /** hooks */
+  const { theme } = useTheme();
+
+  /** refs */
   const containerRef = useRef<HTMLDivElement | null>(null);
   const chartRef = useRef<IChartApi>(undefined);
   const seriesMapRef = useRef<Record<string, ISeriesApi<"Line">>>({});
@@ -37,8 +42,14 @@ export function PythProDemoPriceChartImpl({
   useLayoutEffect(() => {
     if (!containerRef.current) return;
 
-    const grayColor = getThemeCssVar("--theme-palette-gray-800") ?? "#ccc";
-    const grayText = getThemeCssVar("--theme-palette-gray-300") ?? "#f1f1f3";
+    const grayColor =
+      theme === "dark"
+        ? (getThemeCssVar("--theme-palette-gray-800") ?? "#ccc")
+        : (getThemeCssVar("--theme-palette-gray-300") ?? "#f1f1f3");
+    const grayText =
+      theme === "dark"
+        ? (getThemeCssVar("--theme-palette-gray-300") ?? "#f1f1f3")
+        : (getThemeCssVar("--theme-palette-gray-800") ?? "#ccc");
 
     const chart = createChart(containerRef.current, {
       layout: {
@@ -69,7 +80,7 @@ export function PythProDemoPriceChartImpl({
       chartRef.current = undefined;
       seriesMapRef.current = {};
     };
-  }, []);
+  }, [theme]);
 
   useLayoutEffect(() => {
     if (!chartRef.current || !containerRef.current) return;

apps/insights/src/components/Root/css-vars.scss

@@ -2,4 +2,4 @@
 
 :root {
   @include theme.export-color-vars;
-}
+}

packages/component-library/src/theme.scss

@@ -923,7 +923,7 @@ $header-height: var(--header-height);
   @each $key, $value in $map {
     $var-name: if($prefix != "", "#{$prefix}-#{$key}", "#{$key}");
 
-    @if type-of($value) == "map" {
+    @if meta.type-of($value) == "map" {
       // recurse into nested maps
       @include export-css-vars($value, $var-name);
     } @else {
@@ -936,4 +936,4 @@ $header-height: var(--header-height);
 @mixin export-color-vars {
   @include export-css-vars($color-pallette, "theme-palette");
   @include export-css-vars($color, "theme-color");
-}
+}

packages/react-hooks/src/use-detect-theme-preference.ts

@@ -0,0 +1,47 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+/**
+ * detects which color-scheme is active by checking
+ * to see which color scheme is present on the body,
+ * and if one isn't available, falling back to
+ * the user's system preference
+ */
+export function useDetectThemePreference() {
+  /** state */
+  const [themePreference, setThemePreference] = useState<
+    "dark" | "light" | undefined
+  >(undefined);
+
+  /** effects */
+  useEffect(() => {
+    const prefersDarkQuery = globalThis.window.matchMedia(
+      "(prefers-color-scheme: dark)",
+    );
+    const bodyColorScheme = (getComputedStyle(globalThis.document.body)
+      .colorScheme || undefined) as typeof themePreference | undefined;
+
+    setThemePreference(
+      bodyColorScheme ?? (prefersDarkQuery.matches ? "dark" : "light"),
+    );
+
+    const mo = new MutationObserver(() => {
+      debugger;
+      const { colorScheme } = getComputedStyle(globalThis.document.body);
+      if (!colorScheme) return;
+      setThemePreference(colorScheme as typeof themePreference);
+    });
+
+    mo.observe(globalThis.document.body, {
+      attributeFilter: ["style"],
+      attributes: true,
+    });
+
+    return () => {
+      mo.disconnect();
+    };
+  }, []);
+
+  return { themePreference };
+}