First colors

data/skills.tsx

@@ -17,6 +17,11 @@ export interface CardColors {
     background: string;
     bars: string;
     heading: string;
+    useDarkColor: boolean;
+    badges?: {
+        background: string;
+        useDarkColor: boolean;
+    }
 }
 
 export interface SkillCard {
@@ -113,11 +118,16 @@ export const skills = (sizeCardIcons?: string, sizeBadgeIcons?: string): SkillSe
                 name: "Spring Boot",
                 icon: <Springboot size={sizeBadgeIcons} />
             }],
-            /*colors: {
+            colors: {
-                background: "#2196f3",
+                background: "#A4C7EA",
-                bars: "#217fff",
+                bars: "#706EB8",
-                heading: "#2043ff"
+                heading: "#2A2885",
-            }*/
+                useDarkColor: true,
+                badges: {
+                    background: "#2A2885",
+                    useDarkColor: false,
+                }
+            }
         }, {
             title: "Embedded Programming",
             skillBars: [{
@@ -132,11 +142,16 @@ export const skills = (sizeCardIcons?: string, sizeBadgeIcons?: string): SkillSe
                 name: "ESP",
                 icon: <Espressif size={sizeBadgeIcons} />
             }],
-            /*colors: {
+            colors: {
                 background: "#EA8585",
                 bars: "#E53E3E",
-                heading: "#661C1C"
+                heading: "#661C1C",
-            }*/
+                useDarkColor: true,
+                badges: {
+                    background: "#661C1C",
+                    useDarkColor: false,
+                }
+            }
         }, {
             title: "Operating Systems",
             skillBars: [],

pages/me.tsx

@@ -29,13 +29,11 @@ const SkillCard: NextPage<{ card: SkillCard }> = ({ card }) => {
         background: card.colors?.background,
         "--ch-color": card.colors?.heading,
         "--bar-color": card.colors?.bars,
-        color: undefined,
+        color: card.colors?.useDarkColor === undefined ? undefined : (card.colors?.useDarkColor ? "#222" : "#ddd"),
+        "--badge-bg": card.colors?.badges?.background,
+        "--badge-color": card.colors?.badges?.useDarkColor === undefined ? undefined : (card.colors?.badges?.useDarkColor ? "#222" : "#ddd"),
     } as React.CSSProperties;
 
-    try {
-        cardStyle.color = Color(cardStyle.background).isDark() ? "#ddd" : "#222";
-    } catch {}
-
     return <div className={styles.skillCard} style={cardStyle}>
     <h3>{card.title}</h3>
     <div className={styles.skillBarsSet}>

styles/Blog/AboutMe.module.scss

@@ -44,6 +44,8 @@
     border: 1px solid var(--blog_content-border);
     border-radius: 0.5em;
     padding: 5px;
+    background: var(--badge-bg, transparent);
+    color: var(--badge-color, inherit);
 
     & > span {
         align-self: center;