Merge pull request #282 from Brain-Bones/feat/theme-picker

Theme Picker
skeletonlabs · Sep 26, 2022 · 24e2198 · 24e2198
2 parents a848d60 + 221b43a
commit 24e2198
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 5 deletions.
diff --git a/src/app.postcss b/src/app.postcss
@@ -8,10 +8,8 @@ body {
 	@apply h-full overflow-hidden;
 }
 
-/*
 Background Mesh Gradient - this is applied to the <body> element in app.html
 https://csshero.org/mesher/
-*/
 .bg-mesh {
 	/* prettier-ignore */
 	background-image:

diff --git a/src/docs/DocsAppBar/DocsAppBar.svelte b/src/docs/DocsAppBar/DocsAppBar.svelte
@@ -8,7 +8,7 @@
 	import SvgIcon from '$lib/components/SvgIcon/SvgIcon.svelte';
 
 	// Stores
-	import { storeMobileDrawer } from '$docs/stores';
+	import { storeTheme, storeMobileDrawer } from '$docs/stores';
 
 	// Drawer Handler
 	function drawerOpen(): void {
@@ -91,6 +91,15 @@
 
 		<Divider vertical borderWidth="border-l-2" />
 
+		<select bind:value={$storeTheme}>
+			<option value="skeleton">Skeleton</option>
+			<option value="rocket">Rocket</option>
+			<option value="modern">Modern</option>
+			<option value="seafoam">Seafoam</option>
+			<option value="vintage">Vintage</option>
+			<option value="sahara">Sahara</option>
+		</select>
+
 		<!-- Light Switch -->
 		<section class="flex space-x-4">
 			<LightSwitch origin="tr" />

diff --git a/src/docs/stores.ts b/src/docs/stores.ts
@@ -5,6 +5,9 @@ import { writable, type Writable } from 'svelte/store';
 // Set within root layout, persists current SvelteKit $page.url.pathname
 export const storeCurrentUrl: Writable<string | undefined> = writable(undefined);
 
+// Persists select theme
+export const storeTheme: Writable<string> = writable('skeleton');
+
 // Persists the tab selection for the user's preferred framework
 export const storeFramework: Writable<string> = writable('sveltekit');
 

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -5,9 +5,14 @@
 	import { storeHighlightJs } from '$lib/utilities/CodeBlock/stores';
 	storeHighlightJs.set(hljs);
 
+	// SvelteKit Imports
+	import { browser } from '$app/environment';
 	import { page } from '$app/stores';
 	import { afterNavigate } from '$app/navigation';
 
+	// Stores
+	import { storeCurrentUrl, storeTheme } from '$docs/stores';
+
 	// Components & Utilities
 	import AppShell from '$lib/components/AppShell/AppShell.svelte';
 	import Dialog from '$lib/utilities/Dialog/Dialog.svelte';
@@ -19,8 +24,15 @@
 	import DocsDrawer from '$docs/DocsNavigation/DocsDrawer.svelte';
 	import DocsFooter from '$docs/DocsFooter/DocsFooter.svelte';
 
-	// Stores
-	import { storeCurrentUrl } from '$docs/stores';
+	// Theme Imports
+	// import style from "swiper/css/bundle.css?inline";
+	import skeleton from '$lib/themes/theme-skeleton.css?inline';
+	import rocket from '$lib/themes/theme-rocket.css?inline';
+	import modern from '$lib/themes/theme-modern.css?inline';
+	import seafoam from '$lib/themes/theme-seafoam.css?inline';
+	import vintage from '$lib/themes/theme-vintage.css?inline';
+	import sahara from '$lib/themes/theme-sahara.css?inline';
+	const themes: any = { skeleton, rocket, modern, seafoam, vintage, sahara };
 
 	// Skeleton Theme: skeleton|rocket|modern|seafoam|vintage|sahara|test
 	import '$lib/themes/theme-skeleton.css';
@@ -43,8 +55,16 @@
 
 	// Disable left sidebar on homepage
 	$: slotSidebarLeft = $page.url.pathname === '/' ? 'w-0' : 'bg-black/5 lg:w-auto';
+	$: currentTheme = `\<style\>${themes[$storeTheme]}}\</style\>`;
+
+	// Enable bg-mesh only if Skeleton theme in use.
+	$: if (browser) document.body.classList.toggle('bg-mesh', $storeTheme === 'skeleton');
 </script>
 
+<svelte:head>
+	{@html currentTheme}
+</svelte:head>
+
 <!-- Overlays -->
 <Dialog />
 <Toast />