An Interest In:
Web News this Week
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
Some of Our Sources
- Techcrunch
- TutsPlus - Code
- Six Revisions
- Creative Curio
- Fuel Your Creativity
- My Ink Blog
- Spyre Studios
- Design Modo
- The Verge
- TechPowerUp
Help Webnuz
Referal links:
Dark mode apenas com HTML, CSS e Javascript
Ao implementar o modo escuro no nosso website melhoramos a experincia do usurio, j que o mesmo ganha a possibilidade de escolher qual o melhor tema para ele.
Existem diferentes maneiras para implementar o modo escuro em websites, das mais simples as mais complexas, e a abordagem que mostro nesse pequeno tutorial, eu considero como a mais simples e menos trabalhosa possvel, onde mostro a implementao usando apenas HTML, CSS e Javascript.
Dois conceitos (chaves) sero usados para implementao do modo escuro, as Variveis de CSS para as cores, e o localStorage para guardar o tema atual do usurio.
Variveis de CSS
As variveis de CSS funcionam como as variveis de qualquer outra linguagem, onde atribumos valores a mesma e podemos modificar posteriormente, para implementao do modo escuro, atribuiremos os valores das nossas cores a variveis de CSS, com isso podemos modifica-las dependendo do contexto.
/*criando uma varivel de css */--bg-grey-light: #f5f5f5;/*usando a variavel de css */background-color: var(--bg-grey-light);Uma particularidade das variveis de CSS que a torna uma boa alternativa para implementar o modo escuro que todos os elementos que forem declarados dentro do elemento pai iro
herda-las, sendo assim nos iremos definir as nossas variveis diretamente no body para que todos os elementos dentro do mesmo possam herda-las.
localStorage API
Para uma melhor experincia de usurio, iremos usar o localStorage para armazenar o estado atual do usurio, dessa forma quando o usurio voltar a acessar o website, o seu tema preferido ser aplicado automaticamente.
//armazenando na mquina do usuario o temalocalStorage.setItem('theme', 'dark'); //acessado o tema da maquina do usuriolocalStorage.getItem('theme'); // darkEstrutura do documento
Sendo um projeto muito pequeno, o nosso documento ser constitudo por dois botes e dois blocos de texto, os botes tero a funo de mudar o tema e atualizar a pagina.
index.html
<body> <div class="container"> <h1 class="heading"> Como fazer o dark mode com HTLM, CSS e Javascript apenas </h1> <div class="buttons"> //boto para fazer a troca de estados dark/light <button id="toggle" class="button">toggle</button> //boto para atualizar a pgina <button id="refresh" class="button">refresh</button> </div> <div class="text-wrapper"> <p class="paragraph"> The United States shall be President of the.... </p> </div> <div class="text-wrapper"> <p class="paragraph"> Why, there's hardly enough of me left... </p> </div> </div> <script src="script.js"></script> </body>Definindo as cores
Ao definir as cores, j que estamos a lidar com dois contextos diferentes, para cada cor no tema claro deve existir uma variante para o tema escuro, e as cores tm de ser definidas de acordo com as suas responsabilidades, tendo assim cores para texto, cores de fundo
Definio das variveis
/* Definio das cores */body { /* cores de texto */ --text-white: #ffffff; --text-dark: #142136; /* cores de fundo */ --bg-grey-light: #f5f5f5; --bg-white: #ffffff; --bg-blue-dark: #142136; --bg-indigo: #6366f1; /*...*/}Aps definio das variveis, iremos criar a classe .dark, que conter a definio das mesmas variveis, s que com o valor das cores alteradas para o tema escuro, assim, no momento em que pretendermos mudar o contexto para o tema escuro, apenas adicionamos a classe .dark ao body atravs do javascript dessa forma as variveis previamente definidas sero sobrepostas pelas que foram definidas na classe .dark.
Definio das variveis para o tema escuro
.dark { --text-white: #e6e6e6; --text-dark: #ffffff; --bg-grey-light: #142136; --bg-white: #22395d; --bg-blue-dark: #142136; --bg-indigo: #7577e1;}} importante notar que a varivel --text-dark que tinha o seu valor: #142136, o mesmo foi alterado para #ffffff no contexto do tema escuro, tendo isso em mente, s repetir o mesmo processo para todas as outras cores do seu cdigo.
Como ficou o arquivo .css final:
style.css
* { margin: 0; padding: 0; box-sizing: border-box;}/* Definio das cores */body { /* cores de texto */ --text-white: #ffffff; --text-dark: #142136; /* cores de fundo */ --bg-grey-light: #f5f5f5; --bg-white: #ffffff; --bg-blue-dark: #142136; --bg-indigo: #6366f1; font-family: "Inter", sans-serif; line-height: 1.7; background-color: var(--bg-grey-light);}.dark { --text-white: #e6e6e6; --text-dark: #ffffff; --bg-grey-light: #142136; --bg-white: #22395d; --bg-blue-dark: #142136; --bg-indigo: #7577e1;}.container { max-width: 600px; margin: 40px auto; display: flex; padding: 20px; flex-direction: column;}.text-wrapper { width: 100%; padding: 20px; background-color: var(--bg-white); margin-bottom: 40px; border-radius: 10px;}.paragraph { font-size: 16px; color: var(--text-dark);}.heading { font-size: 40px; letter-spacing: 1px; font-weight: 900; margin-bottom: 40px; color: var(--text-dark);}.buttons { width: 100%; display: flex; justify-content: space-between; margin-bottom: 40px;}.button { width: 200px; padding: 5px; height: 40px; border: none; border-radius: 10px; font-family: inherit; cursor: pointer; background-color: var(--bg-indigo); color: var(--text-white); font-size: 16px; font-weight: 400; text-transform: capitalize;}Como pode se ver no cdigo, no foi usada nenhuma cor directamente, mas sim as variveis previamente definidas.
Alterando o tema
Para o processo de alterao do tema, usaremos o javascript, e o script primeiro verificar no localStorage se o tema previamente armazenado escuro e o aplicar ao body assim que o mesmo for carregado.
Para o boto de alterar tema, criamos um eventListener para quando o mesmo for clicado, remover ou adicionar a classe .dark e tambm alterar o tema armazenado no localstorage dependendo do contexto.
script.js
const toggle = document.getElementById("toggle");const refresh = document.getElementById("refresh");const theme = window.localStorage.getItem("theme");/* verifica se o tema armazenado no localStorage escurose sim aplica o tema escuro ao body */if (theme === "dark") document.body.classList.add("dark");// event listener para quando o boto de alterar o tema for clicadotoggle.addEventListener("click", () => { document.body.classList.toggle("dark"); if (theme === "dark") { window.localStorage.setItem("theme", "light"); } else window.localStorage.setItem("theme", "dark");});refresh.addEventListener("click", () => { window.location.reload();});Muito Obrigado por ler at aqui, espero que o meu texto de alguma forma tenha te ajudado.
Esse o segundo artigo/blog post que eu escrevo, sinta-se livre pra dar a sua opinio sobre o mesmo, que assim me ajuda a melhorar.
D uma olhada no meu Portflio tenho alguns projectos interessantes por l.
Original Link: https://dev.to/rubalaine/dark-mode-apenas-com-html-css-e-javascript-3n57
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To