change tag colors based on color mode

Author: pettinarip

src/components/IssuesList/index.tsx

@@ -1,24 +1,44 @@
 import Emoji from "react-emoji-render"
 import {
   Avatar,
+  ColorMode,
   Flex,
   HStack,
   SimpleGrid,
   SimpleGridProps,
   Stack,
   Text,
+  useColorMode,
 } from "@chakra-ui/react"
 
 import type { GHIssue } from "@/lib/types"
 
+import { getContrastYIQ } from "@/lib/utils/getContrastYIQ"
+
 import InlineLink from "../Link"
 import Tag from "../Tag"
 
 type IssuesListProps = SimpleGridProps & {
   issues: GHIssue[]
 }
 
+function pickTagColorsByColorMode(color: string, colorMode: ColorMode) {
+  if (colorMode === "dark") {
+    return {
+      color: `#${color}`,
+      bgColor: `#${color}22`,
+    }
+  } else {
+    return {
+      color: getContrastYIQ(`#${color}`),
+      bgColor: `#${color}`,
+    }
+  }
+}
+
 const IssuesList = ({ issues, ...props }: IssuesListProps) => {
+  const { colorMode } = useColorMode()
+
   return (
     <SimpleGrid columns={[1, null, 2]} spacing={4} {...props}>
       {issues.map((issue) => (
@@ -51,8 +71,7 @@ const IssuesList = ({ issues, ...props }: IssuesListProps) => {
                 <Tag
                   key={label.id}
                   label={<Emoji text={label.name} />}
-                  color={`#${label.color}`}
-                  bgColor={`#${label.color}22`}
+                  {...pickTagColorsByColorMode(label.color, colorMode)}
                 />
               )
             })}

src/lib/utils/getContrastYIQ.ts

@@ -0,0 +1,21 @@
+export const getContrastYIQ = (hexcolor: string): "black" | "white" => {
+  // Convert hex to RGB first
+  let r = 0,
+    g = 0,
+    b = 0
+  if (hexcolor.length == 4) {
+    r = parseInt(hexcolor[1] + hexcolor[1], 16)
+    g = parseInt(hexcolor[2] + hexcolor[2], 16)
+    b = parseInt(hexcolor[3] + hexcolor[3], 16)
+  } else if (hexcolor.length == 7) {
+    r = parseInt(hexcolor[1] + hexcolor[2], 16)
+    g = parseInt(hexcolor[3] + hexcolor[4], 16)
+    b = parseInt(hexcolor[5] + hexcolor[6], 16)
+  }
+
+  // Calculate luminance
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
+
+  // Return black for bright colors, white for dark colors
+  return luminance > 0.5 ? "black" : "white"
+}