From d7612dfec310309c9e820d9dbc10808fcefb592e 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 (