fix: converting card tag color for light theme

src/components/CardTag/CardTag.tsx

@@ -1,5 +1,5 @@
 import { CardTagSchema } from "../../client";
-import { Pill, useMantineColorScheme } from "@mantine/core";
+import { darken, lighten, Pill, useMantineColorScheme } from "@mantine/core";
 
 type Props = {
     tag: Partial<CardTagSchema>;
@@ -7,19 +7,25 @@ type Props = {
 
 const CardTag = ({ tag }: Props) => {
     const theme = useMantineColorScheme();
+    const isInherit = tag.tagColor!.backgroundColor === "inherit";
 
-    let color = "lightgray";
-    if (tag?.tagColor?.backgroundColor === "inherit" && theme.colorScheme == "light") {
-        color = "gray";
+    let color = tag.tagColor!.color;
+    let backgroundColor = tag.tagColor!.backgroundColor;
+
+    if (!(theme.colorScheme == "dark" || isInherit)) {
+        color = darken(color, 0.95);
+        backgroundColor = lighten(backgroundColor, 0.3);
     }
 
     return (
         <Pill
             key={tag.id}
             style={{
+                opacity: 0.7,
                 color,
-                backgroundColor: tag?.tagColor?.backgroundColor,
-                border: "1px solid " + tag?.tagColor?.color,
+                backgroundColor,
+                border: "1px solid",
+                borderColor: color,
             }}
         >
             {tag.name}