Inputs

ThemeToggle

Switches between light and dark through the colorScheme store. Built for the AppShell railBottom slot.

<script>
  import { ThemeToggle } from "@codeatlasdev/ui";
</script>

<ThemeToggle />

The toggle reads and writes the colorScheme store, so call colorScheme.init() once in your root layout. The choice is saved to localStorage and applied before first paint by the theme script. The default name is localized.

<script lang="ts">
  import { ThemeToggle } from '@codeatlasdev/ui';
</script>

<div class="rail">
  <ThemeToggle />
</div>

<style>
  .rail {
    width: 52px;
  }
</style>