Add multiple theme colors

src/styles/base.css

@@ -2,6 +2,23 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  :root {
+    --color-text-base: 40, 39, 40;
+    --color-text-accent: 0, 108, 172;
+    --color-fill: 251, 254, 251;
+    --color-accent: 0, 108, 172;
+    --color-card: 230, 230, 230;
+  }
+  .theme-dark {
+    --color-text-base: 250, 253, 254;
+    --color-text-accent: 26, 217, 217;
+    --color-fill: 38, 45, 54;
+    --color-accent: 26, 217, 217;
+    --color-card: 63, 75, 90;
+  }
+}
+
 @layer components {
   .btn-blue {
     @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;

tailwind.config.cjs

@@ -1,8 +1,31 @@
 /** @type {import('tailwindcss').Config} */
-module.exports = {
-	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
-	theme: {
-		extend: {},
-	},
-	plugins: [],
+
+function withOpacity(variableName) {
+  return ({ opacityValue }) => {
+    if (opacityValue !== undefined) {
+      return `rgba(var(${variableName}), ${opacityValue})`;
+    }
+    return `rgb(var(${variableName}))`;
+  };
 }
+
+module.exports = {
+  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+  theme: {
+    extend: {
+      textColor: {
+        skin: {
+          base: withOpacity("--color-text-base"),
+          accent: withOpacity("--color-text-accent"),
+        },
+      },
+      backgroundColor: {
+        skin: {
+          fill: withOpacity("--color-fill"),
+          card: withOpacity("--color-card"),
+        },
+      },
+    },
+  },
+  plugins: [],
+};