Theme ToggleAndroid

Light/dark switch bound to ThemeProvider.

$ npx lumioui add theme-toggle

import { ThemeToggle } from "@/components/ui/theme-toggle/theme-toggle";

Props3

variant?	ThemeToggleVariant	Visual style. Default "icon".
accessibilityLabel?	string	Accessible label. Default announces the action — "Switch to light theme" / "Switch to dark theme" based on current state.
className?	string

Theme Toggle — Iconicon.tsx

theme-toggle/variants/icon.tsx open

Light/dark switch bound to ThemeProvider.

import { ThemeToggleIcon } from "@/components/ui/theme-toggle/variants/icon";

export function Example() {
  return (
    <ThemeToggleIcon />
  );
}

import * as React from "react";
import { View } from "react-native";
import { ThemeToggle } from "../theme-toggle";
import { Icon } from "../../icon/icon";
import { Spacer } from "../../stack/stack";
import { Text } from "../../text/text";
import { Glass } from "../../glass/glass";

/** ThemeToggleIcon — compact icon button staged in an Appearance card. */
export function ThemeToggleIcon() {
  return (
    <View className="w-full gap-3">
        <Glass interactive curvature="edge" className="w-full gap-3 rounded-2xl p-4">
          <Text variant="small" className="font-semibold">Appearance</Text>

          <View className="flex-row items-center gap-3">
            <Glass interactive curvature="edge" className="h-9 w-9 items-center justify-center rounded-full">
              <Icon name="settings" size="sm" color="foreground" />
            </Glass>
            <View className="gap-0.5">
              <Text variant="small">Lumo Wallet</Text>
              <Text variant="muted">Appearance follows system</Text>
            </View>
            <Spacer />
            <ThemeToggle variant="icon" />
          </View>

          <View className="flex-row gap-2 border-t border-border pt-3">
            <View className="flex-1 gap-1 rounded-xl border border-border p-2.5">
              <View className="h-1.5 w-8 rounded bg-muted-foreground/40" />
              <View className="h-1.5 w-12 rounded bg-muted-foreground/25" />
              <Text variant="muted" className="text-xs">Light</Text>
            </View>
            <View className="flex-1 gap-1 rounded-xl border border-border bg-foreground p-2.5">
              <View className="h-1.5 w-8 rounded bg-background/70" />
              <View className="h-1.5 w-12 rounded bg-background/40" />
              <Text className="text-xs text-background">Dark</Text>
            </View>
          </View>
        </Glass>
      </View>
  );
}

Theme Toggle — Pillpill.tsx

theme-toggle/variants/pill.tsx open

Light/dark switch bound to ThemeProvider.

import { ThemeTogglePill } from "@/components/ui/theme-toggle/variants/pill";

export function Example() {
  return (
    <ThemeTogglePill />
  );
}

import * as React from "react";
import { View } from "react-native";
import { ThemeToggle } from "../theme-toggle";
import { Spacer } from "../../stack/stack";
import { Text } from "../../text/text";
import { Glass } from "../../glass/glass";

/** ThemeTogglePill — labeled pill for appearance rows. */
export function ThemeTogglePill() {
  return (
    <View className="w-full gap-3">
        <Glass interactive curvature="edge" className="w-full rounded-2xl p-4">
          <View className="flex-row items-center gap-3">
            <View className="gap-0.5">
              <Text variant="small" className="font-semibold">Appearance</Text>
              <Text variant="muted">Matches sunset in Kyoto (6:42 pm)</Text>
            </View>
            <Spacer />
            <ThemeToggle variant="pill" />
          </View>
        </Glass>
      </View>
  );
}

Theme Toggle — Switchswitch.tsx

theme-toggle/variants/switch.tsx open

Light/dark switch bound to ThemeProvider.

import { ThemeToggleSwitch } from "@/components/ui/theme-toggle/variants/switch";

export function Example() {
  return (
    <ThemeToggleSwitch />
  );
}

import * as React from "react";
import { View } from "react-native";
import { ThemeToggle } from "../theme-toggle";
import { Spacer } from "../../stack/stack";
import { Text } from "../../text/text";
import { Glass } from "../../glass/glass";

/** ThemeToggleSwitch — settings-row switch treatment. */
export function ThemeToggleSwitch() {
  return (
    <View className="w-full gap-3">
        <Glass interactive curvature="edge" className="w-full rounded-2xl p-4">
          <View className="flex-row items-center gap-3">
            <View className="gap-0.5">
              <Text variant="small" className="font-semibold">Dark Mode</Text>
              <Text variant="muted">Easier on the eyes at night</Text>
            </View>
            <Spacer />
            <ThemeToggle variant="switch" />
          </View>
        </Glass>
      </View>
  );
}