{"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\/it\/come-oscurare-una-pagina-con-javascript\/","title":{"rendered":"Come oscurare una pagina con Javascript"},"content":{"rendered":"<p>La modalit\u00e0 oscura \u00e8 diventata sempre pi\u00f9 popolare con il design dell'interfaccia, portando comfort visivo e consentendo agli utenti di scegliere il tema che preferiscono. <\/p>\n\n\n\n<p>In questo articolo, imparerai come creare la modalit\u00e0 oscura su una pagina utilizzando JavaScript, HTML, CSS e tecniche Web moderne.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"795\" height=\"443\" src=\"https:\/\/i0.wp.com\/horatech.shop\/wp-content\/uploads\/2024\/09\/Como-fazer-darkmode-em-pagina-com-Javascript.webp?resize=795%2C443&#038;ssl=1\" alt=\"\" class=\"wp-image-3334\" srcset=\"https:\/\/i0.wp.com\/horatech.shop\/wp-content\/uploads\/2024\/09\/Como-fazer-darkmode-em-pagina-com-Javascript.webp?w=795&amp;ssl=1 795w, https:\/\/i0.wp.com\/horatech.shop\/wp-content\/uploads\/2024\/09\/Como-fazer-darkmode-em-pagina-com-Javascript.webp?resize=300%2C167&amp;ssl=1 300w, https:\/\/i0.wp.com\/horatech.shop\/wp-content\/uploads\/2024\/09\/Como-fazer-darkmode-em-pagina-com-Javascript.webp?resize=768%2C428&amp;ssl=1 768w\" sizes=\"(max-width: 795px) 100vw, 795px\" \/><figcaption class=\"wp-element-caption\"><em>Tutorial completo<\/em> Modalit\u00e0 oscura<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Introduzione alla modalit\u00e0 oscura<\/h2>\n\n\n\n<p>La modalit\u00e0 Dark ha acquisito importanza nella progettazione digitale, riflettendo un cambiamento nelle preferenze degli utenti. Aiuta a ridurre lo sforzo degli occhi in ambienti in condizioni di scarsa illuminazione, rendendo la lettura pi\u00f9 comoda.<\/p>\n\n\n\n<p>Inoltre, i dispositivi mobili consumano meno batteria quando si utilizzano la modalit\u00e0 scura, in particolare sugli schermi OLED. Ci\u00f2 avvantaggia coloro che usano il dispositivo per lunghi periodi.<\/p>\n\n\n\n<p>Con cos\u00ec tanti vantaggi, molte applicazioni e siti Web offrono gi\u00e0 questa opzione, consentendo agli utenti di personalizzare le proprie esperienze. La modalit\u00e0 oscura non \u00e8 solo visivamente attraente, ma facilita anche la navigazione, rendendola pi\u00f9 divertente.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"746\" height=\"407\" src=\"https:\/\/i0.wp.com\/horatech.shop\/wp-content\/uploads\/2024\/09\/Introducao-ao-Dark-Mode.webp?resize=746%2C407&#038;ssl=1\" alt=\"\" class=\"wp-image-3333\" srcset=\"https:\/\/i0.wp.com\/horatech.shop\/wp-content\/uploads\/2024\/09\/Introducao-ao-Dark-Mode.webp?w=746&amp;ssl=1 746w, https:\/\/i0.wp.com\/horatech.shop\/wp-content\/uploads\/2024\/09\/Introducao-ao-Dark-Mode.webp?resize=300%2C164&amp;ssl=1 300w\" sizes=\"(max-width: 746px) 100vw, 746px\" \/><figcaption class=\"wp-element-caption\"><em>Introduzione alla modalit\u00e0 oscura<\/em><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Perch\u00e9 adottare la modalit\u00e0 oscura?<\/strong><\/h3>\n\n\n\n<p>L'uso della modalit\u00e0 Dark offre un'esperienza visivamente pi\u00f9 confortevole, soprattutto in ambienti in condizioni di scarsa illuminazione. Inoltre, consente agli utenti di scegliere il tema che li piace, rendendo la navigazione pi\u00f9 personalizzata.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Vantaggi Dark Way<\/h2>\n\n\n\n<p>L'implementazione della modalit\u00e0 oscura ha diversi vantaggi. La cosa principale \u00e8 migliorare l'esperienza dell'utente, facilitando la lettura, soprattutto in ambienti oscuri. <\/p>\n\n\n\n<p>Il testo di sfondo scuro riduce lo sforzo visivo e l'aumento del coinvolgimento degli utenti. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"763\" height=\"382\" src=\"https:\/\/i0.wp.com\/horatech.shop\/wp-content\/uploads\/2024\/09\/Por-que-implementar-dark-mode.webp?resize=763%2C382&#038;ssl=1\" alt=\"\" class=\"wp-image-3335\" srcset=\"https:\/\/i0.wp.com\/horatech.shop\/wp-content\/uploads\/2024\/09\/Por-que-implementar-dark-mode.webp?w=763&amp;ssl=1 763w, https:\/\/i0.wp.com\/horatech.shop\/wp-content\/uploads\/2024\/09\/Por-que-implementar-dark-mode.webp?resize=300%2C150&amp;ssl=1 300w\" sizes=\"(max-width: 763px) 100vw, 763px\" \/><figcaption class=\"wp-element-caption\"><em>Vantaggi della modalit\u00e0 oscura<\/em><\/figcaption><\/figure>\n\n\n\n<p>La ricerca mostra che le persone trascorrono pi\u00f9 tempo su siti Web che offrono questa funzionalit\u00e0, indicando che i segni che adottano la modalit\u00e0 oscura sono pi\u00f9 allineati con le esigenze dei loro clienti.<\/p>\n\n\n\n<p>Un altro vantaggio significativo \u00e8 il risparmio della batteria sui dispositivi mobili con schermi OLED, in quanto consumano meno energia in modalit\u00e0 oscura. <\/p>\n\n\n\n<p>Questa economia rende la modalit\u00e0 oscura una scelta intelligente per utenti e sviluppatori.<\/p>\n\n\n\n<p><strong>Vantaggi della modalit\u00e0 oscura:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Comfort visivo:<\/strong> Riduce la stanchezza degli occhi in ambienti in condizioni di scarsa illuminazione.<\/li>\n\n\n\n<li><strong>Aumento del coinvolgimento:<\/strong> Gli utenti rimangono pi\u00f9 tempo alle pagine con la modalit\u00e0 oscura.<\/li>\n\n\n\n<li><strong>Risparmio della batteria:<\/strong> Riduce il consumo sui dispositivi con schermi OLED.<\/li>\n\n\n\n<li><strong>Personalizzazione:<\/strong> Offre agli utenti una scelta che si adatta alle loro preferenze.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Utilizzo di CSS e variabili LocalStorage<\/h2>\n\n\n\n<p>Le variabili CSS sono un modo pratico per archiviare i valori e facilitare l'adattamento del design. Ad esempio, puoi usare <code>-BG-Light<\/code> per definire il colore dello sfondo chiaro e <code>--Text-dark<\/code> per il testo scuro. Queste variabili rendono lo scambio tra temi leggeri e scuri pi\u00f9 semplici ed efficienti.<\/p>\n\n\n\n<p>O <code>locale<\/code> \u00c8 uno strumento potente per archiviare i dati sul browser. Consente alle preferenze dell'utente, come la scelta del tema, di essere salvate e applicate automaticamente alle visite future sul sito.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Struttura di base HTML<\/h2>\n\n\n\n<p>Una struttura HTML ben organizzata \u00e8 essenziale per l'implementazione della modalit\u00e0 oscura. Elementi come i pulsanti di scambio tematico e testi chiari aiutano nella navigazione e nell'usabilit\u00e0 del sito.<\/p>\n\n\n\n<p><strong>Elementi essenziali:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code><button><\/code>: Pulsante per passare da una luce tra luce e scura.<\/li>\n\n\n\n<li><code>&lt;h1&gt;<\/code>: Titolo della pagina principale.<\/li>\n\n\n\n<li><code>&lt;p&gt;<\/code>: Paragrafi di testo che facilitano la lettura.<\/li>\n\n\n\n<li><code>&lt;div&gt;<\/code>: Divisioni per raggruppare e contenuti di stile.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Stilizzando con CSS<\/h2>\n\n\n\n<p>Scegliere i colori giusti \u00e8 fondamentale per rendere piacevole la modalit\u00e0 scura. Usa le classi come <code>.Leggero<\/code> e <code>.Buio<\/code> Facilita lo scambio tra temi.<\/p>\n\n\n\n<p><strong>Esempio di colore:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Testo principale:<\/strong> #000000 sul tema chiaro, #fffff nel tema oscuro.<\/li>\n\n\n\n<li><strong>Metter il fondo a:<\/strong> #fffff nel tema Claro, #121212 sul tema oscuro.<\/li>\n\n\n\n<li><strong>Link:<\/strong> #007BFF sul tema Clear, #82B1FF sul tema oscuro.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Implementazione della modalit\u00e0 oscura con JavaScript<\/h2>\n\n\n\n<p>Per creare la modalit\u00e0 oscura con JavaScript, \u00e8 necessario manipolare il dono, aggiungendo classi all'elemento <code>corpo<\/code> dalla pagina. Il primo passo \u00e8 controllare lo stato del tema in <code>locale<\/code>Garantire che il tema scelto dall'utente sia mantenuto dopo la ricarica della pagina.<\/p>\n\n\n\n<p>Un codice di base per implementare la modalit\u00e0 dark sarebbe:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>If (localsostorage.getEtite ('darkmode') === 'abilitable') {\n    Document.body.classlist.add ('Dark-Mode');\n} altro {\n    document.body.classlist.remove ('Dark-Mode');\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Eventi CSS e manipolazione di classe<\/h2>\n\n\n\n<p>La funzionalit\u00e0 della modalit\u00e0 oscura \u00e8 abilitata con JavaScript utilizzando gli ascoltatori di eventi, che rilevano le azioni dell'utente, come i pulsanti clic per modificare il tema.<\/p>\n\n\n\n<p><strong>Passaggi di base:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Scegli il pulsante di scambio del tema.<\/li>\n\n\n\n<li>Aggiungi un ascoltatore di eventi per rilevare i clic.<\/li>\n\n\n\n<li>Cambia la classe di classe sulla pagina.<\/li>\n<\/ol>\n\n\n\n<p>Manipolare le classi in JavaScript \u00e8 fondamentale per l'implementazione della modalit\u00e0 oscura. Usando <code>classlist<\/code>, \u00e8 possibile passare facilmente da un po 'tra argomenti.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Document.body.classlist.toggle ('dark');<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Test e miglioramento dell'implementazione<\/h2>\n\n\n\n<p>\u00c8 essenziale testare l'implementazione della modalit\u00e0 oscura per garantire che tutto funzioni correttamente. Assicurarsi che il tema selezionato dall'utente sia applicato correttamente quando si carica la pagina e se lo scambio del tema si verifica senza intoppi.<\/p>\n\n\n\n<p><strong>Possibili miglioramenti:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Implementano delicate transizioni tra temi a un'esperienza visiva pi\u00f9 piacevole.<\/li>\n\n\n\n<li>Offri opzioni di personalizzazione del colore, consentendo agli utenti di scegliere tra varie palette.<\/li>\n\n\n\n<li>Includi caratteristiche di accessibilit\u00e0 come dai colori da colori o persone con difficolt\u00e0 visive.<\/li>\n<\/ul>\n\n\n\n<p><strong>Vantaggi dei miglioramenti:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Transizioni morbide:<\/strong> Migliorare l'usabilit\u00e0 e ridurre l'usura visiva.<\/li>\n\n\n\n<li><strong>Palette personalizzabili:<\/strong> Aumenta la soddisfazione e la personalizzazione dell'utente dell'interfaccia.<\/li>\n\n\n\n<li><strong>Accessibilit\u00e0:<\/strong> Rende l'esperienza pi\u00f9 inclusiva, soddisfacendo varie esigenze visive.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusione<\/h2>\n\n\n\n<p>L'adozione della modalit\u00e0 oscura va oltre l'aspetto visivo; Migliora la leggibilit\u00e0, riduce l'affaticamento degli occhi e consente una personalizzazione che soddisfa meglio le esigenze degli utenti. <\/p>\n\n\n\n<p>Usando HTML, CSS e JavaScript, \u00e8 possibile trasformare l'esperienza di navigazione offrendo un design pi\u00f9 flessibile e adattato al futuro digitale.<\/p>","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/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\/it\/wp-json\/wp\/v2\/posts\/3332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/horatech.shop\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/horatech.shop\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/horatech.shop\/it\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/horatech.shop\/it\/wp-json\/wp\/v2\/comments?post=3332"}],"version-history":[{"count":2,"href":"https:\/\/horatech.shop\/it\/wp-json\/wp\/v2\/posts\/3332\/revisions"}],"predecessor-version":[{"id":3787,"href":"https:\/\/horatech.shop\/it\/wp-json\/wp\/v2\/posts\/3332\/revisions\/3787"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/horatech.shop\/it\/wp-json\/wp\/v2\/media\/3334"}],"wp:attachment":[{"href":"https:\/\/horatech.shop\/it\/wp-json\/wp\/v2\/media?parent=3332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/horatech.shop\/it\/wp-json\/wp\/v2\/categories?post=3332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/horatech.shop\/it\/wp-json\/wp\/v2\/tags?post=3332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}