Theme Selector

<script lang="ts">
	import { browser } from '$app/environment';
	const stylesImport = import.meta.glob('./highlight/styles/*.css');
	/*eslint no-undef: "off"*/
	const localStorageName = __NAME__.replace(/[\s-]/g, '_').toUpperCase() + '_CODE_BLOCK_STYLE';

	let selected = $state(browser && (localStorage.getItem(localStorageName) ?? 'material-darker'));

	const styles = Object.entries(stylesImport).map(([path]) => ({
		value: path.slice(path.lastIndexOf('/') + 1, -4),
		name: path.slice(path.lastIndexOf('/') + 1, -4)
	}));

	$effect(() => {
		let link: HTMLLinkElement;
		(async () => {
			const css = await import(`./highlight/styles/${selected}.css?url`);
			link = document.createElement('link');

			link.rel = 'stylesheet';
			link.href = css.default;
			document.head.append(link);
		})();
		if (browser && selected) {
			// set selected style to localStorage
			localStorage.setItem(localStorageName, selected);
		}
		return () => {
			// clean up
			link.remove();
		};
	});
</script>

<select
class="w-32 border border-gray-200 p-1 text-gray-800 md:w-36 dark:bg-white dark:text-gray-800"
bind:value={selected}

>

    {#each styles as theme}
    	<option value={theme.value}>{theme.value}</option>
    {/each}

</select>

<script lang="ts">
	import { Navbar, NavLi, NavBrand, NavUl, uiHelpers, Darkmode } from 'svelte-5-ui-lib';
	import ThemeSelector from './ThemeSelector.svelte';
	import { page } from '$app/state';

	let activeUrl = $state(page.url.pathname);
	$effect(() => {
		activeUrl = page.url.pathname;
	});

	let nav = uiHelpers();

	let navStatus = $state(false);
	let toggleNav = nav.toggle;
	let closeNav = nav.close;
	let divClass = 'ml-auto w-full';
	let ulclass =
		'flex flex-col py-3 lg:flex-row lg:my-0 order-1 font-medium dark:lg:bg-transparent lg:bg-white lg:border-0 lg:space-x-2 xl:space-x-4';
	let navClass =
		'w-full divide-gray-200 border-gray-200 bg-white text-gray-500 dark:divide-gray-700 dark:border-gray-700 dark:transparent dark:text-gray-400 sm:px-4';

	$effect(() => {
		navStatus = nav.isOpen;
	});
</script>

<header
	class="sticky top-0 z-40 mx-auto w-full flex-none border-b border-gray-200 bg-white dark:border-gray-600 dark:bg-gray-900"
>
	<Navbar {navClass} {toggleNav} {closeNav} {navStatus} breakPoint="lg" fluid div2Class={divClass}>
		{#snippet brand()}
			<NavBrand siteName="Svelte Rune Highlight" spanClass="sm:text-2xl" />
			<div class="ml-auto flex items-center lg:order-1">
				<Darkmode class="mr-4 inline-block hover:text-gray-900 dark:hover:text-white" />
				<ThemeSelector />
			</div>
		{/snippet}
		<NavUl {activeUrl} class={ulclass}>
			<NavLi href="/">Home</NavLi>
			<NavLi href="/about">About</NavLi>
		</NavUl>
	</Navbar>
</header>