Dark Mode

Adding dark mode to your app.
ThemeProvider follows the OS color scheme by default (defaultTheme="system"). useTheme() works like next-themes, which shadcn uses on the web.

Mode toggle

components/mode-toggle.tsx
import { MoonIcon, SunIcon } from "lucide-react-native" import { useTheme } from "@astrawind/ui" import { Button } from "@astrawind/ui/button" import { Icon } from "@astrawind/ui/icon" export function ModeToggle() { const { resolvedTheme, setTheme } = useTheme() return ( <Button variant="outline" size="icon" aria-label="Toggle theme" onPress={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")} > <Icon as={resolvedTheme === "dark" ? SunIcon : MoonIcon} /> </Button> ) }

Remembering the choice

Use onThemeChange to save the choice (e.g. with AsyncStorage or expo-secure-store) and pass it back as defaultTheme on the next launch. forcedTheme fixes a screen to light or dark.

Styling for dark mode

shadcn's variables switch automatically. For your own classes, use the dark: variant: className="bg-white dark:bg-zinc-900".
Built with @astrawind/ui and @astrawind/css. Components ported from shadcn/ui (MIT).