Theme Settings
A ready-made appearance screen for the theme store.
Walkthrough
1. Basic
The whole appearance screen, already bound to the theme store. Change anything here and this page changes with it.
How vivid the accent colors are.
How much the greys lean toward the accent.
Using the defaults.
<script lang="ts"> import { ThemeSettings } from 'omaris';</script><div class="w-full max-w-2xl"> <ThemeSettings /></div>2. Sections
sections narrows it to the parts you want to expose, and stack drops the tabs — which is what a settings page wants when it already has its own.
How vivid the accent colors are.
How much the greys lean toward the accent.
<script lang="ts"> import { ThemeSettings } from 'omaris';</script><div class="w-full max-w-2xl"> <ThemeSettings layout="stack" sections={['color']} customHue={false} resettable={false} /></div>3. Languages
Four languages built in — English, Arabic, Turkish and Sorani Kurdish. locale picks one, and Arabic and Kurdish turn the screen right to left. Leave it out and the screen follows the page's own lang.
مدى حيوية ألوان التمييز.
مدى ميل الرماديات نحو لون التمييز.
تُستخدم الإعدادات الافتراضية.
<script lang="ts"> import { ThemeSettings, SegmentedButton, type ThemeSettingsLocale } from 'omaris'; let locale = $state<ThemeSettingsLocale>('ar');</script><div class="flex w-full max-w-2xl flex-col gap-6"> <SegmentedButton label="Language" size="sm" check={false} bind:value={() => locale, (v) => (locale = v as ThemeSettingsLocale)} items={[ { value: 'en', label: 'English' }, { value: 'ar', label: 'العربية' }, { value: 'tr', label: 'Türkçe' }, { value: 'ckb', label: 'کوردی' } ]} /> <ThemeSettings {locale} /></div>4. Overridden
A narrow side panel, a few words of the product's own, and the cards restyled through classes. The cards fold to fewer columns on their own when the container is narrow.
Color
How vivid the accent colors are.
How much the greys lean toward the accent.
Text
The product's own typeface
Nothing changed yet.
<script lang="ts"> import { ThemeSettings } from 'omaris';</script><div class="w-80 max-w-full rounded-xl border border-border bg-surface-container-low p-4"> <ThemeSettings layout="stack" sections={['color', 'text']} labels={{ color: 'Brand color', defaults: 'Nothing changed yet.' }} classes={{ choice: 'rounded-shape-lg', choiceArt: 'h-12' }} /></div>