Harvory
    Voltar para Prompts

    App Mobile • Coding AI • Tema e Dark Mode

    Implementa tema centralizado e suporte a dark mode no app.

    Design
    tema
    react-native
    app-mobile
    dark-mode
    intermediario

    Preencha as variáveis

    0/6 preenchidas

    Preencha os campos abaixo e o prompt será atualizado automaticamente. Depois é só copiar!

    {produto}
    {tema_visual}
    {componentes}
    {modo}
    {contraste}
    {preferencia_usuario}

    Prompt (prévia ao vivo)

    Atue como Mobile UI Engineer. Gere um prompt para Coding AI estruturar tema centralizado e dark mode em React Native + Expo.

Dados:
- Nome do app: {produto}
- Tema visual: {tema_visual}
- Componentes impactados: {componentes}
- Modo desejado: {modo}
- Regras de contraste: {contraste}
- Preferência do usuário: {preferencia_usuario}

Entregue:
1) Estrutura de tema (tokens)
2) Estratégia de dark mode
3) Componentes que devem responder ao tema
4) Regras de contraste/acessibilidade
5) Prompt final para Coding AI

    Exemplos

    Entrada

    Nome do app: FitRoute
Tema visual: Energético e limpo
Componentes impactados: telas, cards, botões, inputs, tabs, badges
Modo desejado: claro e escuro
Regras de contraste: manter CTA legível e texto secundário acessível
Preferência do usuário: seguir sistema com opção manual

    Saída esperada

    🎨 Tema:
Tokens centralizados para cores, textos, fundos, bordas e estados.

🌙 Dark mode:
Suporte por sistema + override manual em configuração.

🧩 Componentes:
Todos devem consumir tokens (sem cor hardcoded).

♿ Acessibilidade:
Contraste mínimo para texto, CTA e estados de erro/sucesso.

🎯 Prompt Coding AI:
Implemente tema centralizado com suporte a light/dark mode em React Native + Expo, aplicando tokens em todos os componentes e permitindo preferência automática + manual.