Theme Selector

<script lang="ts">
  import { browser } from '$app/environment';
  interface Props {
    class?: string;
  }
  let { class: className }: Props = $props();
  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 {className}"
  bind:value={selected}
>
  {#each styles as theme}
    <option value={theme.value}>{theme.value}</option>
  {/each}
</select>

<script lang="ts">
  import { Navbar, NavLi, NavBrand, NavHamburger, NavUl, uiHelpers, DarkMode, Dropdown, DropdownItem } from 'flowbite-svelte';
  import ThemeSelector from './ThemeSelector.svelte';  
  import { page } from '$app/state';

  let activeUrl = $state(page.url.pathname);
  let nav = uiHelpers();
  let navStatus = $state(false);

  $effect(() => {
    activeUrl = page.url.pathname;
    navStatus = nav.isOpen;
  });

  let activeClass = 'p-2 text-base hover:text-gray-600';
  let nonActiveClass = 'p-2 text-base hover:text-gray-600';
</script>

<Navbar
  breakpoint="xl"
  fluid
  class="fixed top-0 left-0 z-50 border-b border-gray-100 bg-white py-4  sm:px-12 dark:border-gray-700 dark:bg-gray-900"
  navContainerClass="xl:justify-between"
>
  <NavBrand href="/">
    <span class="self-center text-2xl font-semibold whitespace-nowrap xl:text-3xl dark:text-white"
      >Svelte Rune Highlight</span
    >
  </NavBrand>
  <div class="flex justify-end xl:order-2">
    <NavHamburger class="order-3" />
    <ThemeSelector class="hidden xl:block" />
    <DarkMode class="m-0 p-2" />
  </div>
  <NavUl
    breakpoint="xl"
    {activeUrl}
    class="order-2 xl:order-1"
    classes={{ active: activeClass, nonActive: nonActiveClass, ul: 'p-0' }}
  >
    <NavLi href="/">Home</NavLi>
    <NavLi href="/about">About</NavLi>
  </NavUl>
</Navbar>