Stareezy UI

ThemeProvider

Wrap your app with ThemeProvider and pass a theme prop. Built-in themes are "light" and "dark":

import { ThemeProvider } from '@stareezy-ui/tokens'

// Built-in themes
<ThemeProvider theme="light">...</ThemeProvider>
<ThemeProvider theme="dark">...</ThemeProvider>

// Custom theme override — partial, inherits rest from parent
<ThemeProvider theme={{ text: { primary: colors.celurenBlue[700] } }}>
  ...
</ThemeProvider>

✦

On web, theme switching requires zero JavaScript re-renders — only a data-theme attribute change on the root element. CSS variables do the rest.

useTheme Hook

Access the current theme's resolved token values anywhere in the tree:

import { useTheme } from '@stareezy-ui/tokens'

function MyComponent() {
  const theme = useTheme()

  return (
    <Box style={{ backgroundColor: theme.backgrounds.primary.value }}>
      <Text style={{ color: theme.text.primary.value }}>
        Themed content
      </Text>
    </Box>
  )
}

useThemeSwitch Hook

Toggle between themes from anywhere in the tree without prop drilling:

import { useThemeSwitch } from '@stareezy-ui/tokens'

function ThemeToggle() {
  const { toggleTheme, isDark } = useThemeSwitch()

  return (
    <Button
      onPress={toggleTheme}
      text={isDark ? '☀ Light mode' : '☾ Dark mode'}
    />
  )
}

Semantic Color Tokens

Semantic tokens map roles to primitive colors and automatically update when the theme changes:

semanticColors.text.primary→ raisinBlack[800]

semanticColors.text.secondary→ beauBlue[700]

semanticColors.text.placeholder→ beauBlue[600]

semanticColors.backgrounds.disabled→ beauBlue[50]

semanticColors.border.primaryBrand→ celurenBlue[500]

Nested Themes

Child ThemeProvider instances override only the tokens they specify and inherit the rest from the nearest ancestor:

<ThemeProvider theme="light">
  <Box>Normal light content</Box>

  <ThemeProvider theme="dark">
    <Box>This section is dark</Box>

    <ThemeProvider theme={{ text: { primary: colors.celurenBlue[300] } }}>
      <Box>Custom text color, dark background</Box>
    </ThemeProvider>
  </ThemeProvider>
</ThemeProvider>

Web: CSS Variables

On web, ThemeProvider injects CSS variables under [data-theme="name"]:

[data-theme="light"] {
  --text-primary: #0F1010;
  --backgrounds-disabled: #FAFBFF;
  --border-primaryBrand: #024CCE;
}

[data-theme="dark"] {
  --text-primary: #ffffff;
  --backgrounds-disabled: #1a1a2e;
  --border-primaryBrand: #4E82DD;
}

ℹ