Skip to content

Light Theme Compatibility Fix for Routes Missing Proper Theming Support #369

Description

@fernanduandrade

Correção de compatibilidade de tema (light theme) em rotas que atualmente suportam apenas dark theme.

Algumas páginas, como https://heartdevs.com/redes, foram estilizadas considerando apenas variáveis de cor para dark mode, resultando em textos com baixa legibilidade ou ausência de contraste adequado quando o usuário está no light theme.

A tarefa consiste em ajustar o sistema de design tokens / CSS / classes condicionais para garantir suporte consistente a ambos os temas (light e dark), sem quebra de contraste ou perda de acessibilidade.

Escopo:

  • Identificar componentes afetados em rotas sem suporte ao light theme
  • Corrigir tokens de cor (text, background, muted, border)
  • Validar que não há dependência exclusiva de dark:bg-* ou cores escuras fixas

Critérios de aceite

  • Todas as rotas afetadas (ex: /redes) são totalmente legíveis em light theme
  • Nenhum texto fica com baixa opacidade ou invisível no light mode
  • Não existem dependências de classes exclusivas de dark mode sem fallback
  • Componentes reutilizáveis não quebram ao alternar tema
  • Testado em:
    • light theme
    • dark theme
    • troca dinâmica de tema (se aplicável)

Teste (BDD)

# language: pt
Funcionalidade: Suporte a light theme em rotas existentes

  Cenário: Página redes em light theme
    Dado que o usuário está com light theme ativo
    Quando ele acessa a rota /redes
    Então todos os textos devem estar visíveis e com contraste adequado
    E nenhum conteúdo deve depender exclusivamente de cores do dark theme

  Cenário: Alternância de tema
    Dado que o usuário está na rota /redes
    Quando ele alterna entre light e dark theme
    Então a UI deve se adaptar sem perda de legibilidade

  Cenário: Componentes reutilizados
    Dado que um componente é usado em múltiplas rotas
    Quando ele é renderizado em light theme
    Então ele deve respeitar tokens de cor do tema ativo

Bloqueada por
- feat(ui): sistema de design tokens centralizado (ThemeProvider / CSS variables)
- feat(frontend): padronização de cores em componentes base

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions