fix colors in light and dark mode (#7)

- fix colors (75230f3bad330e77d42e16c64535b9b3e0d9bad3)

src/components/Heatmap.tsx

@@ -56,14 +56,22 @@ const Heatmap: React.FC<HeatmapProps> = ({
   // Use theme-aware colors
   const emptyColor = isDarkMode ? "#374151" : "#d1d5db";
   
-  // Create intensity levels for daily view (same as weekly)
-  const intensityColors = [
+  // Create separate intensity levels for light and dark modes
+  const lightIntensityColors = [
     emptyColor,  // level 0
-    getHeatmapColorIntensity(1, color), // level 1 (40% intensity)
-    getHeatmapColorIntensity(2, color), // level 2 (60% intensity)
-    getHeatmapColorIntensity(3, color), // level 3 (80% intensity)
-    getHeatmapColorIntensity(4, color)  // level 4 (100% intensity)
-  ].filter((color): color is string => color !== null); // Remove any null values and type guard
+    getHeatmapColorIntensity(1, color, false), // level 1 (bright for light mode)
+    getHeatmapColorIntensity(2, color, false), // level 2
+    getHeatmapColorIntensity(3, color, false), // level 3
+    getHeatmapColorIntensity(4, color, false)  // level 4 (darkest for light mode)
+  ].filter((color): color is string => color !== null);
+  
+  const darkIntensityColors = [
+    emptyColor,  // level 0
+    getHeatmapColorIntensity(1, color, true), // level 1 (darker for dark mode)
+    getHeatmapColorIntensity(2, color, true), // level 2
+    getHeatmapColorIntensity(3, color, true), // level 3
+    getHeatmapColorIntensity(4, color, true)  // level 4 (brightest for dark mode)
+  ].filter((color): color is string => color !== null);
   
   return (
     <div className="flex flex-col items-center w-full mx-auto">
@@ -93,8 +101,8 @@ const Heatmap: React.FC<HeatmapProps> = ({
           <ActivityCalendar
             data={processedData}
             theme={{
-              light: intensityColors,
-              dark: intensityColors
+              light: lightIntensityColors,
+              dark: darkIntensityColors
             }}
             blockSize={11}
             blockMargin={2}

src/components/WeeklyHeatmap.tsx

@@ -52,10 +52,10 @@ const WeeklyHeatmap: React.FC<WeeklyHeatmapProps> = ({ data, color }) => {
   // Memoize sorted months
   const sortedMonths = useMemo(() => Object.keys(groupedData).sort(), [groupedData]);
 
-  // Memoize the color intensity function
+  // Memoize the color intensity function with theme awareness
   const getColorIntensity = useCallback((level: number) => {
-    return getHeatmapColorIntensity(level, color) || undefined;
-  }, [color]);
+    return getHeatmapColorIntensity(level, color, isDark) || undefined;
+  }, [color, isDark]);
   
   // Get the exact same empty dot color as ActivityCalendar
   const emptyDotColor = useMemo(() => {

src/utils/heatmapColors.ts

@@ -9,7 +9,7 @@ export const getHeatmapTheme = (primaryColor: string) => ({
   light: [EMPTY_DOT_LIGHT, primaryColor],
 });
 
-export const getHeatmapColorIntensity = (level: number, primaryColor: string) => {
+export const getHeatmapColorIntensity = (level: number, primaryColor: string, isDarkMode: boolean = false) => {
   if (level === 0) {
     return null; // Will use CSS classes for theme-aware empty state
   }
@@ -35,9 +35,17 @@ export const getHeatmapColorIntensity = (level: number, primaryColor: string) =>
     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];
+  // Create intensity levels based on theme
+  let intensityMultipliers: number[];
+  
+  if (isDarkMode) {
+    // Dark mode: Start darker, get brighter (40% → 100%)
+    intensityMultipliers = [0.4, 0.6, 0.8, 1.0];
+  } else {
+    // Light mode: Start brighter, get darker (100% → 40%)
+    intensityMultipliers = [1.0, 0.8, 0.6, 0.4];
+  }
+  
   const multiplier = intensityMultipliers[Math.min(level - 1, 3)];
   
   const adjustedR = Math.round(rgb.r * multiplier);