ThemeToggle

UIThemeToggle uses the theme option of meeko.config.ts. It is a form that sends POST /_meeko/theme: without JavaScript, the server stores the preference and goes back to the same page. With JavaScript, the theme changes instantly, without navigating. Both examples and the header share the same preference.

A button that cycles

In mode="cycle", the default, each press moves to the next choice. Its accessible name states the current theme and the next one.

// meeko.config.ts
export default defineMeekoConfig({
  modules: ['@meekojs/ui'],
  theme: { default: 'dark' },
})

<!-- app/app.meeko -->
<UIThemeToggle />

A group of options

In mode="select", each choice is a radio. The arrow keys, Home and End move focus and the choice, as in a native radio group.

<UIThemeToggle mode="select" />

Choices, texts and icons

themes limits and orders the choices; labels and messages replace their names and the accessible texts for one toggle: by default they follow the language of the document and ui.messages (see Theming). A snippet named after each choice replaces its text, for example with an icon; the name then stays as the accessible label.

<UIThemeToggle
  bind:themes="['light', 'dark']"
  bind:labels="{ light: 'Light', dark: 'Dark' }"
  bind:messages="{
    group: 'Theme',
    unknown: 'Change theme',
    cycle: (current, next) => 'Theme: ' + current + '. Switch to ' + next,
  }">
  <snippet name="light"><svg aria-hidden="true">…</svg></snippet>
  <snippet name="dark"><svg aria-hidden="true">…</svg></snippet>
</UIThemeToggle>

API

To read or change the theme from your code, use useTheme(); to build your own switcher, use useThemeToggle() from @meekojs/meeko/framework. The UIThemeToggleProps type is exported from @meekojs/ui/runtime.