{"id":134,"date":"2026-09-01T18:19:24","date_gmt":"2026-09-01T21:19:24","guid":{"rendered":"https:\/\/aqgoes.com\/blog\/?p=134"},"modified":"2026-09-04T16:06:30","modified_gmt":"2026-09-04T19:06:30","slug":"dark-mode-menu-mobile-javascript-localstorage","status":"publish","type":"post","link":"https:\/\/aqgoes.com\/blog\/dark-mode-menu-mobile-javascript-localstorage\/","title":{"rendered":"Como Criar Dark Mode e Menu Mobile com JavaScript Puro e Tailwind"},"content":{"rendered":"\n
\n

No artigo anterior, vimos como estruturar o visual HTML <\/a>e Tailwind CSS<\/a> do header do AqGoEs De<\/a>V<\/strong>. No entanto, um layout limpo s\u00f3 cumpre seu papel se a experi\u00eancia do usu\u00e1rio for fluida.<\/p>\n\n\n\n

Nesta etapa, vamos adicionar a camada de comportamento (interatividade)<\/strong> com JavaScript puro (Vanilla JS). Vamos resolver dois problemas vitais de front-end: o evento de clique do menu hamb\u00farguer no celular e a navega\u00e7\u00e3o em Modo Escuro\/Claro persistida no navegador do usu\u00e1rio.<\/p>\n<\/blockquote>\n\n\n\n

Por que Usar LocalStorage para o Tema?<\/h2>\n\n\n\n

Quando um usu\u00e1rio escolhe o tema escuro em um site, ele espera que essa prefer\u00eancia seja mantida ao navegar entre as p\u00e1ginas ou ao retornar no dia seguinte.<\/p>\n\n\n\n

A API de localStorage<\/code> do navegador permite salvar pares de chave-valor diretamente no dispositivo do leitor. Isso evita o inc\u00f4modo efeito de “tela piscando” (FOUC \u2014 Flash of Unstyled Content<\/em>) no momento em que a p\u00e1gina recarrega.<\/p>\n\n\n\n

C\u00f3digo JavaScript Completo do Header<\/h2>\n\n\n\n

Abaixo est\u00e1 o script estruturado para manipular exatamente os elementos do nosso HTML:<\/p>\n\n\n\n

document.addEventListener('DOMContentLoaded', () => {\n  \/\/ --- 1. ELEMENTOS DO DOM ---\n  const themeToggleBtn = document.getElementById('theme-toggle');\n  const lightIcon = document.getElementById('theme-toggle-light-icon');\n  const darkIcon = document.getElementById('theme-toggle-dark-icon');\n  \n  const menuToggleBtn = document.getElementById('menu-toggle');\n  const mobileMenu = document.getElementById('mobile-menu');\n\n  \/\/ --- 2. L\u00d3GICA DO TEMA (DARK \/ LIGHT) ---\n  const applyTheme = (isDark) => {\n    if (isDark) {\n      document.documentElement.classList.add('dark');\n      lightIcon.classList.remove('hidden');\n      darkIcon.classList.add('hidden');\n    } else {\n      document.documentElement.classList.remove('dark');\n      lightIcon.classList.add('hidden');\n      darkIcon.classList.remove('hidden');\n    }\n  };\n\n  \/\/ Verifica a prefer\u00eancia salva ou o padr\u00e3o do sistema operacional\n  const savedTheme = localStorage.getItem('theme');\n  const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n  \n  const initialIsDark = savedTheme ? savedTheme === 'dark' : systemPrefersDark;\n  applyTheme(initialIsDark);\n\n  \/\/ Evento de clique para trocar o tema\n  themeToggleBtn.addEventListener('click', () => {\n    const isCurrentlyDark = document.documentElement.classList.contains('dark');\n    const newThemeIsDark = !isCurrentlyDark;\n    \n    applyTheme(newThemeIsDark);\n    localStorage.setItem('theme', newThemeIsDark ? 'dark' : 'light');\n  });\n\n  \/\/ --- 3. L\u00d3GICA DO MENU MOBILE ---\n  menuToggleBtn.addEventListener('click', () => {\n    mobileMenu.classList.toggle('hidden');\n  });\n});<\/code><\/pre>\n\n\n\n
Entendendo a L\u00f3gica Passo a Passo<\/h2>\n\n\n\n
Para garantir que a implementa\u00e7\u00e3o seja clara, analisaremos os blocos de c\u00f3digo principais:<\/p>\n\n\n\n
Funcionalidade<\/strong><\/td>M\u00e9todos\/Propriedades<\/strong><\/td>O que faz na pr\u00e1tica<\/strong><\/td><\/tr>
O que faz na pr\u00e1tica<\/strong><\/td>localStorage.getItem('theme')<\/code><\/td>L\u00ea do navegador se o usu\u00e1rio j\u00e1 salvou o tema no passado.<\/td><\/tr>
Prefer\u00eancia do Sistema<\/strong><\/td>window.matchMedia('(prefers-color-scheme: dark)')<\/code><\/td>Se n\u00e3o houver nada salvo, detecta se o celular\/PC do usu\u00e1rio j\u00e1 usa modo escuro.<\/td><\/tr>
Troca de \u00cdcones<\/strong><\/td>.classList.toggle('hidden')<\/code><\/td>Alterna a visibilidade do Sol e da Lua sem usar bibliotecas externas.<\/td><\/tr>
Menu Hamb\u00farguer<\/strong><\/td>mobileMenu.classList.toggle('hidden')<\/code><\/td>Exibe ou esconde o dropdown ao clicar no bot\u00e3o no celular.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Destaques de Execu\u00e7\u00e3o T\u00e9cnica<\/h2>\n\n\n\n
\n
\n
\ud83d\udca1 Dica de Ouro:<\/strong> Coloque o trecho que verifica a prefer\u00eancia do tema no <head><\/code> do seu HTML (ou execute antes do carregamento do body). Isso garante que a classe dark<\/code> seja injetada na tag <html><\/code> antes mesmo da renderiza\u00e7\u00e3o visual, eliminando completamente a piscada de luz ao trocar de p\u00e1gina.<\/p>\n<\/blockquote>\n<\/blockquote>\n\n\n\n
O Poder do matchMedia<\/code><\/h3>\n\n\n\n
Muitos desenvolvedores esquecem que o usu\u00e1rio j\u00e1 configurou o pr\u00f3prio sistema operacional com seu tema preferido. Ao usar window.matchMedia<\/code>, seu blog respeita a escolha global do usu\u00e1rio logo no primeiro acesso.<\/p>\n\n\n\n
C\u00f3digo Enxerto e Perform\u00e1tico<\/h3>\n\n\n\n
N\u00e3o utilizamos bibliotecas pesadas de terceiros para controlar a l\u00f3gica da p\u00e1gina. Com menos de 50 linhas de JavaScript puro, garantimos m\u00e1xima velocidade de carregamento e pontua\u00e7\u00e3o alta no Google Lighthouse.<\/p>\n\n\n\n
Conclus\u00e3o<\/h2>\n\n\n\n
Com este script, o header do projeto AqGoEs DeV<\/strong> passa a ser interativo, acess\u00edvel e otimizado para a experi\u00eancia do usu\u00e1rio em qualquer tipo de tela ou momento do dia.<\/p>\n","protected":false},"excerpt":{"rendered":"
No artigo anterior, vimos como estruturar o visual HTML e Tailwind CSS do header do AqGoEs DeV. No entanto, um layout limpo s\u00f3 cumpre seu papel se a experi\u00eancia do usu\u00e1rio for fluida. Nesta etapa, vamos adicionar a camada de comportamento (interatividade) com JavaScript puro (Vanilla JS). Vamos resolver dois problemas vitais de front-end: o […]<\/p>\n","protected":false},"author":2,"featured_media":135,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[64],"tags":[19],"class_list":["post-134","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento-web","tag-front-end"],"_links":{"self":[{"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/posts\/134","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/comments?post=134"}],"version-history":[{"count":2,"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/posts\/134\/revisions"}],"predecessor-version":[{"id":160,"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/posts\/134\/revisions\/160"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/media\/135"}],"wp:attachment":[{"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/media?parent=134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/categories?post=134"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/tags?post=134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}