fix colors (#5)

- Fix custom colors in heatmaps and consistent empty dot theming (372711a02f76d8d2262947cba80b4161c1fa59ff)

src/components/Heatmap.tsx

@@ -1,10 +1,10 @@
-import React, { useMemo, useCallback } from "react";
+import React, { useEffect, useState } from "react";
 import ActivityCalendar from "react-activity-calendar";
 import { Tooltip, Avatar } from "@mui/material";
 import Link from "next/link";
 import { aggregateToWeeklyData } from "../utils/weeklyCalendar";
-import { getHeatmapTheme } from "../utils/heatmapColors";
 import WeeklyHeatmap from "./WeeklyHeatmap";
+import { getHeatmapTheme } from "../utils/heatmapColors";
 
 type ViewMode = 'daily' | 'weekly';
 
@@ -29,24 +29,32 @@ const Heatmap: React.FC<HeatmapProps> = ({
   showHeader = true,
   viewMode 
 }) => {
-  // Memoize the weekly data processing to avoid recalculation on every render
-  const weeklyData = useMemo(() => aggregateToWeeklyData(data), [data]);
+  // Process data based on view mode
+  const processedData = viewMode === 'weekly' ? aggregateToWeeklyData(data) : data;
   
-  // Choose data based on view mode
-  const processedData = viewMode === 'weekly' ? weeklyData : data;
+  // Track theme state for proper ActivityCalendar theming
+  const [isDarkMode, setIsDarkMode] = useState(false);
   
-  // Memoize the theme to prevent recreation
-  const theme = useMemo(() => getHeatmapTheme(color), [color]);
+  useEffect(() => {
+    // Check initial theme
+    const checkTheme = () => {
+      setIsDarkMode(document.documentElement.classList.contains('dark'));
+    };
+    
+    checkTheme();
+    
+    // Watch for theme changes
+    const observer = new MutationObserver(checkTheme);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class']
+    });
+    
+    return () => observer.disconnect();
+  }, []);
   
-  // Memoize the render block callback
-  const renderBlock = useCallback((block: React.ReactElement, activity: any) => (
-    <Tooltip
-      title={`${activity.count} new repos on ${activity.date}`}
-      arrow
-    >
-      {block}
-    </Tooltip>
-  ), []);
+  // Use theme-aware colors
+  const emptyColor = isDarkMode ? "#374151" : "#d1d5db";
   
   return (
     <div className="flex flex-col items-center w-full mx-auto">
@@ -75,11 +83,21 @@ const Heatmap: React.FC<HeatmapProps> = ({
         ) : (
           <ActivityCalendar
             data={processedData}
-            theme={theme}
+            theme={{
+              light: [emptyColor, color],
+              dark: [emptyColor, color]
+            }}
             blockSize={11}
             blockMargin={2}
             hideTotalCount
-            renderBlock={renderBlock}
+            renderBlock={(block, activity) => (
+              <Tooltip
+                title={`${activity.count} new repos on ${activity.date}`}
+                arrow
+              >
+                {block}
+              </Tooltip>
+            )}
           />
         )}
       </div>
@@ -87,4 +105,4 @@ const Heatmap: React.FC<HeatmapProps> = ({
   );
 };
 
-export default React.memo(Heatmap);
+export default Heatmap;

src/styles/globals.css

@@ -88,3 +88,64 @@
     display: none;  /* Safari and Chrome */
   }
 }
+
+/* Activity Calendar theme overrides for consistent empty dot colors */
+/* Try multiple possible selectors for react-activity-calendar */
+.react-activity-calendar rect[data-level="0"] {
+  fill: #d1d5db !important; /* Light theme empty dots */
+}
+
+.dark .react-activity-calendar rect[data-level="0"] {
+  fill: #374151 !important; /* Dark theme empty dots */
+}
+
+/* Alternative selectors in case the structure is different */
+.react-activity-calendar .react-activity-calendar__block[data-level="0"] {
+  fill: #d1d5db !important;
+}
+
+.dark .react-activity-calendar .react-activity-calendar__block[data-level="0"] {
+  fill: #374151 !important;
+}
+
+/* More general fallback selectors */
+.react-activity-calendar [data-level="0"] {
+  fill: #d1d5db !important;
+}
+
+.dark .react-activity-calendar [data-level="0"] {
+  fill: #374151 !important;
+}
+
+/* SVG rect elements specifically */
+.react-activity-calendar svg rect[data-level="0"] {
+  fill: #d1d5db !important;
+}
+
+.dark .react-activity-calendar svg rect[data-level="0"] {
+  fill: #374151 !important;
+}
+
+/* Override any background-color styles as well */
+.react-activity-calendar [data-level="0"] {
+  fill: #d1d5db !important;
+  background-color: #d1d5db !important;
+}
+
+.dark .react-activity-calendar [data-level="0"] {
+  fill: #374151 !important;
+  background-color: #374151 !important;
+}
+
+/* Even more specific selectors with higher specificity */
+html.dark .react-activity-calendar svg rect[data-level="0"],
+html.dark .react-activity-calendar [data-level="0"] {
+  fill: #374151 !important;
+  background-color: #374151 !important;
+}
+
+html:not(.dark) .react-activity-calendar svg rect[data-level="0"],
+html:not(.dark) .react-activity-calendar [data-level="0"] {
+  fill: #d1d5db !important;
+  background-color: #d1d5db !important;
+}

src/utils/heatmapColors.ts

@@ -14,9 +14,37 @@ export const getHeatmapColorIntensity = (level: number, primaryColor: string) =>
     return null; // Will use CSS classes for theme-aware empty state
   }
   
-  // Use different intensities of the primary color or default green scale
-  const greenIntensities = ['#0e4429', '#006d32', '#26a641', '#39d353'];
-  return greenIntensities[Math.min(level - 1, 3)] || primaryColor;
+  // Create different intensities of the primary color
+  const hexToRgb = (hex: string) => {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? {
+      r: parseInt(result[1], 16),
+      g: parseInt(result[2], 16),
+      b: parseInt(result[3], 16)
+    } : null;
+  };
+  
+  const rgbToHex = (r: number, g: number, b: number) => {
+    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+  };
+  
+  const rgb = hexToRgb(primaryColor);
+  if (!rgb) {
+    // Fallback to green scale if color parsing fails
+    const greenIntensities = ['#0e4429', '#006d32', '#26a641', '#39d353'];
+    return greenIntensities[Math.min(level - 1, 3)];
+  }
+  
+  // Create intensity levels by adjusting brightness
+  // Level 1: 40% intensity, Level 2: 60%, Level 3: 80%, Level 4: 100%
+  const intensityMultipliers = [0.4, 0.6, 0.8, 1.0];
+  const multiplier = intensityMultipliers[Math.min(level - 1, 3)];
+  
+  const adjustedR = Math.round(rgb.r * multiplier);
+  const adjustedG = Math.round(rgb.g * multiplier);
+  const adjustedB = Math.round(rgb.b * multiplier);
+  
+  return rgbToHex(adjustedR, adjustedG, adjustedB);
 };
 
 export const getEmptyDotColors = () => ({