SvelteKit global Theme changer

[rhscjohn-dev]

Here are two examples of changing your app theme at the global level.

The first example is by using a Dropdown component and the second example is by Select component.

DaisyUI version 2.2.2

theme.svelte

<script>
  // DaisyUI version 2.2.2
  // array of themes
  const themes = [
    "light",
    "dark",
    "cupcake",
    "bumblebee",
    "emerald",
    "corporate",
    "synthwave",
    "retro",
    "cyberpunk",
    "valentine",
    "halloween",
    "garden",
    "forest",
    "aqua",
    "lofi",
    "pastel",
    "fantasy",
    "wireframe",
    "black",
    "luxury",
    "dracula",
    "cmyk",
    "autumn",
    "business",
    "acid",
    "lemonade",
  ];
  // dropdown code
  let themeClicked = ""; //drowdown
  const onClickChangeTheme = (event) => {
    console.log(
      `onClickDropDown: new theme - ${
        event.target.innerHTML
      }, current theme - ${
        document.getElementsByTagName("html")[0].dataset.theme
      }`
    );
    themeClicked = event.target.innerHTML;
    document.getElementsByTagName("html")[0].dataset.theme = themeClicked;
    window.document.activeElement.blur();
  };
  // select code
  let themeSelected; //select
  function onChangeSelect(event) {
    console.log(
      `onChangeSelect: new theme - ${event.target.value}, current theme - ${
        document.getElementsByTagName("html")[0].dataset.theme
      }`
    );
    document.getElementsByTagName("html")[0].dataset.theme = themeSelected;
    window.document.activeElement.blur();
  }
</script>

<svelte:head>
  <title>Theme</title>
</svelte:head>
<!-- change Theme by Dropdown -->
<div class="m-4 text-xl font-semibold">Change Theme by Dropdown</div>
<div class="dropdown ">
  <label tabindex="0" for="changeTheme" class="m-1 btn">Change Theme</label>
  <!-- note use of h-60 and overflow-auto to contain the height of the dropdown due to the nmbr of themes -->
  <ul
    on:click={onClickChangeTheme}
    tabindex="0"
    class="p-2 shadow menu dropdown-content bg-base-200 rounded-box
    w-40 h-60 overflow-auto"
  >
    {#each themes as theme}
      <li class="p-2 hover:ring hover:ring-primary-focus ">{theme}</li>
    {/each}
  </ul>
</div>
<pre>You chose theme: {themeClicked}</pre>
<!-- change theme by Select -->
<div class="m-4 text-xl font-semibold">Change Theme by Select</div>
<select
  on:change={onChangeSelect}
  bind:value={themeSelected}
  class="select select-primary w-full max-w-xs"
>
  <option>Choose a Theme</option>
  {#each themes as theme}
    <option>{theme}</option>
  {/each}
</select>
<pre>You selected theme: {themeSelected}</pre>