feat: ✨ use CSS variables for color themes

app.vue

@@ -10,6 +10,7 @@
 </template>
 
 <script setup lang="ts">
+import "~/styles/theme.css";
 import { convert } from "html-to-text";
 import "iconify-icon";
 // Use SSR-safe IDs for Headless UI

styles/theme.css

@@ -0,0 +1,25 @@
+:root {
+  --theme-dark-50: #4a4a4a;
+  --theme-dark-100: #3c3c3c;
+  --theme-dark-200: #323232;
+  --theme-dark-300: #2d2d2d;
+  --theme-dark-400: #222222;
+  --theme-dark-500: #1f1f1f;
+  --theme-dark-600: #1c1c1e;
+  --theme-dark-700: #1b1b1b;
+  --theme-dark-800: #181818;
+  --theme-dark-900: #0f0f0f;
+  --theme-dark-950: #080808;
+
+  --theme-primary-50: #fdf2f8;
+  --theme-primary-100: #fce7f3;
+  --theme-primary-200: #fbcfe8;
+  --theme-primary-300: #f9a8d4;
+  --theme-primary-400: #f472b6;
+  --theme-primary-500: #ec4899;
+  --theme-primary-600: #db2777;
+  --theme-primary-700: #be185d;
+  --theme-primary-800: #9d174d;
+  --theme-primary-900: #831843;
+  --theme-primary-950: #500724;
+}

tailwind.config.ts

@@ -1,29 +1,28 @@
 import forms from "@tailwindcss/forms";
 import typography from "@tailwindcss/typography";
 import type { Config } from "tailwindcss";
-import colors from "tailwindcss/colors";
 
-const dark = {
+const themeVariables = (color: string) => ({
-    50: "#4a4a4a",
+    50: `var(--theme-${color}-50)`,
-    100: "#3c3c3c",
+    100: `var(--theme-${color}-100)`,
-    200: "#323232",
+    200: `var(--theme-${color}-200)`,
-    300: "#2d2d2d",
+    300: `var(--theme-${color}-300)`,
-    400: "#222222",
+    400: `var(--theme-${color}-400)`,
-    500: "#1f1f1f",
+    500: `var(--theme-${color}-500)`,
-    600: "#1c1c1e",
+    600: `var(--theme-${color}-600)`,
-    700: "#1b1b1b",
+    700: `var(--theme-${color}-700)`,
-    800: "#181818",
+    800: `var(--theme-${color}-800)`,
-    900: "#0f0f0f",
+    900: `var(--theme-${color}-900)`,
-    950: "#080808",
+    950: `var(--theme-${color}-950)`,
-};
+});
 
 // Default are on https://tailwindcss.nuxtjs.org/tailwind/config#default-configuration
 export default (<Partial<Config>>{
     theme: {
         extend: {
             colors: {
-                dark,
+                dark: themeVariables("dark"),
-                primary: colors.pink,
+                primary: themeVariables("primary"),
             },
             animation: {
                 like: "like 1s ease-in-out",