HTML & CSS - 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