{"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\/es\/como-poner-en-modo-oscuro-una-pagina-con-javascript\/","title":{"rendered":"C\u00f3mo oscurecer una p\u00e1gina con Javascript"},"content":{"rendered":"<p>El modo oscuro se ha vuelto cada vez m\u00e1s popular con el dise\u00f1o de interfaz, trayendo comodidad visual y permitiendo a los usuarios elegir el tema que prefieren. <\/p>\n\n\n\n<p>En este art\u00edculo, aprender\u00e1 c\u00f3mo crear modo oscuro en una p\u00e1gina usando JavaScript, HTML, CSS y t\u00e9cnicas web modernas.<\/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> Modo oscuro<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Introducci\u00f3n del modo oscuro<\/h2>\n\n\n\n<p>El modo oscuro ha ganado importancia en el dise\u00f1o digital, lo que refleja un cambio en las preferencias de los usuarios. Ayuda a reducir el esfuerzo ocular en entornos con poca luz, haciendo que la lectura sea m\u00e1s c\u00f3moda.<\/p>\n\n\n\n<p>Adem\u00e1s, los dispositivos m\u00f3viles consumen menos bater\u00eda cuando usan el modo oscuro, especialmente en las pantallas OLED. Esto beneficia a quienes usan el dispositivo durante largos per\u00edodos.<\/p>\n\n\n\n<p>Con tantos beneficios, muchas aplicaciones y sitios web ya ofrecen esta opci\u00f3n, lo que permite a los usuarios personalizar sus experiencias. El modo oscuro no solo es visualmente atractivo, sino que tambi\u00e9n facilita la navegaci\u00f3n, lo que lo hace m\u00e1s agradable.<\/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>Introducci\u00f3n del modo oscuro<\/em><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u00bfPor qu\u00e9 adoptar el modo oscuro?<\/strong><\/h3>\n\n\n\n<p>El uso del modo oscuro ofrece una experiencia visualmente m\u00e1s c\u00f3moda, especialmente en entornos de poca luz. Tambi\u00e9n permite a los usuarios elegir el tema que los agrada, haciendo que la navegaci\u00f3n sea m\u00e1s personalizada.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ventajas de la v\u00eda oscura<\/h2>\n\n\n\n<p>La implementaci\u00f3n del modo oscuro tiene varias ventajas. Lo principal es mejorar la experiencia del usuario, facilitando la lectura, especialmente en entornos oscuros. <\/p>\n\n\n\n<p>El texto de fondo oscuro reduce el esfuerzo visual y aumenta el compromiso de los usuarios. <\/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>Ventajas del modo oscuro<\/em><\/figcaption><\/figure>\n\n\n\n<p>La investigaci\u00f3n muestra que las personas pasan m\u00e1s tiempo en sitios web que ofrecen esta funcionalidad, lo que indica que las marcas que adoptan el modo oscuro est\u00e1n m\u00e1s alineados con las necesidades de sus clientes.<\/p>\n\n\n\n<p>Otro beneficio significativo es el ahorro de la bater\u00eda en dispositivos m\u00f3viles con pantallas OLED, ya que consumen menos energ\u00eda en modo oscuro. <\/p>\n\n\n\n<p>Esta econom\u00eda hace del modo oscuro una elecci\u00f3n inteligente para usuarios y desarrolladores.<\/p>\n\n\n\n<p><strong>Ventajas del modo oscuro:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Comodidad visual:<\/strong> Reduce el cansancio del ojo en ambientes con poca luz.<\/li>\n\n\n\n<li><strong>Aumento de compromiso:<\/strong> Los usuarios siguen siendo m\u00e1s tiempo en las p\u00e1ginas con modo oscuro.<\/li>\n\n\n\n<li><strong>Ahorro de bater\u00eda:<\/strong> Reduce el consumo de dispositivos con pantallas OLED.<\/li>\n\n\n\n<li><strong>Personalizaci\u00f3n:<\/strong> Ofrece a los usuarios una opci\u00f3n que se adapta a sus preferencias.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Uso de CSS y Variables LocalStorage<\/h2>\n\n\n\n<p>Las variables CSS son una forma pr\u00e1ctica de almacenar valores y facilitar la adaptaci\u00f3n del dise\u00f1o. Por ejemplo, puedes usar <code>-BG-ciy-light<\/code> para definir el color de fondo claro y <code>-S-text-dark<\/code> para el texto oscuro. Estas variables hacen que el intercambio entre temas claros y oscuros sea m\u00e1s simple y m\u00e1s eficiente.<\/p>\n\n\n\n<p>O <code>local<\/code> Es una herramienta poderosa para almacenar datos en el navegador. Permite que las preferencias del usuario, como elegir el tema, se guarden y apliquen autom\u00e1ticamente a futuras visitas al sitio.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Estructura b\u00e1sica html<\/h2>\n\n\n\n<p>Una estructura HTML bien organizada es esencial para implementar el modo oscuro. Elementos como los botones de intercambio de temas y los textos claros ayudan en la navegaci\u00f3n y la usabilidad del sitio.<\/p>\n\n\n\n<p><strong>Elementos esenciales:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code><button><\/code>: Bot\u00f3n para cambiar entre modos de luz y oscuridad.<\/li>\n\n\n\n<li><code>&lt;h1&gt;<\/code>: T\u00edtulo de la p\u00e1gina principal.<\/li>\n\n\n\n<li><code>&lt;p&gt;<\/code>: P\u00e1rrafos de texto que facilitan la lectura.<\/li>\n\n\n\n<li><code>&lt;div&gt;<\/code>: Divisiones para contenido grupal y de estilo.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Estilizaci\u00f3n con CSS<\/h2>\n\n\n\n<p>Elegir los colores correctos es fundamental para hacer que el modo oscuro sea agradable. Use clases como <code>.Luz<\/code> e <code>.Oscuro<\/code> Facilita el intercambio entre temas.<\/p>\n\n\n\n<p><strong>Ejemplo de color:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Texto principal:<\/strong> #000000 Sobre el tema transparente, #FFFFF en el tema oscuro.<\/li>\n\n\n\n<li><strong>Abajo:<\/strong> #fffff en Claro Theme, #121212 Sobre el tema oscuro.<\/li>\n\n\n\n<li><strong>Campo de golf:<\/strong> #007BFF en el tema transparente, #82B1FF en el tema oscuro.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Implementaci\u00f3n del modo oscuro con JavaScript<\/h2>\n\n\n\n<p>Para crear el modo oscuro con JavaScript, es necesario manipular el regalo, agregando clases al elemento <code>cuerpo<\/code> de la p\u00e1gina. El primer paso es verificar el estado del tema en el <code>local<\/code>Asegurar que el tema elegido por el usuario se mantenga despu\u00e9s de la recarga de la p\u00e1gina.<\/p>\n\n\n\n<p>Un c\u00f3digo b\u00e1sico para implementar el modo oscuro ser\u00eda:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>If (localsostorage.getite ('darkmode') === 'habilitado') {\n    Document.body.classList.Add ('Dark-Mode');\n} dem\u00e1s {\n    document.body.classlist.remove ('Modo oscuro');\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Eventos CSS y manipulaci\u00f3n de clase<\/h2>\n\n\n\n<p>La funcionalidad del modo oscuro est\u00e1 habilitada con JavaScript utilizando los oyentes de eventos, que detectan las acciones del usuario, como los clics de los botones para cambiar el tema.<\/p>\n\n\n\n<p><strong>Pasos b\u00e1sicos:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Elija el bot\u00f3n de intercambio de temas.<\/li>\n\n\n\n<li>Agregue un oyente de eventos para detectar clics.<\/li>\n\n\n\n<li>Cambie la clase de clase en la p\u00e1gina.<\/li>\n<\/ol>\n\n\n\n<p>La manipulaci\u00f3n de clases en JavaScript es fundamental para la implementaci\u00f3n del modo oscuro. Usando <code>lista de clases<\/code>, puede cambiar entre temas f\u00e1cilmente.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Document.body.classlist.toggle ('oscuro');<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Prueba y mejora de la implementaci\u00f3n<\/h2>\n\n\n\n<p>Es esencial probar la implementaci\u00f3n del modo oscuro para garantizar que todo funcione correctamente. Aseg\u00farese de que el tema seleccionado por el usuario se aplique correctamente al cargar la p\u00e1gina y si el intercambio de temas ocurre sin problemas.<\/p>\n\n\n\n<p><strong>Posibles mejoras:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Implemente transiciones suaves entre temas a una experiencia visual m\u00e1s agradable.<\/li>\n\n\n\n<li>Ofrezca opciones de personalizaci\u00f3n de color, lo que permite a los usuarios elegir entre varias paletas.<\/li>\n\n\n\n<li>Incluya caracter\u00edsticas de accesibilidad como colorblinds o personas con dificultades visuales.<\/li>\n<\/ul>\n\n\n\n<p><strong>Beneficios de las mejoras:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Transiciones suaves:<\/strong> Mejorar la usabilidad y reducir el desgaste visual.<\/li>\n\n\n\n<li><strong>Paletas personalizables:<\/strong> Aumentar la satisfacci\u00f3n del usuario y la personalizaci\u00f3n de la interfaz.<\/li>\n\n\n\n<li><strong>Accesibilidad:<\/strong> Hace que la experiencia sea m\u00e1s inclusiva, satisfaga las diversas necesidades visuales.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusi\u00f3n<\/h2>\n\n\n\n<p>La adopci\u00f3n del modo oscuro va m\u00e1s all\u00e1 del aspecto visual; Mejora la legibilidad, reduce la fatiga ocular y permite una personalizaci\u00f3n que satisface mejor las necesidades del usuario. <\/p>\n\n\n\n<p>Usando HTML, CSS y JavaScript, puede realizar la experiencia de navegaci\u00f3n ofreciendo un dise\u00f1o m\u00e1s flexible y adaptado al futuro digital.<\/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\/es\/wp-json\/wp\/v2\/posts\/3332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/horatech.shop\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/horatech.shop\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/horatech.shop\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/horatech.shop\/es\/wp-json\/wp\/v2\/comments?post=3332"}],"version-history":[{"count":2,"href":"https:\/\/horatech.shop\/es\/wp-json\/wp\/v2\/posts\/3332\/revisions"}],"predecessor-version":[{"id":3787,"href":"https:\/\/horatech.shop\/es\/wp-json\/wp\/v2\/posts\/3332\/revisions\/3787"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/horatech.shop\/es\/wp-json\/wp\/v2\/media\/3334"}],"wp:attachment":[{"href":"https:\/\/horatech.shop\/es\/wp-json\/wp\/v2\/media?parent=3332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/horatech.shop\/es\/wp-json\/wp\/v2\/categories?post=3332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/horatech.shop\/es\/wp-json\/wp\/v2\/tags?post=3332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}