Parse theme names from .css file ([data-theme="..."]) instead of outdated themes.json

Author: techniq

packages/tailwind/src/lib/theme.ts

@@ -46,19 +46,29 @@ export function createThemeColors(colorSpace: SupportedColorSpace) {
 }
 
 /**
- * Get themes names split into light and dark collections determined by `color-scheme` property
+ * Get themes names (`[data-theme="..."]`) split into light and dark collections determined by `color-scheme` property
  */
-export function getThemeNames(themes: Record<string, any>) {
-  const light: string[] = [];
-  const dark: string[] = [];
+export function getThemeNames(cssContent: string) {
+  const themeBlocks = cssContent.split(/\[data-theme=/);
 
-  entries(themes).map(([themeName, props]) => {
-    if (props['color-scheme'] === 'dark') {
+  const light = [];
+  const dark = [];
+
+  // Skip first element as it's content before first theme
+  for (let i = 1; i < themeBlocks.length; i++) {
+    const block = themeBlocks[i];
+
+    // Extract theme name
+    const nameMatch = block.match(/^"([^"]+)"/);
+    if (!nameMatch) continue;
+    const themeName = nameMatch[1];
+
+    if (block.includes('color-scheme: dark')) {
       dark.push(themeName);
     } else {
       light.push(themeName);
     }
-  });
+  }
 
   return { light, dark };
 }

sites/docs/src/routes/+layout.server.ts

@@ -1,11 +1,11 @@
 import { env } from '$env/dynamic/private';
 
-import themes from '../../themes.json' assert { type: 'json' };
 import { getThemeNames } from '@layerstack/tailwind';
+import themeCss from '@layerstack/tailwind/themes/all.css?raw';
 
 export async function load() {
   return {
-    themes: getThemeNames(themes),
+    themes: getThemeNames(themeCss),
     // themes: { light: ['light'], dark: ['dark'] },
     pr_id: env.VERCEL_GIT_PULL_REQUEST_ID,
   };