SimpleThemeColorSelectorBasedOnUnocss

index.svelte

<script lang="ts">
  let hue = $state(0);
  let container;

  $inspect(hue);

  $effect(() => {
    container.style.setProperty("--hue", hue);
  });
</script>

<div bind:this={container} class="[--hue:0]">
  <div class="flex">
    <div class="px-2 bg-random-100 text-random-50">100</div>
    <div class="px-2 bg-random-200 text-random-50">200</div>
    <div class="px-2 bg-random-300 text-random-50">300</div>
    <div class="px-2 bg-random-400 text-random-50">400</div>
    <div class="px-2 bg-random-500 text-random-50">500</div>
    <div class="px-2 bg-random-600 text-random-50">600</div>
    <div class="px-2 bg-random-700 text-random-50">700</div>
    <div class="px-2 bg-random-800 text-random-50">800</div>
    <div class="px-2 bg-random-900 text-random-50">900</div>
  </div>
  <label for="hue">Hue: </label>
  <input
    class="w-100"
    id="hue"
    bind:value={hue}
    type="range"
    min="0"
    max="360"
    {onchange}
  />
</div>