Skip to content

feat: implement dark mode toggle#2

Open
phsbrown wants to merge 2 commits into
masterfrom
1-implementar-dark-mode-no-app
Open

feat: implement dark mode toggle#2
phsbrown wants to merge 2 commits into
masterfrom
1-implementar-dark-mode-no-app

Conversation

@phsbrown

Copy link
Copy Markdown
Collaborator

✨ Descrição

Implementa funcionalidade de Dark Mode no aplicativo Blazor utilizando o suporte nativo do Bootstrap 5.3+.

📦 Alterações

Novos arquivos

    • Serviço para gerenciar estado do tema com persistência em localStorage
    • Componente de toggle com ícones sol/lua

Alterações existentes

    • Registro do ThemeService
    • Inicialização do tema
    • Adição do botão de toggle
    • Import do namespace Services

🎨 Como funciona

  • O Bootstrap 5.3 suporta dark mode nativamente via atributo
  • O ThemeService salva a preferência do usuário em
  • O tema é aplicado automaticamente ao carregar a página

✅ Tasks da issue #1

  • Adicionar estado de tema no app
  • Criar componente de toggle
  • Definir CSS para tema escuro (usando Bootstrap)
  • Implementar persistência de preferência
  • Aplicar tema escuro no layout principal

- Add ThemeService for theme state management
- Add ThemeToggle component with sun/moon icons
- Use Bootstrap's built-in dark mode via data-bs-theme attribute
- Persist theme preference in localStorage
@phsbrown phsbrown linked an issue Feb 27, 2026 that may be closed by this pull request
5 tasks
@phsbrown

Copy link
Copy Markdown
Collaborator Author

Code Review (Opus 4.6 / Codex 5.3)

Issues Found:

1. [HIGH] Theme icon doesn't update after toggle

  • File:
  • Problem: The component reads directly but doesn't subscribe to . After toggling, the icon won't update because the component won't re-render.
  • Fix: Subscribe to the event and call .

2. [MEDIUM] Duplicate theme initialization

  • File:
  • Problem: JavaScript runs immediately AND runs after render. This is redundant.
  • Fix: Remove one of them - recommend keeping only C# initialization for consistency.

3. [MEDIUM] Missing error handling for JS interop

  • File:
  • Problem: No try-catch around . If JS fails, app crashes.
  • Fix: Add try-catch with fallback to default theme.

4. [LOW] Missing accessibility attribute

  • File:
  • Problem: Button has no for screen readers.
  • Fix: Add .

@phsbrown

Copy link
Copy Markdown
Collaborator Author

Implementation Complete

Fixed all issues:

  1. Theme icon update: Added implementation with event subscription and call.
  2. Removed duplicate initialization: Simplified JS to just provide helper, C# handles all theme logic.
  3. Added error handling: Wrapped in try-catch with fallback to light theme.
  4. Added accessibility: Added to the button.

Changes made to:

    • Added event subscription and aria-label
    • Added try-catch error handling
    • Simplified JavaScript initialization

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

✨ Implementar Dark Mode no App

2 participants