Adicione o Modo Escuro ao ASP.NET Core com apenas UMA linha de código!

Apresentando o recurso Modo Escuro no ASP.NET Core

Tim inicia o tutorial abordando um requisito comum em aplicativos web modernos — habilitar o modo escuro no ASP.NET Core. Quer você use Blazor, MVC ou Razor Pages, o Bootstrap 5.3 introduz suporte para temas escuros de uma maneira muito simples.

Como Tim explica, esse recurso de modo escuro pode ser ativado com uma única linha de código, tornando-se uma solução rápida e eficaz para desenvolvedores que desejam aprimorar a interface do usuário de seus sites. O novo suporte ao modo escuro é especialmente útil para usuários que preferem um tema claro ou uma interface escura, de acordo com as configurações do sistema ou preferências pessoais.

Verificando a versão do Bootstrap em um aplicativo web Blazor

Tim usa o Visual Studio para demonstrar passo a passo um projeto de aplicativo web Blazor . Ele navega até a pasta wwwroot e abre o arquivo bootstrap.min.css para confirmar que o aplicativo está usando a versão 5.3.3 do Bootstrap. Aos 1:01, ele observa que a versão 5.3 ou superior é necessária para suportar o modo escuro.

Se o seu projeto já utiliza esta versão ou posterior, não é necessário atualizar o Bootstrap nem incluir ferramentas adicionais. Este é um passo crucial porque as versões mais antigas do Bootstrap não suportam a troca de temas usando o atributo data-bs-theme.

Uma única linha de código para ativar o tema escuro.

Nesse momento, Tim abre o arquivo Razor do aplicativo. Ele seleciona o Este vídeo mostra como aplicar um tema escuro a todo o aplicativo usando um único atributo HTML:

data-bs-theme="dark"

Essa simples adição instrui o Bootstrap a aplicar o esquema de cores escuras em todas as suas páginas e elementos. Tim executa o aplicativo antes e depois de adicionar a linha para mostrar o contraste. Às 2h03, ele ativa o modo escuro e confirma que o tema é atualizado instantaneamente.

Ajustando o CSS personalizado no Modo Escuro

Tim destaca que, embora essa única linha de código altere a cor e o tema de fundo geral, o CSS existente ainda pode entrar em conflito com o tema escuro. Por exemplo, texto branco, tamanhos de fonte ou fundos definidos diretamente nos seus arquivos CSS não serão ajustados automaticamente.

Como Tim observa em 2:34, quanto mais estilos personalizados você criar, mais precisará editar e testar. É por isso que ele recomenda começar com o modo escuro logo no início do desenvolvimento, quando menos elementos precisam de ajustes.

Alternar entre temas claros e escuros

Aos 2:50, Tim destaca que também é possível alternar entre os temas escuro e claro. Ao alterar o atributo para data-bs-theme="light", você ativa o tema claro novamente:

data-bs-theme="light"

Tim sugere que os desenvolvedores poderiam permitir que os usuários escolhessem sua preferência de tema — por exemplo, adicionando uma opção de alternância usando JavaScript ou lógica do lado do servidor.

Essa capacidade de alternar entre temas claros e escuros é cada vez mais esperada pelos usuários, especialmente em aplicativos do Windows ou dispositivos móveis, onde o esquema de cores preferido é detectado automaticamente.

Corrigindo conflitos de layout no ASP.NET Core

Um dos desafios comuns, explica Tim, é a inconsistência de estilos em certos elementos — como a barra de navegação superior. Aos 3:12, ele mostra como um arquivo CSS específico do layout (Razor) substitui as propriedades padrão do Bootstrap.

Ele encontra um seletor .top-row definindo uma cor diretamente, que não responde à configuração do tema. A solução dele: remover a propriedade de cor para que o Bootstrap possa gerenciar o estilo com base no tema atual (3:47).

Após remover a sobreposição, o tema escuro fica com uma aparência mais limpa. E quando ele volta para o tema claro, ainda funciona — mostrando que o Bootstrap aplica valores de cor dinamicamente com base no tema escolhido.

Utilizando regras CSS específicas do tema

Às 4:17, Tim oferece outra dica útil: os desenvolvedores podem usar a detecção de temas em seu CSS para aplicar estilos diferentes dependendo do modo ativo. Isso permite que você responda ao valor data-bs-theme e estilize seu aplicativo de acordo.

Por exemplo, você pode ajustar o tamanho da fonte, a cor do texto ou até mesmo as imagens, dependendo se o usuário selecionou o modo escuro ou o modo claro. Isso oferece mais flexibilidade para quem deseja uma nova experiência com o tema sem precisar criar duas folhas de estilo separadas.

Aplicando o Modo Escuro em Projetos MVC

Em seguida, Tim passa para um projeto ASP.NET MVC mais antigo para mostrar como habilitar o modo escuro em aplicativos que ainda não usam o Bootstrap 5.3. Quando ele abre o arquivo CSS do Bootstrap, ele percebe que é a versão 5.1.0, que não oferece suporte ao modo escuro (5:07).

Atualizando o Bootstrap em MVC com CDN

Tim recomenda substituir o arquivo Bootstrap local pela versão CDN do site GetBootstrap . Às 5h51, ele cola os links do CDN na visualização _Layout.cshtml, atualizando os arquivos CSS e JavaScript incluídos.

Ao fazer isso, o aplicativo MVC agora suporta a troca de temas, graças à versão mais recente do Bootstrap. Ele também observa que as CDNs podem ajudar a acelerar seu site, especialmente para visitantes que o acessam pela primeira vez.

Ajustando o estilo de navegação para o modo escuro

Após ativar o tema escuro, Tim percebe que alguns estilos da barra de navegação entram em conflito com ele. Às 6h40, ele remove as classes navbar-light e bg-white, que forçam cores claras e prejudicam a aparência escura.

Uma vez removida, a barra de navegação se adapta corretamente ao modo escuro. Mas Tim adverte que outros elementos de texto ou componentes com cores sobrescritas ainda podem precisar ser tratados manualmente (6:57). É aqui que você pode querer escrever CSS que leve em consideração o tema ou usar variáveis ​​CSS para facilitar o gerenciamento.

Resumo: Suporte ao tema Bootstrap 5.3

Tim conclui reiterando que o Bootstrap 5.3 oferece suporte completo a temas claros e escuros, mas seu CSS personalizado pode não oferecer. Se você estruturou seus estilos corretamente, usando classes e evitando cores fixas no código, a troca de temas se torna mais fluida.

Às 8h, ele enfatiza que simplesmente acrescentar:

data-bs-theme="dark"

para o seu A tag <dark mode> ativa o modo escuro em todo o seu site ASP.NET . Você pode até mesmo aplicar o atributo a um elemento específico, como uma tabela, um cartão ou uma seção, permitindo combinar temas em uma única página.

Dica final de Tim Corey

Se você leva a sério o Bootstrap ou a criação de temas no ASP.NET Core, Tim também oferece um curso completo de Bootstrap que aborda conceitos mais profundos, incluindo sistemas de layout, estratégias de temas e boas práticas de acessibilidade.

Seguindo o tutorial em vídeo de Tim Corey, você pode implementar o modo escuro em seu aplicativo ASP.NET Core em apenas uma etapa — e ajustá-lo usando CSS personalizado, detecção de tema e funcionalidade de alternância. Quer você esteja criando aplicativos para Windows, para a web ou para outras plataformas, esse método oferece a flexibilidade de alternar entre temas sem esforço e manter seus usuários satisfeitos.