{"id":3332,"date":"2024-08-21T14:26:23","date_gmt":"2024-08-21T17:26:23","guid":{"rendered":"https:\/\/horatech.shop\/?p=3332"},"modified":"2024-11-29T14:14:26","modified_gmt":"2024-11-29T17:14:26","slug":"como-fazer-darkmode-em-pagina-com-javascript","status":"publish","type":"post","link":"https:\/\/horatech.shop\/ro\/como-fazer-darkmode-em-pagina-com-javascript\/","title":{"rendered":"Cum s\u0103 modifica\u021bi modul \u00eentunecat al unei pagini cu Javascript"},"content":{"rendered":"

O modo escuro tem se tornado cada vez mais popular no design de interfaces, trazendo conforto visual e permitindo que os usu\u00e1rios escolham o tema que preferem. <\/p>\n\n\n\n

Neste artigo, voc\u00ea aprender\u00e1 como criar o modo escuro em uma p\u00e1gina utilizando JavaScript, HTML, CSS e t\u00e9cnicas web modernas.<\/p>\n\n\n\n

\"\"
Tutorial completo<\/em> de Dark Mode<\/figcaption><\/figure>\n\n\n\n

Introdu\u00e7\u00e3o ao Dark Mode<\/h2>\n\n\n\n

O modo escuro vem ganhando import\u00e2ncia no design digital, refletindo uma mudan\u00e7a nas prefer\u00eancias dos usu\u00e1rios. Ele ajuda a reduzir o esfor\u00e7o ocular em ambientes com pouca ilumina\u00e7\u00e3o, tornando a leitura mais confort\u00e1vel.<\/p>\n\n\n\n

Al\u00e9m disso, dispositivos m\u00f3veis consomem menos bateria ao usar o modo escuro, especialmente em telas OLED. Isso beneficia quem usa o aparelho por longos per\u00edodos.<\/p>\n\n\n\n

Com tantos benef\u00edcios, muitas aplica\u00e7\u00f5es e sites j\u00e1 oferecem essa op\u00e7\u00e3o, permitindo que os usu\u00e1rios personalizem suas experi\u00eancias. O modo escuro n\u00e3o \u00e9 apenas visualmente atraente, mas tamb\u00e9m facilita a navega\u00e7\u00e3o, tornando-a mais agrad\u00e1vel.<\/p>\n\n\n\n

\"\"
Introdu\u00e7\u00e3o ao Dark Mode<\/em><\/figcaption><\/figure>\n\n\n\n

Por que Adotar o Modo Escuro?<\/strong><\/h3>\n\n\n\n

O uso do modo escuro oferece uma experi\u00eancia visualmente mais confort\u00e1vel, especialmente em ambientes com pouca luz. Ele tamb\u00e9m permite que os usu\u00e1rios escolham o tema que mais lhes agrada, tornando a navega\u00e7\u00e3o mais personalizada.<\/p>\n\n\n\n

Vantagens do Modo Escuro<\/h2>\n\n\n\n

Implementar o modo escuro traz v\u00e1rias vantagens. A principal \u00e9 melhorar a experi\u00eancia do usu\u00e1rio, tornando a leitura mais f\u00e1cil, principalmente em ambientes escuros. <\/p>\n\n\n\n

O texto em fundo escuro reduz o esfor\u00e7o visual, al\u00e9m de aumentar o engajamento dos usu\u00e1rios. <\/p>\n\n\n\n

\"\"
vantagens do dark mode<\/em><\/figcaption><\/figure>\n\n\n\n

Pesquisas mostram que as pessoas passam mais tempo em sites que oferecem essa funcionalidade, indicando que as marcas que adotam o modo escuro est\u00e3o mais alinhadas com as necessidades dos seus clientes.<\/p>\n\n\n\n

Outro benef\u00edcio significativo \u00e9 a economia de bateria em dispositivos m\u00f3veis com telas OLED, j\u00e1 que elas consomem menos energia no modo escuro. <\/p>\n\n\n\n

Essa economia faz do dark mode uma escolha inteligente para usu\u00e1rios e desenvolvedores.<\/p>\n\n\n\n

Vantagens do Modo Escuro:<\/strong><\/p>\n\n\n\n

    \n
  • Conforto Visual:<\/strong> Reduz o cansa\u00e7o ocular em ambientes com pouca luz.<\/li>\n\n\n\n
  • Aumento do Engajamento:<\/strong> Usu\u00e1rios permanecem mais tempo em p\u00e1ginas com dark mode.<\/li>\n\n\n\n
  • Economia de Bateria:<\/strong> Reduz o consumo em dispositivos com telas OLED.<\/li>\n\n\n\n
  • Personaliza\u00e7\u00e3o:<\/strong> Oferece aos usu\u00e1rios uma escolha que se adapta \u00e0s suas prefer\u00eancias.<\/li>\n<\/ul>\n\n\n\n

    Utilizando Vari\u00e1veis CSS e LocalStorage<\/h2>\n\n\n\n

    As vari\u00e1veis CSS s\u00e3o uma maneira pr\u00e1tica de armazenar valores e facilitar a adapta\u00e7\u00e3o do design. Por exemplo, voc\u00ea pode usar --bg-grey-light<\/code> para definir a cor de fundo clara e --text-dark<\/code> para o texto escuro. Essas vari\u00e1veis tornam a troca entre temas claro e escuro mais simples e eficiente.<\/p>\n\n\n\n

    O localStorage<\/code> \u00e9 uma ferramenta poderosa para guardar dados no navegador. Ele permite que as prefer\u00eancias dos usu\u00e1rios, como a escolha do tema, sejam salvas e aplicadas automaticamente em futuras visitas ao site.<\/p>\n\n\n\n

    Estrutura B\u00e1sica do HTML<\/h2>\n\n\n\n

    Uma estrutura HTML bem organizada \u00e9 essencial para implementar o modo escuro. Elementos como bot\u00f5es de troca de tema e textos claros ajudam na navega\u00e7\u00e3o e na usabilidade do site.<\/p>\n\n\n\n

    Elementos Essenciais:<\/strong><\/p>\n\n\n\n

      \n
    • <button><\/code>: Bot\u00e3o para alternar entre os modos claro e escuro.<\/li>\n\n\n\n
    • <h1><\/code>: T\u00edtulo principal da p\u00e1gina.<\/li>\n\n\n\n
    • <p><\/code>: Par\u00e1grafos de texto que facilitam a leitura.<\/li>\n\n\n\n
    • <div><\/code>: Divis\u00f5es para agrupar e estilizar conte\u00fado.<\/li>\n<\/ul>\n\n\n\n

      Estilizando com CSS<\/h2>\n\n\n\n

      Escolher as cores certas \u00e9 fundamental para tornar o modo escuro agrad\u00e1vel. Utilizar classes como .light<\/code> e .dark<\/code> facilita a troca entre temas.<\/p>\n\n\n\n

      Exemplo de Cores:<\/strong><\/p>\n\n\n\n

        \n
      • Texto Principal:<\/strong> #000000 no tema claro, #FFFFFF no tema escuro.<\/li>\n\n\n\n
      • Fundo:<\/strong> #FFFFFF no tema claro, #121212 no tema escuro.<\/li>\n\n\n\n
      • Links:<\/strong> #007BFF no tema claro, #82B1FF no tema escuro.<\/li>\n<\/ul>\n\n\n\n

        Implementando o Modo Escuro com JavaScript<\/h2>\n\n\n\n

        Para criar o modo escuro com JavaScript, \u00e9 necess\u00e1rio manipular o DOM, adicionando classes ao elemento body<\/code> da p\u00e1gina. O primeiro passo \u00e9 verificar o estado do tema no localStorage<\/code>, garantindo que o tema escolhido pelo usu\u00e1rio seja mantido ap\u00f3s o recarregamento da p\u00e1gina.<\/p>\n\n\n\n

        Um c\u00f3digo b\u00e1sico para implementar o modo escuro seria:<\/p>\n\n\n\n

        if (localStorage.getItem('darkMode') === 'enabled') {\n    document.body.classList.add('dark-mode');\n} else {\n    document.body.classList.remove('dark-mode');\n}<\/code><\/pre>\n\n\n\n
        Manipula\u00e7\u00e3o de Eventos e Classes CSS<\/h2>\n\n\n\n
        A funcionalidade do modo escuro \u00e9 ativada com JavaScript usando event listeners, que detectam a\u00e7\u00f5es do usu\u00e1rio, como cliques em bot\u00f5es para trocar o tema.<\/p>\n\n\n\n
        Passos B\u00e1sicos:<\/strong><\/p>\n\n\n\n
          \n
        1. Escolher o bot\u00e3o de troca de tema.<\/li>\n\n\n\n
        2. Adicionar um event listener para detectar cliques.<\/li>\n\n\n\n
        3. Alterar a classe do tema na p\u00e1gina.<\/li>\n<\/ol>\n\n\n\n
          Manipular classes em JavaScript \u00e9 fundamental para a implementa\u00e7\u00e3o do dark mode. Usando classList<\/code>, voc\u00ea pode alternar entre temas com facilidade.<\/p>\n\n\n\n
          document.body.classList.toggle('dark');<\/code><\/pre>\n\n\n\n
          Testando e Melhorando a Implementa\u00e7\u00e3o<\/h2>\n\n\n\n
          \u00c9 essencial testar a implementa\u00e7\u00e3o do modo escuro para garantir que tudo funcione corretamente. Verifique se o tema selecionado pelo usu\u00e1rio \u00e9 aplicado corretamente ao carregar a p\u00e1gina e se a troca de temas ocorre sem problemas.<\/p>\n\n\n\n
          Melhorias Poss\u00edveis:<\/strong><\/p>\n\n\n\n
            \n
          • Implementar transi\u00e7\u00f5es suaves entre temas para uma experi\u00eancia visual mais agrad\u00e1vel.<\/li>\n\n\n\n
          • Oferecer op\u00e7\u00f5es de personaliza\u00e7\u00e3o de cores, permitindo que os usu\u00e1rios escolham entre diversas paletas.<\/li>\n\n\n\n
          • Incluir funcionalidades de acessibilidade, como ajustes para dalt\u00f4nicos ou pessoas com dificuldades visuais.<\/li>\n<\/ul>\n\n\n\n
            Benef\u00edcios das Melhorias:<\/strong><\/p>\n\n\n\n
              \n
            • Transi\u00e7\u00f5es Suaves:<\/strong> Melhoram a usabilidade e reduzem o desgaste visual.<\/li>\n\n\n\n
            • Paletas Personaliz\u00e1veis:<\/strong> Aumentam a satisfa\u00e7\u00e3o do usu\u00e1rio e a personaliza\u00e7\u00e3o da interface.<\/li>\n\n\n\n
            • Accesibilitate:<\/strong> Torna a experi\u00eancia mais inclusiva, atendendo a diversas necessidades visuais.<\/li>\n<\/ul>\n\n\n\n
              Concluzie<\/h2>\n\n\n\n
              Adotar o modo escuro vai al\u00e9m do aspecto visual; ele melhora a legibilidade, reduz a fadiga ocular e permite uma personaliza\u00e7\u00e3o que atende melhor \u00e0s necessidades dos usu\u00e1rios. <\/p>\n\n\n\n
              Utilizando HTML, CSS e JavaScript, voc\u00ea pode transformar a experi\u00eancia de navega\u00e7\u00e3o, oferecendo um design mais flex\u00edvel e adaptado ao futuro digital.<\/p>","protected":false},"excerpt":{"rendered":"
              O modo escuro tem se tornado cada vez mais popular no design de interfaces, trazendo conforto visual e permitindo que os usu\u00e1rios escolham o tema que preferem. Neste artigo, voc\u00ea aprender\u00e1 como criar o modo escuro em uma p\u00e1gina utilizando JavaScript, HTML, CSS e t\u00e9cnicas web modernas. Introdu\u00e7\u00e3o ao Dark Mode O modo escuro vem […]<\/p>\n","protected":false},"author":2,"featured_media":3334,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3332","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programacao"],"blocksy_meta":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/horatech.shop\/wp-content\/uploads\/2024\/09\/Como-fazer-darkmode-em-pagina-com-Javascript.webp?fit=795%2C443&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/horatech.shop\/ro\/wp-json\/wp\/v2\/posts\/3332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/horatech.shop\/ro\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/horatech.shop\/ro\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/horatech.shop\/ro\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/horatech.shop\/ro\/wp-json\/wp\/v2\/comments?post=3332"}],"version-history":[{"count":2,"href":"https:\/\/horatech.shop\/ro\/wp-json\/wp\/v2\/posts\/3332\/revisions"}],"predecessor-version":[{"id":3787,"href":"https:\/\/horatech.shop\/ro\/wp-json\/wp\/v2\/posts\/3332\/revisions\/3787"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/horatech.shop\/ro\/wp-json\/wp\/v2\/media\/3334"}],"wp:attachment":[{"href":"https:\/\/horatech.shop\/ro\/wp-json\/wp\/v2\/media?parent=3332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/horatech.shop\/ro\/wp-json\/wp\/v2\/categories?post=3332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/horatech.shop\/ro\/wp-json\/wp\/v2\/tags?post=3332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}