feat: handle dark theme in cards

components/Card.tsx

@@ -6,7 +6,14 @@ export const Card: FC<{ children?: React.ReactNode; className?: string }> = ({
 }) => {
   return (
     <div
-      className={`flex flex-col gap-2 bg-card-background items-start border-card-border-color border-card-border-width rounded-card-radius shadow-card-shadow shadow-card-color ${className}`}
+      className={`
+        flex flex-col gap-2  items-start
+        bg-card-background dark:bg-card-background-dark
+        border-card-border-color dark:border-card-border-color-dark
+        shadow-card-shadow
+        shadow-card-color dark:shadow-card-color-dark
+        border-card-border-width
+        rounded-card-radius ${className}`}
     >
       {children}
     </div>

theme.ts

@@ -0,0 +1,54 @@
+const colors = require("tailwindcss/colors");
+import { generateColorRange } from "./common/generateColors";
+
+const primary = generateColorRange("#4E17FF");
+
+export default {
+  darkMode: ["selector"],
+  // darkMode: [["media", ["@media (prefers-color-scheme: dark)", "&:is(.dark *)"],
+  forceDarkMode: true,
+  theme: {
+    extend: {
+      colors: {
+        black: colors.black,
+        white: colors.white,
+        primary: primary,
+        "card-text-color": colors.white,
+        "card-border-color": colors.black,
+        "card-background": "rgb(255 255 255 / 5%)",
+        "card-text-color-dark": colors.black,
+        "card-border-color-dark": colors.black,
+        "card-background-dark": "rgb(0, 0, 0 / 5%)",
+        "accordion-header-color": colors.black,
+        "accordion-header-background": primary["500"],
+        "accordion-header-active-color": colors.black,
+        "accordion-header-active-color-dark": colors.gray["100"],
+        "accordion-header-active-background": colors.blue["100"],
+        "accordion-header-active-background-dark": colors.blue["900"],
+        "step-active-border-color": colors.orange["400"],
+        "step-complete-border-color": colors.green["500"],
+        "button-text-color": colors.gray["50"],
+        "button-border-color": colors.black,
+        "button-bg-color": primary["500"],
+        "button-bg-hover": primary["600"],
+        "button-bg-focus": primary["600"],
+        "button-bg-active": primary["700"],
+      },
+      boxShadow: {
+        "card-shadow":
+          "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+        "button-shadow":
+          "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+      },
+      borderWidth: {
+        "card-border-width": "1px",
+        "button-border-width": "0px",
+      },
+      borderRadius: {
+        "card-radius": "0.25rem",
+        "button-radius": "0.25rem",
+        "video-container-radius": "0.5rem",
+      },
+    },
+  },
+};