@wecareu/theme

Provedor de tema para o sistema de design WeCareU.

Instalação

pnpm add @wecareu/theme @wecareu/tokens

Uso

Configuração Básica

import { ThemeProvider } from '@wecareu/theme';
import { App } from './App';

export default function Root() {
  return (
    <ThemeProvider initialScheme="light">
      <App />
    </ThemeProvider>
  );
}

Usando o Hook useTheme

import { useTheme } from '@wecareu/theme';
import { View, Text } from 'react-native';

export function MyComponent() {
  const theme = useTheme();
  
  return (
    <View style={{ backgroundColor: theme.colors.background }}>
      <Text style={{ color: theme.colors.onBackground }}>
        Olá mundo!
      </Text>
    </View>
  );
}

Alternando Temas

import { useTheme } from '@wecareu/theme';
import { Button } from 'react-native';

export function ThemeToggle() {
  const theme = useTheme();
  
  return (
    <Button
      title={`Mudar para ${theme.scheme === 'light' ? 'escuro' : 'claro'}`}
      onPress={theme.toggleScheme}
    />
  );
}

API

ThemeProvider

| Propriedade | Tipo | Padrão | Descrição | |-------------|------|--------|-----------| | initialScheme | 'light' | 'dark' | 'light' | Esquema de cor inicial | | children | ReactNode | - | Componentes filhos |

useTheme

Retorna o objeto do tema atual com:

• colors: Paleta de cores do tema atual
• spacing: Tokens de espaçamento
• radius: Tokens de raios de borda
• typography: Tokens de tipografia
• scheme: Esquema atual ('light' ou 'dark')
• toggleScheme(): Função para alternar entre temas
• setScheme(scheme): Função para definir tema específico