fix(insights): created a new hook to detect the user's theme, even if it's not been set yet, which fixes colors used on the charts. changed tokens word to be keys

Author: benduran

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

@@ -18,8 +18,8 @@ export function PythProApiTokensMenu() {
   const [open, setOpen] = useState(false);
 
   /** local variables */
-  const tooltip = "Configure your API tokens";
-  const closeTooltip = "Close API tokens config";
+  const tooltip = "Configure your API keys";
+  const closeTooltip = "Close API keys config";
 
   return (
     <>
@@ -61,7 +61,7 @@ export function PythProApiTokensMenu() {
             <div className={classes.fyi}>
               In order to provide a quality demo of Pyth Pro real-time
               performance relative to other sources, you will need to provide
-              API tokens to interact with these APIs.
+              API keys to interact with these APIs.
             </div>
             <div className={classes.fyi}>
               They will be saved securely to your browser for future use here.

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

@@ -1,3 +1,4 @@
+import { useAppTheme } from "@pythnetwork/react-hooks/use-app-theme";
 import { capitalCase } from "change-case";
 import type {
   IChartApi,
@@ -6,7 +7,6 @@ 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";
@@ -31,7 +31,7 @@ export function PythProDemoPriceChartImpl({
   selectedSource,
 }: PythProDemoPriceChartImplProps) {
   /** hooks */
-  const { theme } = useTheme();
+  const { theme } = useAppTheme();
 
   /** refs */
   const containerRef = useRef<HTMLDivElement | null>(null);

packages/react-hooks/package.json

@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "@pythnetwork/shared-lib": "workspace:",
+    "next-themes": "catalog:",
     "nuqs": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:",
@@ -49,6 +50,10 @@
       "types": "./dist/nuqs.d.ts",
       "default": "./dist/nuqs.mjs"
     },
+    "./use-app-theme": {
+      "types": "./dist/use-app-theme.d.ts",
+      "default": "./dist/use-app-theme.mjs"
+    },
     "./use-websocket": {
       "types": "./dist/use-websocket.d.ts",
       "default": "./dist/use-websocket.mjs"

packages/react-hooks/src/use-app-theme.ts

@@ -0,0 +1,49 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { useEffect, useRef, useState } from "react";
+
+function getThemePreferenceMediaQuery() {
+  return globalThis.window.matchMedia("(prefers-color-scheme: dark)");
+}
+
+/**
+ * wrapped version of the useTheme() hook from "next-themes,"
+ * this one also detect if a user has selected the "system" theme
+ * and, if so, returns their current color-scheme theme preference
+ * (which comes directly from their OS or from their browser's settings)
+ */
+export function useAppTheme() {
+  /** refs */
+  const darkQueryRef = useRef(getThemePreferenceMediaQuery());
+
+  /** state */
+  const [browserThemePreference, setBrowserThemePreference] = useState<
+    "dark" | "light"
+  >(darkQueryRef.current.matches ? "dark" : "light");
+
+  /** hooks */
+  const { theme, ...rest } = useTheme();
+
+  /** effects */
+  useEffect(() => {
+    const { current: mediaQuery } = darkQueryRef;
+
+    const handleChange = (e: MediaQueryListEvent) => {
+      setBrowserThemePreference(e.matches ? "dark" : "light");
+    };
+
+    mediaQuery.addEventListener("change", handleChange);
+
+    return () => {
+      mediaQuery.removeEventListener("change", handleChange);
+    };
+  }, []);
+
+  return {
+    ...rest,
+    theme: (!theme || theme === "system"
+      ? browserThemePreference
+      : theme) as typeof browserThemePreference,
+  };
+}