kuito.
Loslegen

appearance

Namespace
Die Übersetzung dieser Seite fehlt oder ist veraltet, daher wird sie auf Englisch angezeigt. Auf Englisch lesen

Read the system color scheme and font scale. Use these signals when JavaScript behavior must follow appearance; use CSS media queries for most visual styling.

Read appearance preferences

tsx
import { Text, watch, appearance } from 'kuito';

appearance.colorScheme.value; // 'light' | 'dark' | null
appearance.fontScale.value; // 1 by default

// In a component, a read in JSX or a watch follows the platform.
<Text>{appearance.colorScheme.value === 'dark' ? 'Night' : 'Day'}</Text>;
watch(appearance.fontScale, (scale) => console.log(scale));

Behavior and limits

appearance.colorScheme and appearance.fontScale are read-only signals. Read them inside JSX or watch callbacks to follow changes. Font scaling is already applied by native text; do not multiply every font size again. Use @media (prefers-color-scheme: dark) for theme tokens and rules.

Continue

Read Styles for the related workflow. The API reference lists every method, option, event and return type.

Referenz

Exporte 4

Methoden, Konstanten und Typen, die dieser native Namespace bereitstellt.

typeColorSchemeNameThe user's color scheme, 'light' or 'dark', as appearance.colorScheme reports it.typeAppearancePreferencesThe user's display preferences together, for tests and code that need both at once.valuecolorSchemeCSS's prefers-color-scheme; null when the platform has no preference.valuefontScaleThe text size multiplier the user chose: 1 by default.
Generiert aus den öffentlichen TypeScript-Deklarationen: Signaturen, Props und Standardwerte stammen aus der geprüften Quelle, Beschreibungen aus deren JSDoc. Kein Standardwert ist erfunden.