Criando um tema escuro claro com CSS e JavaScript (Light and Dark Mode)

Описание: Quer saber mais sobre o nosso Curso Completo de HTML e CSS? Clique no link abaixo para garantir sua vaga na próxima turma:
https://dlp.hashtagtreinamentos.com/h...

PARA BAIXAR O MINICURSO GRATUITO DE HTML E CSS (PÁGINA DO GOOGLE):
https://pages.hashtagtreinamentos.com...

-----------------------------------------------------------------------

► Arquivos Utilizados no Vídeo:
https://pages.hashtagtreinamentos.com...

-----------------------------------------------------------------------

Caso prefira o vídeo em formato de texto:
https://www.hashtagtreinamentos.com/t...

-----------------------------------------------------------------------

PARA CONTRATAR A HASHTAG PARA SUA EMPRESA:
https://www.hashtagtreinamentos.com/t...

-----------------------------------------------------------------------

Você sabe como fazer para alterar entre tema claro e escuro na sua página usando CSS e JavaScript?

Hoje eu vou te mostrar como você pode habilitar o modo dark e light no seu projeto e quais as alterações você precisa fazer para que a sua página fique mais visível dependendo do modo que estiver usando.

Você já deve ter criado sua página no seu modo preferido, mas é possível ajustar para o outro modo, dark ou light de acordo com a preferência do usuário.

Nós vamos fazer isso usando o color-scheme e JavaScript para permitir que essa troca seja feita pelo usuário através de um botão!

Ainda vou propor um desafio na aula! Ficou curioso para saber o que é? Então vem comigo que a aula está irada!

-----------------------------------------------------------------------

Vídeos Recomendados

► Curso Básico de HTML e CSS
   • Curso Básico de Html e CSS - Aprenda Const...  

► Como Baixar e Configurar o VSCode para HTML e CSS
   • Instalação do VS Code para Programação em ...  

-----------------------------------------------------------------------

Hashtag Programação

► Inscreva-se em nosso canal: http://bit.ly/3c0LJQi
► Ative as notificações (clica no sininho)!
► Curta o nosso vídeo!

-----------------------------------------------------------------------

Redes Sociais

► Blog: https://bit.ly/2MRUZs0
► YouTube: http://bit.ly/3c0LJQi
► Instagram: https://bit.ly/3o6dw42
► Facebook: http://bit.ly/3qGtaF2

Aqui nos vídeos do canal da Hashtag Programação ensinamos diversas dicas de HTML e CSS para que você consiga se desenvolver nessa linguagem de programação e criar seus próprios projetos!

-----------------------------------------------------------------------

Conteúdo da Aula

00:00 Introdução
01:40 Color-scheme (tipo de temas aceitos)
03:05 Simulando o modo dark na página (preferência)
04:00 Voltar ao modo original (light)
04:18 Variáveis para alterar os modos dark e light
06:50 Media query (trocar variáveis nos diferentes modos)
07:48 Testando o modo dark com a alteração
08:35 Desafio da aula
09:40 Input para seleção do light e dark mode
17:20 Código em JavaScript para alterar seleção
20:53 Testando a troca dos temas
21:25 Conclusão

#htmlecss #htmlcss #html #css #hashtagprogramacao