Auto include all available themes

skeletonlabs · Oct 1, 2024 · 7ddeeae · 7ddeeae
1 parent 850e173
commit 7ddeeae
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 27 deletions.
diff --git a/sites/next.skeleton.dev/src/components/docs/ThemeSwitch.astro b/sites/next.skeleton.dev/src/components/docs/ThemeSwitch.astro
@@ -3,25 +3,26 @@
 // Ref: https://docs.astro.build/en/tutorial/6-islands/2/
 
 import { Palette } from 'lucide-react';
+import * as themes from '@skeletonlabs/skeleton/themes';
+
+function capitalizeFirstLetter(text: string) {
+	return text.charAt(0).toUpperCase() + text.slice(1);
+}
 ---
 
 <div class="input-group grid-cols-[auto_1fr] hover:preset-tonal">
 	<div class="input-group-cell">
 		<Palette size={18} />
 	</div>
 	<select id="themesList">
-		<option value="catppuccin" selected>Catppuccin</option>
-		<option value="cerberus" selected>Cerberus</option>
-		<option value="imperial" selected>Imperial</option>
-		<option value="jupiter" selected>Jupiter</option>
-		<option value="mint" selected>Mint</option>
-		<option value="mona" selected>Mona</option>
-		<option value="pine" selected>Pine</option>
-		<option value="terminus" selected>Terminus</option>
-		<option value="reign" selected>Reign</option>
-		<option value="rose" selected>Rose</option>
-		<option value="wumpus" selected>Wumpus</option>
-		<option value="vox" selected>Vox</option>
+		<!-- Loop and generate theme list automatically -->
+		{
+			Object.keys(themes).map((themeName) => (
+				<option value={themeName} selected>
+					{capitalizeFirstLetter(themeName)}
+				</option>
+			))
+		}
 	</select>
 </div>
 

diff --git a/sites/next.skeleton.dev/tailwind.config.js b/sites/next.skeleton.dev/tailwind.config.js
@@ -21,7 +21,7 @@ export default {
 		forms,
 		// typography,
 		skeleton({
-			themes: Object.values(themes)
+			themes: Object.values(themes) // all available themes
 		})
 	]
 };
diff --git a/sites/themes.skeleton.dev/tailwind.config.js b/sites/themes.skeleton.dev/tailwind.config.js
@@ -17,20 +17,7 @@ export default {
 	plugins: [
 		forms,
 		skeleton({
-			themes: [
-				themes.catppuccin,
-				themes.cerberus,
-				themes.imperial,
-				themes.jupiter,
-				themes.mint,
-				themes.mona,
-				themes.pine,
-				themes.terminus,
-				themes.reign,
-				themes.rose,
-				themes.wumpus,
-				themes.vox
-			]
+			themes: Object.values(themes) // all available themes
 		})
 	]
 };