From 8d3c51eb3d98643a77adc69a6e409a3a0c027296 Mon Sep 17 00:00:00 2001
From: Michael Landry <mike.landry@gmail.com>
Date: Fri, 26 Sep 2025 16:52:31 -0400
Subject: [PATCH] Fix race condition with using getComputedStyle primary color
 for dynamic activity grid darkening

Instead just use the color from the current theme directly. Tested works on initial load and theme changes.
Fixes https://github.com/gabehf/Koito/issues/75
---
 client/app/components/ActivityGrid.tsx | 33 ++++----------------------
 1 file changed, 4 insertions(+), 29 deletions(-)

diff --git a/client/app/components/ActivityGrid.tsx b/client/app/components/ActivityGrid.tsx
index 16953df..4782ae3 100644
--- a/client/app/components/ActivityGrid.tsx
+++ b/client/app/components/ActivityGrid.tsx
@@ -1,28 +1,10 @@
 import { useQuery } from "@tanstack/react-query"
 import { getActivity, type getActivityArgs, type ListenActivityItem } from "api/api"
 import Popup from "./Popup"
-import { useEffect, useState } from "react"
+import { useState } from "react"
 import { useTheme } from "~/hooks/useTheme"
 import ActivityOptsSelector from "./ActivityOptsSelector"
-
-function getPrimaryColor(): string {
-    const value = getComputedStyle(document.documentElement)
-        .getPropertyValue('--color-primary')
-        .trim();
-
-    const rgbMatch = value.match(/^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/);
-    if (rgbMatch) {
-        const [, r, g, b] = rgbMatch.map(Number);
-        return (
-            '#' +
-            [r, g, b]
-                .map((n) => n.toString(16).padStart(2, '0'))
-                .join('')
-        );
-    }
-
-    return value;
-}
+import { themes } from "~/styles/themes.css"
 
 interface Props {
     step?: string 
@@ -47,7 +29,6 @@ export default function ActivityGrid({
         configurable = false,
     }: Props) {
 
-    const [color, setColor] = useState(getPrimaryColor())
     const [stepState, setStep] = useState(step)
     const [rangeState, setRange] = useState(range)
         
@@ -69,14 +50,8 @@ export default function ActivityGrid({
 
 
     const { theme } = useTheme();
-    useEffect(() => {
-        const raf = requestAnimationFrame(() => {
-          const color = getPrimaryColor()
-          setColor(color);
-        });
-      
-        return () => cancelAnimationFrame(raf);
-      }, [theme]);      
+    const currentTheme = themes.find(t => t.name === theme);
+    const color = currentTheme?.primary || '#f5a97f';
 
     if (isPending) { 
         return (