Core concepts
Dark mode
Using variants to style your app in dark mode.
Overview
Prefix a class with dark: to apply it in dark mode. The color scheme comes from the provider's colorScheme: "system" (the default) follows the OS, and "light" or "dark" force one.
<View className="rounded-lg bg-white px-6 py-8 shadow-xl ring ring-gray-900/5 dark:bg-gray-800">
<Text className="text-base font-medium text-gray-900 dark:text-white">Writes upside-down</Text>
<Text className="mt-2 text-sm text-gray-500 dark:text-gray-400">
The Zero Gravity Pen can be used to write in any orientation.
</Text>
</View>
Toggling dark mode manually
Keep the user's choice in state and pass it to the provider:
const [scheme, setScheme] = useState<"light" | "dark" | "system">("system")
<AstraWindProvider colorScheme={scheme}>…</AstraWindProvider>
Dark mode theme variables
Themes can set variables per scheme with light and dark, so a class like bg-surface changes with the scheme without a dark: variant:
const theme = {
vars: { "color-surface": "var(--surface)" },
light: { surface: "oklch(1 0 0)" },
dark: { surface: "oklch(0.21 0.006 285.9)" },
}