{"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\/fr\/comment-mettre-une-page-en-mode-sombre-avec-javascript\/","title":{"rendered":"Comment mettre une page en mode sombre avec Javascript"},"content":{"rendered":"<p>Le mode noir est devenu de plus en plus populaire avec la conception d'interface, apportant un confort visuel et permettant aux utilisateurs de choisir le th\u00e8me qu'ils pr\u00e9f\u00e8rent. <\/p>\n\n\n\n<p>Dans cet article, vous apprendrez \u00e0 cr\u00e9er un mode sombre sur une page en utilisant JavaScript, HTML, CSS et les techniques Web modernes.<\/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>Tutoriel complet<\/em> Mode sombre<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction en mode noir<\/h2>\n\n\n\n<p>Le mode noir a pris de l'importance dans la conception num\u00e9rique, refl\u00e9tant un changement dans les pr\u00e9f\u00e9rences des utilisateurs. Il aide \u00e0 r\u00e9duire les efforts oculaires dans des environnements de faible luminosit\u00e9, ce qui rend la lecture plus confortable.<\/p>\n\n\n\n<p>De plus, les appareils mobiles consomment moins de batterie lors de l'utilisation du mode sombre, en particulier sur les \u00e9crans OLED. Cela profite \u00e0 ceux qui utilisent l'appareil pendant de longues p\u00e9riodes.<\/p>\n\n\n\n<p>Avec autant d'avantages, de nombreuses applications et sites Web offrent d\u00e9j\u00e0 cette option, permettant aux utilisateurs de personnaliser leurs exp\u00e9riences. Le mode noir est non seulement visuellement attrayant, mais il facilite \u00e9galement la navigation, ce qui le rend plus agr\u00e9able.<\/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>Introduction en mode noir<\/em><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Pourquoi adopter le mode sombre?<\/strong><\/h3>\n\n\n\n<p>L'utilisation du mode sombre offre une exp\u00e9rience visuellement plus confortable, en particulier dans les environnements \u00e0 faible lumi\u00e8re. Il permet \u00e9galement aux utilisateurs de choisir le th\u00e8me qui les pla\u00eet, ce qui rend la navigation plus personnalis\u00e9e.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Avantages de la mani\u00e8re sombre<\/h2>\n\n\n\n<p>La mise en \u0153uvre du mode sombre pr\u00e9sente plusieurs avantages. L'essentiel est d'am\u00e9liorer l'exp\u00e9rience utilisateur, de faciliter la lecture, en particulier dans les environnements sombres. <\/p>\n\n\n\n<p>Le texte d'arri\u00e8re-plan sombre r\u00e9duit l'effort visuel et augmentait l'engagement des utilisateurs. <\/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>Avantages en mode obscur<\/em><\/figcaption><\/figure>\n\n\n\n<p>La recherche montre que les gens passent plus de temps sur des sites Web qui offrent cette fonctionnalit\u00e9, indiquant que les marques qui adoptent le mode sombre sont plus align\u00e9es sur les besoins de leurs clients.<\/p>\n\n\n\n<p>Un autre avantage significatif est la sauvegarde de la batterie sur les appareils mobiles avec des \u00e9crans OLED, car ils consomment moins d'\u00e9nergie en mode sombre. <\/p>\n\n\n\n<p>Cette \u00e9conomie fait du mode noir un choix intelligent pour les utilisateurs et les d\u00e9veloppeurs.<\/p>\n\n\n\n<p><strong>Avantages en mode sombre:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Confort visuel:<\/strong> R\u00e9duit la fatigue des yeux dans les environnements de faible luminosit\u00e9.<\/li>\n\n\n\n<li><strong>Engagement accru:<\/strong> Les utilisateurs restent plus de temps sur les pages en mode sombre.<\/li>\n\n\n\n<li><strong>\u00c9conomies de batterie:<\/strong> R\u00e9duit la consommation sur les appareils avec des \u00e9crans OLED.<\/li>\n\n\n\n<li><strong>Personnalisation:<\/strong> Il offre aux utilisateurs un choix qui s'adapte \u00e0 leurs pr\u00e9f\u00e9rences.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Utilisation de variables CSS et LocalStorage<\/h2>\n\n\n\n<p>Les variables CSS sont un moyen pratique de stocker les valeurs et de faciliter l'adaptation de conception. Par exemple, vous pouvez utiliser <code>-Bg-degr\u00e9s-lumi\u00e8re<\/code> pour d\u00e9finir la couleur de fond claire et <code>- Texte-Dark<\/code> pour le texte sombre. Ces variables rendent l'\u00e9change entre des th\u00e8mes clairs et sombres plus simples et plus efficaces.<\/p>\n\n\n\n<p>O <code>locale<\/code> Il s'agit d'un outil puissant pour stocker des donn\u00e9es sur le navigateur. Il permet aux pr\u00e9f\u00e9rences des utilisateurs, tels que le choix du th\u00e8me, d'\u00eatre enregistr\u00e9s et appliqu\u00e9s automatiquement aux futures visites du site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Structure de base HTML<\/h2>\n\n\n\n<p>Une structure HTML bien organis\u00e9e est essentielle pour impl\u00e9menter le mode sombre. Des \u00e9l\u00e9ments tels que les boutons d'\u00e9change de th\u00e8me et les textes clairs aident \u00e0 la navigation et \u00e0 l'utilisabilit\u00e9 du site.<\/p>\n\n\n\n<p><strong>\u00c9l\u00e9ments essentiels:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code><button><\/code>: Bouton pour basculer entre les modes clairs et sombres.<\/li>\n\n\n\n<li><code>&lt;h1&gt;<\/code>: Titre de la page principale.<\/li>\n\n\n\n<li><code>&lt;p&gt;<\/code>: Paragraphes texte qui facilitent la lecture.<\/li>\n\n\n\n<li><code>&lt;div&gt;<\/code>: Divisions du contenu de groupe et de style.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Styliser avec CSS<\/h2>\n\n\n\n<p>Choisir les bonnes couleurs est essentiel pour rendre le mode sombre agr\u00e9able. Utilisez des classes comme <code>.Lumi\u00e8re<\/code> e <code>.Sombre<\/code> Facilite l'\u00e9change entre les th\u00e8mes.<\/p>\n\n\n\n<p><strong>Exemple de couleur:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Texte principal:<\/strong> #000000 Sur le th\u00e8me clair, #FFFFF dans le th\u00e8me sombre.<\/li>\n\n\n\n<li><strong>Bas:<\/strong> #FFFFF dans le th\u00e8me Claro, #121212 sur le th\u00e8me sombre.<\/li>\n\n\n\n<li><strong>Links:<\/strong> #007BFF sur le th\u00e8me clair, #82B1FF sur le th\u00e8me sombre.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Impl\u00e9mentation de mode sombre avec JavaScript<\/h2>\n\n\n\n<p>Pour cr\u00e9er le mode sombre avec JavaScript, il est n\u00e9cessaire de manipuler le cadeau, en ajoutant des cours \u00e0 l'\u00e9l\u00e9ment <code>corps<\/code> de la page. La premi\u00e8re \u00e9tape consiste \u00e0 v\u00e9rifier l'\u00e9tat du th\u00e8me du <code>locale<\/code>S'assurer que le th\u00e8me choisi par l'utilisateur est maintenu apr\u00e8s la recharge de la page.<\/p>\n\n\n\n<p>Un code de base pour impl\u00e9menter le mode sombre serait:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>If (localSostorage.getIte ('darkmode') === 'activ\u00e9') {\n    Document.body.classList.add ('Dark-mode');\n} autre {\n    document.body.classlist.remove ('Dark-mode');\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u00c9v\u00e9nements CSS et manipulation de classe<\/h2>\n\n\n\n<p>La fonctionnalit\u00e9 du mode Dark est activ\u00e9e avec JavaScript \u00e0 l'aide d'\u00e9couteurs d'\u00e9v\u00e9nements, qui d\u00e9tectent les actions de l'utilisateur, telles que les clics de boutons pour modifier le th\u00e8me.<\/p>\n\n\n\n<p><strong>\u00c9tapes de base:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Choisissez le bouton d'\u00e9change de th\u00e8me.<\/li>\n\n\n\n<li>Ajoutez un \u00e9couteur d'\u00e9v\u00e9nements pour d\u00e9tecter les clics.<\/li>\n\n\n\n<li>Modifiez la classe de classe sur la page.<\/li>\n<\/ol>\n\n\n\n<p>La manipulation de classes en JavaScript est essentielle \u00e0 l'impl\u00e9mentation du mode sombre. En utilisant <code>liste de classe<\/code>, vous pouvez facilement basculer entre les sujets.<\/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\">Tester et am\u00e9liorer la mise en \u0153uvre<\/h2>\n\n\n\n<p>Il est essentiel de tester l'impl\u00e9mentation du mode sombre pour s'assurer que tout fonctionne correctement. Assurez-vous que le th\u00e8me s\u00e9lectionn\u00e9 par l'utilisateur est appliqu\u00e9 correctement lors du chargement de la page et si l'\u00e9change de th\u00e8me se produit en douceur.<\/p>\n\n\n\n<p><strong>Am\u00e9liorations possibles:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Mettre en \u0153uvre des transitions douces entre les th\u00e8mes vers une exp\u00e9rience visuelle plus agr\u00e9able.<\/li>\n\n\n\n<li>Offrez des options de personnalisation des couleurs, permettant aux utilisateurs de choisir parmi diff\u00e9rentes palettes.<\/li>\n\n\n\n<li>Incluez les fonctionnalit\u00e9s d'accessibilit\u00e9 telles que les couleurs ou les personnes ayant des difficult\u00e9s visuelles.<\/li>\n<\/ul>\n\n\n\n<p><strong>Avantages des am\u00e9liorations:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Transitions douces:<\/strong> Am\u00e9liorez la convivialit\u00e9 et r\u00e9duisez l'usure visuelle.<\/li>\n\n\n\n<li><strong>Palettes personnalisables:<\/strong> Augmentez la satisfaction et la personnalisation des utilisateurs de l'interface.<\/li>\n\n\n\n<li><strong>Accessibilit\u00e9 :<\/strong> Cela rend l'exp\u00e9rience plus inclusive, r\u00e9pondant \u00e0 divers besoins visuels.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>L'adoption du mode sombre va au-del\u00e0 de l'aspect visuel; Il am\u00e9liore la lisibilit\u00e9, r\u00e9duit la fatigue oculaire et permet une personnalisation qui r\u00e9pond mieux aux besoins des utilisateurs. <\/p>\n\n\n\n<p>En utilisant HTML, CSS et JavaScript, vous pouvez transformer l'exp\u00e9rience de navigation en offrant une conception plus flexible et adapt\u00e9e \u00e0 l'avenir num\u00e9rique.<\/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\/fr\/wp-json\/wp\/v2\/posts\/3332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/horatech.shop\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/horatech.shop\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/horatech.shop\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/horatech.shop\/fr\/wp-json\/wp\/v2\/comments?post=3332"}],"version-history":[{"count":2,"href":"https:\/\/horatech.shop\/fr\/wp-json\/wp\/v2\/posts\/3332\/revisions"}],"predecessor-version":[{"id":3787,"href":"https:\/\/horatech.shop\/fr\/wp-json\/wp\/v2\/posts\/3332\/revisions\/3787"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/horatech.shop\/fr\/wp-json\/wp\/v2\/media\/3334"}],"wp:attachment":[{"href":"https:\/\/horatech.shop\/fr\/wp-json\/wp\/v2\/media?parent=3332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/horatech.shop\/fr\/wp-json\/wp\/v2\/categories?post=3332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/horatech.shop\/fr\/wp-json\/wp\/v2\/tags?post=3332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}