Theme Select

<script setup lang="ts">
import { ref } from "vue";
import MtThemeSelect from "@shopware-ag/meteor-component-library/MtThemeSelect";
import type { Theme } from "@shopware-ag/meteor-component-library";

const theme = ref<Theme>("system");
</script>

<template>
  <mt-theme-select v-model="theme" label="Color theme" />
</template>

Usage

Theme Select lets users choose the application color theme: light, dark, or following the operating system preference. Use it in settings screens, profile pages, or anywhere a theme preference belongs. It is a controlled component: it only reports the chosen theme through v-model and does not apply or persist the theme itself, which keeps the host application in charge of how the choice takes effect.

import { MtThemeSelect } from "@shopware-ag/meteor-component-library";

Examples

Pairing with useTheme

The useTheme composable resolves the system option against prefers-color-scheme, applies the resolved value as data-theme, and persists the choice. Binding its theme ref to the select is all a typical app needs.

<script setup lang="ts">
import MtThemeSelect from "@shopware-ag/meteor-component-library/MtThemeSelect";
import MtText from "@shopware-ag/meteor-component-library/MtText";
// useTheme has no subpath export, so it is imported from the barrel.
import { useTheme } from "@shopware-ag/meteor-component-library";

// Persistence and global application are disabled so the docs page itself
// stays untouched. Omit these options in your app.
const { theme, resolvedTheme } = useTheme({
  storageKey: null,
  applyToTarget: false,
});
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 16px">
    <mt-theme-select v-model="theme" label="Color theme" />

    <mt-text>Resolved theme: {{ resolvedTheme }}</mt-text>
  </div>
</template>

API reference

Props

Events

Best practices

Behavior

• Theme Select accepts and emits one of three values through modelValue: "light", "dark", or "system", and defaults to "system".
• The component is purely presentational. Resolving system, writing data-theme, and persisting the choice is the host's responsibility, which useTheme handles out of the box.
• Option labels are localized (English and German) through the library's i18n setup.
• Additional Select props such as small or error fall through to the underlying select.

Accessibility

• Keyboard and screen reader behavior follow the underlying Select component.
• Each option is labelled with text; the sun, moon, and desktop icons are decorative (aria-hidden), so the choice never relies on iconography alone.
• Provide a visible label so the setting is announced with its purpose.

Related components

• Select: the general-purpose select this component builds on, for arbitrary option sets.
• useTheme: the composable that resolves, applies, and persists the theme this component selects.