Skip to content
omaris

System

Theme Settings

A ready-made appearance screen for the theme store.

import { ThemeSettings } from 'omaris'
Learn

Examples

Basic

The whole appearance screen, already bound to the theme store. Change anything here and this page changes with it.

Appearance
Accent color
Saturation 100%

How vivid the accent colors are.

Surface tint 100%

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>

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.

Appearance
Accent color
Saturation 100%

How vivid the accent colors are.

Surface tint 100%

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>

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.

المظهر
لون التمييز
التشبّع 100%

مدى حيوية ألوان التمييز.

صبغة الأسطح 100%

مدى ميل الرماديات نحو لون التمييز.

تُستخدم الإعدادات الافتراضية.

<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>

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

Appearance
Brand color
Saturation 100%

How vivid the accent colors are.

Surface tint 100%

How much the greys lean toward the accent.

Text

Text size
Typeface

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>

When to use it

Use it for

  • The appearance screen of a product built on omaris. Put <ThemeSettings /> behind a "Customise" button, in a Dialog or a Sheet.
  • Every knob of the theme store: colour, shape, density, type, motion. Each changes the whole product live. The store and its tokens are explained in Theming.
  • A settings page that already has tabs. layout="stack" drops the tabs and gives each section a heading.
  • Only what the product honours: sections={['color']}, with customHue={false} to keep people on the presets.
  • A product in English, Arabic, Turkish or Sorani Kurdish. It follows the page's lang, or locale="ar" | "tr" | "ckb" | "en" picks one; Arabic and Kurdish mirror the screen. labels swaps any word.

Not for

  • A dark-mode toggle in the app bar → a Switch or an Icon Button bound to the theme store (see Theming). This is the whole screen, not one row.
  • Setting the brand for everyone → tokens in app.css and the provider's defaults (Tokens). This screen is one person's preference.
  • A colour for a record, like a tag or a label → Color Picker.
  • An app without OmarisProvider → nothing works. The provider applies the theme and remembers it.

Do

  • Wrap the app in OmarisProvider so the choice applies live and survives a reload.
  • Put it where people look for it, under Settings or Appearance, and give it a measure like max-w-2xl.
  • Trim sections to what the product honours. If the typeface is pinned, drop text; if the density is fixed, drop layout.
  • Keep resettable on. Someone who picked the wrong hue needs a way back.
  • Set lang on <html> and let the screen follow it, rather than passing locale in one place and forgetting it in another.

Don't

  • Ship all five sections in a one-screen tool. Two sections in stack is enough.
  • Restyle the swatches through classes to match the brand. The swatches are the presets; their colours are the point.
  • Put it in onboarding. People choose a theme after they have seen the product.
  • Mount two on one page. Both write the same store.
  • Translate it by wrapping it in your own strings. Pass labels for the words you want to change; the rest stay in the chosen language.
Pairs with Dialog Sheet Switch Tabs Color Picker

Quick reference

layout
  • tabs (default)
  • stack

API

ThemeSettings

A ready-made appearance screen for the theme store.

Drop it in a dialog, a sheet or a settings page and your users get every knob the library has — color, shape, density, type, motion and contrast — each one a picture of what it does, changing the whole product live and remembered between visits (with OmarisProvider). It speaks English, Arabic, Turkish and Sorani Kurdish, and follows the page's lang unless you pass locale:

import { ThemeSettings } from 'omaris' 
<ThemeSettings /><ThemeSettings locale="ar" /><ThemeSettings layout="stack" sections={['color', 'shape', 'text']} />

Parts

Every element this renders is reachable from outside. Pass Tailwind for one part as classes={{ part: '…' }}; class covers the root and is merged last, so it always wins.

root
No description in the source yet.
section
No description in the source yet.
heading
No description in the source yet.
row
No description in the source yet.
label
No description in the source yet.
hint
No description in the source yet.
choices
A set of picture cards — appearance, corners, density, type, motion.
choice
One picture card.
choiceArt
The picture inside a card.
choiceLabel
No description in the source yet.
swatch
A preset swatch.
swatchDot
No description in the source yet.
swatchLabel
No description in the source yet.
footer
No description in the source yet.

Props

layout

Defaults to 'tabs'

ThemeSettingsLayout
tabs
stack
sections

Defaults to ALL

ThemeSettingsSection[]

Which groups to show, in order.

resettable

Defaults to true

boolean

Show the "Reset" row at the bottom.

customHue

Defaults to true

boolean

Offer the custom hue slider alongside the presets.

locale
ThemeSettingsLocale

The language — en, ar, tr or ckb (Sorani Kurdish). Arabic and Kurdish lay the screen out right to left. Leave it out to follow the nearest lang attribute on the page, falling back to English.

labels
Partial<ThemeSettingsLabels>

Replace any of the words, over whichever language is showing.

class
string
classes
ThemeSettingsClasses

Per-part Tailwind overrides. class still covers the root.