Added Light Theme Support for Contribution HeatMap (#2072)

* Added Light Theme Support for Contribution HeatMap

* Added Light Theme Support for Contribution HeatMap (Updated)

* Added Light Theme Support for Contribution HeatMap (Updated)

* Update color scheme for the heatmap

* Update code

---------

Co-authored-by: Kate Golovanova <[email protected]>
Co-authored-by: Arkadii Yakovets <[email protected]>
Co-authored-by: Arkadii Yakovets <[email protected]>

Author: 3 people

frontend/public/img/heatmapBackground.png renamed to frontend/public/img/heatmap-background-dark.png

@@ -9,6 +9,7 @@ import {
 import Image from 'next/image'
 import Link from 'next/link'
 import { useParams } from 'next/navigation'
+import { useTheme } from 'next-themes'
 import React, { useState, useEffect, useRef } from 'react'
 import { handleAppError, ErrorDisplay } from 'app/global-error'
 import { GET_USER_DATA } from 'server/queries/userQueries'
@@ -139,37 +140,59 @@ const UserDetailsPage: React.FC = () => {
     { icon: faCodeMerge, value: user?.contributionsCount || 0, unit: 'Contribution' },
   ]
 
-  const Heatmap = () => (
-    <div className="flex flex-col gap-4">
-      <div className="overflow-hidden rounded-lg bg-white shadow-xl dark:bg-gray-800">
-        <div className="relative">
-          <canvas ref={canvasRef} style={{ display: 'none' }} aria-hidden="true"></canvas>
-          {imageLink ? (
-            <div className="h-40 bg-[#10151c]">
-              <Image
-                width={100}
-                height={100}
-                src={imageLink || '/placeholder.svg'}
-                className="h-full w-full object-cover object-[54%_60%]"
-                alt="Contribution Heatmap"
-              />
-            </div>
-          ) : (
-            <div className="relative h-40 items-center justify-center bg-[#10151c]">
-              <Image
-                height={100}
-                width={100}
-                src="/img/heatmapBackground.png"
-                className="heatmap-background-loader h-full w-full border-none object-cover object-[54%_60%]"
-                alt="Heatmap Background"
-              />
-              <div className="heatmap-loader"></div>
-            </div>
-          )}
+  const Heatmap = () => {
+    const canvasRef = useRef<HTMLCanvasElement | null>(null)
+    const { resolvedTheme } = useTheme()
+    const isDarkMode = (resolvedTheme ?? 'light') === 'dark'
+
+    useEffect(() => {
+      if (canvasRef.current && data?.years?.length) {
+        drawContributions(canvasRef.current, {
+          data,
+          username,
+          themeName: isDarkMode ? 'dark' : 'light',
+        })
+        const imageURL = canvasRef.current.toDataURL()
+        setImageLink(imageURL)
+      }
+    }, [isDarkMode])
+
+    return (
+      <div className="flex flex-col gap-4">
+        <div className="overflow-hidden rounded-lg bg-white dark:bg-gray-800">
+          <div className="relative">
+            <canvas ref={canvasRef} style={{ display: 'none' }} aria-hidden="true"></canvas>
+            {imageLink ? (
+              <div className="h-40">
+                <Image
+                  width={100}
+                  height={100}
+                  src={imageLink}
+                  className="h-full w-full object-cover object-[54%_60%]"
+                  alt="Contribution Heatmap"
+                />
+              </div>
+            ) : (
+              <div className="relative h-40 items-center justify-center">
+                <Image
+                  height={100}
+                  width={100}
+                  src={
+                    isDarkMode
+                      ? '/img/heatmap-background-dark.png'
+                      : '/img/heatmap-background-light.png'
+                  }
+                  className="heatmap-background-loader h-full w-full border-none object-cover object-[54%_60%]"
+                  alt="Heatmap Background"
+                />
+                <div className="heatmap-loader"></div>
+              </div>
+            )}
+          </div>
         </div>
       </div>
-    </div>
-  )
+    )
+  }
 
   const UserSummary = () => (
     <div className="mt-4 flex items-center">

frontend/public/img/heatmap-background-light.png

@@ -90,16 +90,27 @@ export const fetchHeatmapData = async (username: string): Promise<HeatmapRespons
 // The code below is a modified version of 'github-contributions-canvas'
 // https://www.npmjs.com/package/github-contributions-canvas?activeTab=code
 
+// Defined Light and Dark Themes
 const themes = {
-  blue: {
-    background: '#10151C',
-    text: '#FFFFFF',
-    meta: '#A6B1C1',
-    grade4: '#5F87A8',
-    grade3: '#46627B',
-    grade2: '#314257',
+  dark: {
+    background: '#1F2937',
+    grade0: '#2C3A4D',
     grade1: '#394d65',
-    grade0: '#202A37',
+    grade2: '#314257',
+    grade3: '#46627B',
+    grade4: '#5F87A8',
+    meta: '#A6B1C1',
+    text: '#FFFFFF',
+  },
+  light: {
+    background: '#F3F4F6', // lighter background for light mode
+    grade0: '#E7E7E6',
+    grade1: '#8BA7C0',
+    grade2: '#6C8EAB',
+    grade3: '#5C7BA2',
+    grade4: '#567498',
+    meta: '#666666',
+    text: '#333333',
   },
 }
 
@@ -174,9 +185,7 @@ const yearHeight = textHeight + (boxWidth + boxMargin) * 8 + canvasMargin
 const scaleFactor = getPixelRatio()
 
 function getTheme(opts: Options): Theme {
-  const { themeName } = opts
-  const name = themeName ?? 'blue'
-  return themes[name] ?? themes.blue
+  return themes[opts.themeName ?? 'dark']
 }
 
 function getDateInfo(data: DataStruct, date: string) {
@@ -277,7 +286,7 @@ function drawMetaData(ctx: CanvasRenderingContext2D, opts: DrawMetadataOptions)
 }
 
 export function drawContributions(canvas: HTMLCanvasElement, opts: Options) {
-  const { data } = opts
+  const { data, themeName } = opts
   let headerOffset = 0
   if (!opts.skipHeader) {
     headerOffset = headerHeight
@@ -302,6 +311,7 @@ export function drawContributions(canvas: HTMLCanvasElement, opts: Options) {
       width,
       height,
       data,
+      themeName,
     })
   }
 
@@ -314,6 +324,7 @@ export function drawContributions(canvas: HTMLCanvasElement, opts: Options) {
       offsetX,
       offsetY,
       data,
+      themeName,
     })
   })
 }