{"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\/de\/como-fazer-darkmode-em-pagina-com-javascript\/","title":{"rendered":"Wie man eine Seite mit Javascript dunkel einstellt"},"content":{"rendered":"<p>Der Dark -Modus wird durch das Design der Schnittstelle immer beliebter, bringt visuellen Komfort und erm\u00f6glicht es den Benutzern, das von ihnen bevorzugte Thema auszuw\u00e4hlen. <\/p>\n\n\n\n<p>In diesem Artikel erfahren Sie, wie Sie mit JavaScript, HTML, CSS und modernen Webtechniken auf einer Seite auf einer Seite erstellen.<\/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>Vollst\u00e4ndiges Tutorial<\/em> Dunkler Modus<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Einf\u00fchrung des dunklen Modus<\/h2>\n\n\n\n<p>Der Dunkelmodus hat im digitalen Design an Bedeutung gewonnen, was eine \u00c4nderung der Pr\u00e4ferenzen der Benutzer widerspiegelt. Es hilft, die Augenaufwand in schlechten Lichtverh\u00e4ltnissen zu verringern und das Lesen komfortabler zu machen.<\/p>\n\n\n\n<p>Dar\u00fcber hinaus verbrauchen mobile Ger\u00e4te bei der Verwendung des Dark -Modus weniger Akku, insbesondere auf OLED -Bildschirmen. Dies kommt denen zugute, die das Ger\u00e4t f\u00fcr lange Zeitr\u00e4ume verwenden.<\/p>\n\n\n\n<p>Bei so vielen Vorteilen bieten viele Anwendungen und Websites diese Option bereits an, sodass Benutzer ihre Erfahrungen anpassen k\u00f6nnen. Der dunkle Modus ist nicht nur visuell attraktiv, sondern erleichtert auch die Navigation und macht sie angenehmer.<\/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>Einf\u00fchrung des dunklen Modus<\/em><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Warum den dunklen Modus annehmen?<\/strong><\/h3>\n\n\n\n<p>Die Verwendung des Dark -Modus bietet ein visuell komfortableres Erlebnis, insbesondere in schlechten hellen Umgebungen. Au\u00dferdem k\u00f6nnen Benutzer das Thema ausw\u00e4hlen, das ihnen gef\u00e4llt und die Navigation personalisierter wird.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Dunklen Weg Vorteile<\/h2>\n\n\n\n<p>Das Implementieren des Dunklen Modus hat mehrere Vorteile. Die Hauptsache ist, die Benutzererfahrung zu verbessern und das Lesen zu erleichtern, insbesondere in dunklen Umgebungen. <\/p>\n\n\n\n<p>Dunkler Hintergrundtext reduziert die visuelle Anstrengung und das Engagement der Benutzer. <\/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>Dunkelmodus Vorteile<\/em><\/figcaption><\/figure>\n\n\n\n<p>Untersuchungen zeigen, dass Menschen mehr Zeit auf Websites verbringen, die diese Funktionalit\u00e4t anbieten, was darauf hinweist, dass Markierungen, die den dunklen Modus annehmen, st\u00e4rker auf die Bed\u00fcrfnisse ihrer Kunden ausgerichtet sind.<\/p>\n\n\n\n<p>Ein weiterer bedeutender Vorteil ist die Einsparung von Akku auf mobilen Ger\u00e4ten mit OLED -Bildschirmen, da sie im dunklen Modus weniger Energie verbrauchen. <\/p>\n\n\n\n<p>Diese Wirtschaft macht den Dark -Modus zu einer intelligenten Wahl f\u00fcr Benutzer und Entwickler.<\/p>\n\n\n\n<p><strong>Vorteile des dunklen Modus:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Visueller Komfort:<\/strong> Reduziert die Augenm\u00fcde in schwierigen Umgebungen.<\/li>\n\n\n\n<li><strong>Verst\u00e4rktes Engagement:<\/strong> Benutzer bleiben mehr Zeit auf Seiten mit dem dunklen Modus.<\/li>\n\n\n\n<li><strong>Batterieeinsparungen:<\/strong> Reduziert den Verbrauch auf Ger\u00e4ten mit OLED -Bildschirmen.<\/li>\n\n\n\n<li><strong>Personalisierung:<\/strong> Es bietet Benutzern eine Auswahl, die sich an ihre Vorlieben anpasst.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Verwenden von CSS und Lokalstoragevariablen<\/h2>\n\n\n\n<p>CSS -Variablen sind eine praktische M\u00f6glichkeit, Werte zu speichern und die Designanpassung zu erleichtern. Zum Beispiel k\u00f6nnen Sie verwenden <code>-Bg-Agger-Licht<\/code> die klare Hintergrundfarbe definieren und <code>-Text-Dark<\/code> f\u00fcr den dunklen Text. Diese Variablen machen den Austausch zwischen hellen und dunklen Themen einfacher und effizienter.<\/p>\n\n\n\n<p>O <code>lokal<\/code> Es ist ein leistungsstarkes Tool zum Speichern von Daten im Browser. Es erm\u00f6glicht es, Benutzerpr\u00e4ferenzen wie die Auswahl des Themas zu speichern und automatisch auf zuk\u00fcnftige Besuche auf der Website angewendet zu werden.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HTML -Grundstruktur<\/h2>\n\n\n\n<p>Eine gut organisierte HTML -Struktur ist f\u00fcr die Implementierung des Dunklen Modus unerl\u00e4sslich. Elemente wie Themenaustauschschaltfl\u00e4chen und klare Texte helfen bei der Navigation und Benutzerfreundlichkeit der Website.<\/p>\n\n\n\n<p><strong>Wesentliche Elemente:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code><button><\/code>: Knopf, um zwischen hellen und dunklen Modi zu wechseln.<\/li>\n\n\n\n<li><code>&lt;h1&gt;<\/code>: Hauptseite Titel.<\/li>\n\n\n\n<li><code>&lt;p&gt;<\/code>: Textabs\u00e4tze, die das Lesen erleichtern.<\/li>\n\n\n\n<li><code>&lt;div&gt;<\/code>: Abteilungen zu Gruppen- und Stilinhalten.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Stylizing mit CSS<\/h2>\n\n\n\n<p>Die Auswahl der richtigen Farben ist entscheidend, um den Dunklen Modus angenehm zu machen. Verwenden Sie Klassen wie <code>.Licht<\/code> e <code>.Dunkel<\/code> Erleichtert den Austausch zwischen Themen.<\/p>\n\n\n\n<p><strong>Farbbeispiel:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Haupttext:<\/strong> #000000 \u00dcber das klare Thema, #FFFFF im Dunklen Thema.<\/li>\n\n\n\n<li><strong>Unten:<\/strong> #FFFFF im Claro -Thema, #121212 \u00fcber das dunkle Thema.<\/li>\n\n\n\n<li><strong>Links:<\/strong> #007BFF \u00dcber das klare Thema, #82B1FF \u00fcber das dunkle Thema.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Implementierung des Dunklen Modus mit JavaScript<\/h2>\n\n\n\n<p>Um den dunklen Modus mit JavaScript zu erstellen, muss das Geschenk manipuliert werden und das Element Klassen hinzuf\u00fcgen <code>body<\/code> von der Seite. Der erste Schritt besteht darin, den Zustand des Themas in der zu \u00fcberpr\u00fcfen <code>lokal<\/code>Sicherstellen, dass das vom Benutzer ausgew\u00e4hlte Thema nach der Aufladung der Seite gepflegt wird.<\/p>\n\n\n\n<p>Ein grundlegender Code zum Implementieren des dunklen Modus w\u00e4re:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>If (localSostorage.getite ('darkMode') === 'aktiviert') {\n    Document.body.classlist.add ('Dark-Mode');\n} anders {\n    document.body.classlist.remove ('dark-mode');\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">CSS -Ereignisse und Klassenmanipulation<\/h2>\n\n\n\n<p>Die Dark -Modus -Funktionalit\u00e4t wird mit JavaScript mit Ereignish\u00f6rern aktiviert, die Benutzeraktionen erkennen, z. B. Schaltfl\u00e4chen -Klicks, um das Thema zu \u00e4ndern.<\/p>\n\n\n\n<p><strong>Grundschritte:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>W\u00e4hlen Sie den Themenaustausch -Schaltfl\u00e4che.<\/li>\n\n\n\n<li>F\u00fcgen Sie einen Ereignish\u00f6rer hinzu, um Klicks zu erkennen.<\/li>\n\n\n\n<li>\u00c4ndern Sie die Klassenklasse auf der Seite.<\/li>\n<\/ol>\n\n\n\n<p>Die Manipulation von Klassen in JavaScript ist f\u00fcr die Implementierung des Dunklen Modus von entscheidender Bedeutung. Verwendung <code>Classlist<\/code>Sie k\u00f6nnen leicht zwischen Themen wechseln.<\/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\">Testen und Verbesserung der Implementierung<\/h2>\n\n\n\n<p>Es ist wichtig, die Implementierung des Dark -Modus zu testen, um sicherzustellen, dass alles richtig funktioniert. Stellen Sie sicher, dass das ausgew\u00e4hlte Thema beim Laden der Seite korrekt angewendet wird und ob der Themenaustausch reibungslos erfolgt.<\/p>\n\n\n\n<p><strong>M\u00f6gliche Verbesserungen:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Implementieren Sie sanfte \u00dcberg\u00e4nge zwischen Themen zu einer angenehmeren visuellen Erfahrung.<\/li>\n\n\n\n<li>Bieten Sie Farbanpassungsoptionen an, sodass Benutzer aus verschiedenen Paletten ausw\u00e4hlen k\u00f6nnen.<\/li>\n\n\n\n<li>Geben Sie Zug\u00e4nglichkeitsfunktionen wie Farbblinds oder Personen mit visuellen Schwierigkeiten ein.<\/li>\n<\/ul>\n\n\n\n<p><strong>Vorteile von Verbesserungen:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Weiche \u00dcberg\u00e4nge:<\/strong> Verbesserung der Verwendbarkeit und reduzieren Sie den visuellen Verschlei\u00df.<\/li>\n\n\n\n<li><strong>Anpassbare Paletten:<\/strong> Erh\u00f6hen Sie die Benutzerzufriedenheit und die Anpassung der Schnittstelle.<\/li>\n\n\n\n<li><strong>Zug\u00e4nglichkeit:<\/strong> Es macht die Erfahrung integrativer und erf\u00fcllt verschiedene visuelle Bed\u00fcrfnisse.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Schlussfolgerung<\/h2>\n\n\n\n<p>Die \u00dcbernahme des dunklen Modus geht \u00fcber den visuellen Aspekt hinaus; Es verbessert die Lesbarkeit, reduziert die Augenerm\u00fcdung und erm\u00f6glicht eine Anpassung, die den Benutzeranforderungen besser entspricht. <\/p>\n\n\n\n<p>Mit HTML, CSS und JavaScript k\u00f6nnen Sie das Navigationserlebnis durch ein flexibleres und angepassteres Design in die digitale Zukunft anbieten.<\/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\/de\/wp-json\/wp\/v2\/posts\/3332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/horatech.shop\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/horatech.shop\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/horatech.shop\/de\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/horatech.shop\/de\/wp-json\/wp\/v2\/comments?post=3332"}],"version-history":[{"count":2,"href":"https:\/\/horatech.shop\/de\/wp-json\/wp\/v2\/posts\/3332\/revisions"}],"predecessor-version":[{"id":3787,"href":"https:\/\/horatech.shop\/de\/wp-json\/wp\/v2\/posts\/3332\/revisions\/3787"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/horatech.shop\/de\/wp-json\/wp\/v2\/media\/3334"}],"wp:attachment":[{"href":"https:\/\/horatech.shop\/de\/wp-json\/wp\/v2\/media?parent=3332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/horatech.shop\/de\/wp-json\/wp\/v2\/categories?post=3332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/horatech.shop\/de\/wp-json\/wp\/v2\/tags?post=3332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}