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/html-css/espera/impressionador?origemurl=hashtag_yt_org_listaesperahc_C8Vpew0B_WI

PARA BAIXAR O MINICURSO GRATUITO DE HTML E CSS (PÁGINA DO GOOGLE):
https://pages.hashtagtreinamentos.com/inscricao-minicurso-basico-html-css2?origemurl=hashtag_yt_org_minihtmlcss_C8Vpew0B_WI

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

► Arquivos Utilizados no Vídeo:
https://pages.hashtagtreinamentos.com/arquivo-htmlcss-1YbDF2FjqqBT-n9VG8FrWJnmLtFsvlKUY?origemurl=hashtag_yt_org_planilhahc_C8Vpew0B_WI

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

Caso prefira o vídeo em formato de texto:
https://www.hashtagtreinamentos.com/tema-escuro-e-claro-com-css-html-e-css

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

PARA CONTRATAR A HASHTAG PARA SUA EMPRESA:
https://www.hashtagtreinamentos.com/treinamentos-corporativos?fonte=yt

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

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
https://www.youtube.com/watch?v=vtX9BzESWnQ&list=PLpdAy0tYrnKwmcenKePWr9TQ9deRanAr7&pp=iAQB

► Como Baixar e Configurar o VSCode para HTML e CSS
https://youtu.be/WyXcfCPlIlk

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

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

Видео Criando um tema escuro claro com CSS e JavaScript (Light and Dark Mode) канала Hashtag Programação