{"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\/en\/how-to-darkmode-a-page-with-javascript\/","title":{"rendered":"How to darkmode a page with Javascript"},"content":{"rendered":"<p>Dark mode has become increasingly popular with interface design, bringing visual comfort and allowing users to choose the theme they prefer. <\/p>\n\n\n\n<p>In this article, you will learn how to create dark mode on a page using JavaScript, HTML, CSS and modern web techniques.<\/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>Full tutorial<\/em> Dark Mode<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Dark Mode Introduction<\/h2>\n\n\n\n<p>Dark mode has been gaining importance in digital design, reflecting a change in users' preferences.<\/p>\n\n\n\n<p>In addition, mobile devices consume less battery when using dark mode, especially on OLED screens.<\/p>\n\n\n\n<p>With so many benefits, many applications and websites already offer this option, allowing users to customize their experiences.<\/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>Dark Mode Introduction<\/em><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Why adopt the dark mode?<\/strong><\/h3>\n\n\n\n<p>Using dark mode offers a visually more comfortable experience, especially in low light environments.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Dark way advantages<\/h2>\n\n\n\n<p>Implementing dark mode has several advantages. <\/p>\n\n\n\n<p>Dark background text reduces visual effort and increasing users' engagement. <\/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>Dark Mode advantages<\/em><\/figcaption><\/figure>\n\n\n\n<p>Research shows that people spend more time on websites that offer this functionality, indicating that marks that adopt the dark mode are more aligned with the needs of their customers.<\/p>\n\n\n\n<p>Another significant benefit is the saving of battery on mobile devices with OLED screens, as they consume less energy in dark mode. <\/p>\n\n\n\n<p>This economy makes Dark Mode a smart choice for users and developers.<\/p>\n\n\n\n<p><strong>Dark mode advantages:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Visual comfort:<\/strong> Reduces eye tiredness in low light environments.<\/li>\n\n\n\n<li><strong>Increased engagement:<\/strong> Users remain more time on pages with Dark Mode.<\/li>\n\n\n\n<li><strong>Battery savings:<\/strong> Reduces consumption on devices with OLED screens.<\/li>\n\n\n\n<li><strong>Personalization:<\/strong> It offers users a choice that adapts to their preferences.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Using CSS and LocalStorage variables<\/h2>\n\n\n\n<p>CSS variables are a practical way to store values \u200b\u200band facilitate design adaptation. <code>-BG-GERY-LIGHT<\/code> to define the clear background color and <code>--Text-Dark<\/code> for the dark text.<\/p>\n\n\n\n<p>O <code>local<\/code> It is a powerful tool for storing data on the browser.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HTML BASIC STRUCTURE<\/h2>\n\n\n\n<p>A well -organized HTML structure is essential for implementing dark mode.<\/p>\n\n\n\n<p><strong>Essential Elements:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code><button><\/code>: Button to switch between light and dark modes.<\/li>\n\n\n\n<li><code>&lt;h1&gt;<\/code>: Main page title.<\/li>\n\n\n\n<li><code>&lt;p&gt;<\/code>: Text paragraphs that facilitate reading.<\/li>\n\n\n\n<li><code>&lt;div&gt;<\/code>: Divisions to group and style content.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Stylizing with CSS<\/h2>\n\n\n\n<p>Choosing the right colors is critical to making dark mode pleasant. <code>.Light<\/code> e <code>.Dark<\/code> Facilitates the exchange between themes.<\/p>\n\n\n\n<p><strong>Color Example:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Main text:<\/strong> #000000 on the clear theme, #FFFFF in the dark theme.<\/li>\n\n\n\n<li><strong>Bottom:<\/strong> #FFFFF in Claro Theme, #121212 on the dark theme.<\/li>\n\n\n\n<li><strong>Links:<\/strong> #007BFF on the Clear theme, #82B1FF on the dark theme.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Implementando o Modo Escuro com JavaScript<\/h2>\n\n\n\n<p>To create the dark mode with JavaScript, it is necessary to manipulate the gift, adding classes to the element <code>body<\/code> from the page. <code>local<\/code>ensuring that the theme chosen by the user is maintained after the page recharge.<\/p>\n\n\n\n<p>A basic code to implement dark mode would be:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>IF (localSoStorage.Getite ('Darkmode') === 'Enabled') {<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Events and Class Manipulation<\/h2>\n\n\n\n<p>Dark mode functionality is enabled with JavaScript using Event Listeners, which detect user actions, such as buttons clicks to change the theme.<\/p>\n\n\n\n<p><strong>Basic Steps:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Choose the theme exchange button.<\/li>\n\n\n\n<li>Add an event listener to detect clicks.<\/li>\n\n\n\n<li>Change the class class on the page.<\/li>\n<\/ol>\n\n\n\n<p>Manipulating classes in JavaScript is critical to the implementation of Dark Mode. <code>classlist<\/code>, you can switch between topics easily.<\/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\">Testing and improving implementation<\/h2>\n\n\n\n<p>It is essential to test the implementation of dark mode to ensure that everything works properly.<\/p>\n\n\n\n<p><strong>Possible improvements:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Implement gentle transitions between themes to a more pleasant visual experience.<\/li>\n\n\n\n<li>Offer color customization options, allowing users to choose from various palettes.<\/li>\n\n\n\n<li>Include accessibility features such as colorblinds or people with visual difficulties.<\/li>\n<\/ul>\n\n\n\n<p><strong>Benefits of improvements:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Soft transitions:<\/strong> Improve usability and reduce visual wear.<\/li>\n\n\n\n<li><strong>Customizable palettes:<\/strong> Increase user satisfaction and customization of the interface.<\/li>\n\n\n\n<li><strong>Accessibility:<\/strong> It makes experience more inclusive, meeting various visual needs.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Adopting dark mode goes beyond visual aspect; <\/p>\n\n\n\n<p>Using HTML, CSS and JavaScript, you can turn the navigation experience by offering a more flexible and adapted design to the digital future.<\/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\/en\/wp-json\/wp\/v2\/posts\/3332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/horatech.shop\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/horatech.shop\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/horatech.shop\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/horatech.shop\/en\/wp-json\/wp\/v2\/comments?post=3332"}],"version-history":[{"count":2,"href":"https:\/\/horatech.shop\/en\/wp-json\/wp\/v2\/posts\/3332\/revisions"}],"predecessor-version":[{"id":3787,"href":"https:\/\/horatech.shop\/en\/wp-json\/wp\/v2\/posts\/3332\/revisions\/3787"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/horatech.shop\/en\/wp-json\/wp\/v2\/media\/3334"}],"wp:attachment":[{"href":"https:\/\/horatech.shop\/en\/wp-json\/wp\/v2\/media?parent=3332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/horatech.shop\/en\/wp-json\/wp\/v2\/categories?post=3332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/horatech.shop\/en\/wp-json\/wp\/v2\/tags?post=3332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}