{"id":3014,"date":"2020-11-20T13:00:42","date_gmt":"2020-11-20T12:00:42","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=3014"},"modified":"2023-10-30T10:44:39","modified_gmt":"2023-10-30T09:44:39","slug":"anadir-tema-oscuro-css-javascript","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/anadir-tema-oscuro-css-javascript\/","title":{"rendered":"C\u00f3mo a\u00f1adir un tema oscuro con CSS y JavaScript"},"content":{"rendered":"\n<p>Los sitios web se han construido tradicionalmente usando una tipograf\u00eda m\u00e1s oscura y sobre un fondo claro o directamente blanco.  A pesar de ello, en los \u00faltimos a\u00f1os se ha popularizado el uso de temas oscuros, tambi\u00e9n llamados \u00abdark theme\u00bb, en las interfaces de diferentes aplicaciones o sitios web. Esto se debe a los beneficios que aporta sobre la vista de los usuarios, y tambi\u00e9n al ahorro de bater\u00eda que supone el usar estos temas nocturnos. Es por ello que en esta entrada te ense\u00f1o <strong>c\u00f3mo a\u00f1adir un tema oscuro con CSS y JavaScript<\/strong>. <\/p>\n\n\n\n<p>As\u00ed los usuarios de tu web podr\u00e1n elegir entre <strong>tema claro <\/strong>y un <strong>tema oscuro<\/strong>, lo que mejorar\u00e1 notablemente la usabilidad de tu p\u00e1gina y por consiguiente, el <a href=\"https:\/\/carontestudio.com\/marketing\/seo-posicionamiento-buscadores-vitoria\">posicionamiento de tu p\u00e1gina web<\/a>. <\/p>\n\n\n\n<p>El objetivo de esta publicaci\u00f3n, es que logres crear un interruptor o switch que genere un efecto como el siguiente. Ver\u00e1s que con un click podr\u00e1s cambiar de tema claro a tema oscuro:<\/p>\n\n\n\n<iframe height=\"650px\" style=\"width: 100%;\" scrolling=\"no\" title=\"pobmmJP\" src=\"https:\/\/codepen.io\/carontestudio\/embed\/pobmmJP?height=265&amp;theme-id=light&amp;default-tab=css,result\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href='https:\/\/codepen.io\/carontestudio\/pen\/pobmmJP'>pobmmJP<\/a> by Alberto\n  (<a href='https:\/\/codepen.io\/carontestudio'>@carontestudio<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.\n<\/iframe>\n\n\n\n<h2 class=\"wp-block-heading\">A\u00f1ade un bot\u00f3n para cambiar a tema oscuro con HTML<\/h2>\n\n\n\n<p>En el c\u00f3digo HTML de tu web simplemente tienes que a\u00f1adir el bot\u00f3n que permita cambiar entre el tema oscuro, y el tema claro. Este bot\u00f3n puede ser de cualquier tipo, aunque normalmente se utilizan botones de tipo on\/off (Toggle Switch) para dise\u00f1os de este estilo. Si quieres saber como crearlo, te recomendamos visitar la p\u00e1gina <a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3schools.com\/howto\/howto_css_switch.asp\" target=\"_blank\">W3Schools<\/a>, en ella podr\u00e1s ver el c\u00f3digo  y utilizarlo en tus proyectos. <\/p>\n\n\n\n<p>En caso de que no conozcas las distintas etiquetas HTML que podemos utilizar, te recomendamos visitar nuestro <a rel=\"noreferrer noopener\" href=\"https:\/\/carontestudio.com\/blog\/listado-de-etiquetas-html\/\" target=\"_blank\">listado<\/a>.<\/p>\n\n\n\n<p>En nuestro caso, el c\u00f3digo HTML es as\u00ed de simple:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;header class=\"container\"&gt;\n            &lt;div class=\"row\"&gt;\n                &lt;div class=\"col text-center\"&gt;\n                    &lt;label id=\"switch\"&gt;\n                        &lt;input type=\"checkbox\"&gt;\n                        &lt;span class=\"slider round\"&gt;&lt;\/span&gt;\n                    &lt;\/label&gt;\n                    &lt;h1&gt;Caronte Web Studio&lt;\/h1&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt; \n        &lt;\/header&gt;\n        &lt;main class=\"container\"&gt;\n            &lt;section class=\"row justify-content-center\"&gt;\n                &lt;div class=\"col-md-8 text-center\"&gt;\n                    &lt;h2&gt;Custom Web &amp; Design&lt;\/h2&gt;\n                    &lt;p&gt;Desarrollamos la web para tu negocio con un dise\u00f1o web a medida 100% personalizado. \n                        Olvidate de plantillas y proyectos sin personalidad. Estamos en Vitoria-Gasteiz y \n                        trabajamos con clientes de todo el pa\u00eds.\n                    &lt;\/p&gt;\n                    &lt;a href=\"https:\/\/carontestudio.com\/\" target=\"_blank\"&gt;Desc\u00fabrenos&lt;\/a&gt;\n                &lt;\/div&gt;\n            &lt;\/section&gt;\n        &lt;\/main&gt;<\/code><\/pre>\n\n\n\n<p>Si te preguntas para qu\u00e9 sirven las clases <strong>container<\/strong>, <strong>row<\/strong>, <strong>col<\/strong>, etc, son clases que pertenecen a Bootstrap. Por si es de tu inter\u00e9s, Bootstrap es un framework muy extendido gracias entre otras cosas, a su facilidad para crear sitios web totalmente <strong>responsive<\/strong>, y atractivos. No es necesario que a\u00f1adas esas clases. En cualquier caso, si quieres empezar a conocer este framework, te invitamos a leer nuestro art\u00edculo \u00ab<a href=\"https:\/\/carontestudio.com\/blog\/bootstrap-como-instalar\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bootstrap: C\u00f3mo Instalar<\/a>\u00bb o bien a apuntarte a uno de nuestros <a href=\"https:\/\/carontestudio.com\/diseno-web\/diseno-web-vitoria\">cursos de dise\u00f1o web en Vitoria<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Definimos las variables de los temas con CSS<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:45.84%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"683\" height=\"1024\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/11\/poner-tema-oscuro-web-683x1024.jpg\" alt=\"C\u00f3mo poner tema oscuro en tu web\" class=\"wp-image-3052\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/11\/poner-tema-oscuro-web-683x1024.jpg 683w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/11\/poner-tema-oscuro-web-200x300.jpg 200w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/11\/poner-tema-oscuro-web-768x1151.jpg 768w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/11\/poner-tema-oscuro-web.jpg 900w\" sizes=\"auto, (max-width: 683px) 100vw, 683px\" \/><figcaption>C\u00f3mo poner tema oscuro en tu web<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:54.16%\">\n<p>En la parte de CSS es muy importante que definas como propiedades personalizadas, los elementos que van a cambiar del <strong>tema claro<\/strong>, al <strong>tema oscuro<\/strong>. Es decir, almacenaremos los valores que van a cambiar en variables.<\/p>\n\n\n\n<p>En nuestro caso, \u00fanicamente definiremos como variables los valores correspondientes a los colores blanco y negro, ya que son los \u00fanicos valores CSS que cambian de un modo a otro en nuestra p\u00e1gina. T\u00fa puedes definir todos aquellos elementos que consideres oportuno.<\/p>\n\n\n\n<p>Para ello, emplearemos el selector <strong>:root<\/strong> y en su interior definiremos nuestras propiedades personalizadas con la siguiente sintaxis: <strong>&#8211;nombre-variable:valor;<\/strong> <\/p>\n\n\n\n<p>En nuestro caso, el c\u00f3digo CSS quedar\u00eda de la siguiente manera:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>:root {\n    --color-fuente: #000000;\n    --color-fondo: #ffffff;\n}<\/code><\/pre>\n\n\n\n<p>Una vez definidas nuestras propiedades, cuando queramos hacer referencia a su valor a lo largo de nuestro documento CSS, simplemente tendremos que escribir el <strong>nombre de la variable<\/strong> que lo almacena con la siguiente sintaxis: propiedad: <strong>var(&#8211;nombre-variable)<\/strong>. Por ejemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>a {\n    background-color:var(--color-fuente);\n    color:var(--color-fondo);\n}<\/code><\/pre>\n\n\n\n<p>Gracias a las variables CSS, con JavaScript podremos indicar que cuando el usuario haga click en el bot\u00f3n de cambio de tema, <strong>los valores de dichas variables se inviertan<\/strong>. De esta manera, conseguiremos que el color de fondo y el color de fuente sean opuestos en funci\u00f3n del tema elegido.<\/p>\n\n\n\n<p>Para lograrlo, realizaremos un paso m\u00e1s en CSS. Indicaremos que cuando un atributo del documento que definiremos despu\u00e9s con JavaScript, tenga el valor \u201cdark\u201d, <strong>los valores de nuestras variables se inviertan<\/strong>. En nuestro caso, lo hemos realizado de la siguiente manera:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;tema=\"dark\"]{\n    --color-fuente: #ffffff;\n    --color-fondo: #000000;\n}<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">A\u00f1adir JavaScript para cambiar a tema oscuro  <\/h2>\n\n\n\n<p>Por \u00faltimo, a\u00f1adiremos el c\u00f3digo JavaScript que se va a encargar de realizar los cambios oportunos cuando el usuario haga clic en el bot\u00f3n. Veamos nuestro c\u00f3digo y analic\u00e9moslo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;header class=\"container\"&gt;\n            &lt;div class=\"row\"&gt;\n                &lt;div class=\"col text-center\"&gt;\n                    &lt;label id=\"switch\"&gt;\n                        &lt;input type=\"checkbox\"&gt;\n                        &lt;span class=\"slider round\"&gt;&lt;\/span&gt;\n                    &lt;\/label&gt;\n                    &lt;h1&gt;Caronte Web Studio&lt;\/h1&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt; \n        &lt;\/header&gt;\n        &lt;main class=\"container\"&gt;\n            &lt;section class=\"row justify-content-center\"&gt;\n                &lt;div class=\"col-md-8 text-center\"&gt;\n                    &lt;h2&gt;Custom Web &amp; Design&lt;\/h2&gt;\n                    &lt;p&gt;Desarrollamos la web para tu negocio con un dise\u00f1o web a medida 100% personalizado. \n                        Olvidate de plantillas y proyectos sin personalidad. Estamos en Vitoria-Gasteiz y \n                        trabajamos con clientes de todo el pa\u00eds.\n                    &lt;\/p&gt;\n                    &lt;a href=\"https:\/\/carontestudio.com\/\" target=\"_blank\"&gt;Desc\u00fabrenos&lt;\/a&gt;\n                &lt;\/div&gt;\n            &lt;\/section&gt;\n        &lt;\/main&gt;\n        &lt;script&gt;\n            const colorSwitch = document.querySelector('#switch input&#91;type=\"checkbox\"]');\n            function cambiaTema(ev){\n                if(ev.target.checked){\n                    document.documentElement.setAttribute('tema', 'dark');\n                } else {\n                    document.documentElement.setAttribute('tema', 'light');\n                }\n            }\n            colorSwitch.addEventListener('change', cambiaTema);\n        &lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Nuestro c\u00f3digo JavaScript se compone de <strong>tres partes<\/strong>:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>En la primera l\u00ednea de c\u00f3digo declaramos una constante y le asignamos como valor la llamada a la funci\u00f3n <strong>querySelector()<\/strong>. Le indicamos la referencia a las etiquetas &lt;label&gt; e &lt;input&gt;. Es decir, pondremos en los par\u00e9ntesis la referencia a nuestro bot\u00f3n de cambio de tema.<\/li><li>Creamos una funci\u00f3n que reciba un evento como argumento, nosotros la hemos llamado <strong>cambiaColor()<\/strong>. Dentro de la funci\u00f3n definimos que si el bot\u00f3n est\u00e1 en \u00abon\u00bb, se establece un atributo del documento con valor \u00abdark\u00bb. De lo contrario, se establece dicho atributo con valor \u00ablight\u00bb.<\/li><li>Definimos el evento con la funci\u00f3n addEventListener() y le pasamos los valores change y el nombre de la funci\u00f3n que hemos creado. De esta manera, cuando nuestro bot\u00f3n cambie entre on y off, llamaremos a la funci\u00f3n que cambia el atributo del documento. Recordemos que en funci\u00f3n de dicho atributo, en CSS hemos definido variables diferentes.<\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusiones<\/h2>\n\n\n\n<p>Has visto <strong>c\u00f3mo a\u00f1adir un tema oscuro con CSS y JavaScript<\/strong> de una forma sencilla. Simplemente tienes que crear un bot\u00f3n, definir las propiedades que deseas que cambien como variables CSS, y definir un script como el que te he mostrado.<\/p>\n\n\n\n<p>Espero que te haya servido de ayuda. Si quieres aportar algo, por favor, no dudes en dejarme un comentario en esta publicaci\u00f3n.<\/p>\n\n\n\n<p>\u00a1Te espero en el siguiente art\u00edculo!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Si tienes una web o aplicaci\u00f3n m\u00f3vil, y quieres saber c\u00f3mo a\u00f1adir un bot\u00f3n para cambiar los colores base a un tema oscuro, en nuestra publicaci\u00f3n de hoy te ense\u00f1o como hacerlo. \u00a1Comenzamos!<\/p>\n","protected":false},"author":21,"featured_media":3057,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[50],"tags":[93],"class_list":["post-3014","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programacion-web","tag-css"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>C\u00f3mo a\u00f1adir un tema oscuro con CSS y JavaScript - Caronte<\/title>\n<meta name=\"description\" content=\"\u00bfQuieres que tu web cambie de un tema light a un tema dark con un solo click? \u00a1Aprende como a\u00f1adir un tema oscuro empleando CSS y JavaScript!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/carontestudio.com\/blog\/anadir-tema-oscuro-css-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo a\u00f1adir un tema oscuro con CSS y JavaScript - Caronte\" \/>\n<meta property=\"og:description\" content=\"\u00bfQuieres que tu web cambie de un tema light a un tema dark con un solo click? \u00a1Aprende como a\u00f1adir un tema oscuro empleando CSS y JavaScript!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/carontestudio.com\/blog\/anadir-tema-oscuro-css-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog de maketing | Caronte\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/carontewebstudio\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-20T12:00:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-30T09:44:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/11\/tema-oscuro-javascript.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1250\" \/>\n\t<meta property=\"og:image:height\" content=\"737\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Caronte Studio\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Caronte Studio\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/anadir-tema-oscuro-css-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/anadir-tema-oscuro-css-javascript\\\/\"},\"author\":{\"name\":\"Caronte Studio\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/af53223b68efd2be07f600dfc0506979\"},\"headline\":\"C\u00f3mo a\u00f1adir un tema oscuro con CSS y JavaScript\",\"datePublished\":\"2020-11-20T12:00:42+00:00\",\"dateModified\":\"2023-10-30T09:44:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/anadir-tema-oscuro-css-javascript\\\/\"},\"wordCount\":956,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/anadir-tema-oscuro-css-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/tema-oscuro-javascript.jpg\",\"keywords\":[\"CSS\"],\"articleSection\":[\"Programaci\u00f3n\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/anadir-tema-oscuro-css-javascript\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/anadir-tema-oscuro-css-javascript\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/anadir-tema-oscuro-css-javascript\\\/\",\"name\":\"C\u00f3mo a\u00f1adir un tema oscuro con CSS y JavaScript - Caronte\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/anadir-tema-oscuro-css-javascript\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/anadir-tema-oscuro-css-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/tema-oscuro-javascript.jpg\",\"datePublished\":\"2020-11-20T12:00:42+00:00\",\"dateModified\":\"2023-10-30T09:44:39+00:00\",\"description\":\"\u00bfQuieres que tu web cambie de un tema light a un tema dark con un solo click? \u00a1Aprende como a\u00f1adir un tema oscuro empleando CSS y JavaScript!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/anadir-tema-oscuro-css-javascript\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/anadir-tema-oscuro-css-javascript\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/anadir-tema-oscuro-css-javascript\\\/#primaryimage\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/tema-oscuro-javascript.jpg\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/tema-oscuro-javascript.jpg\",\"width\":1250,\"height\":737,\"caption\":\"Tema oscuro Javascript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/anadir-tema-oscuro-css-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo a\u00f1adir un tema oscuro con CSS y JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"name\":\"Blog de marketing | Caronte\",\"description\":\"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.\",\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\",\"name\":\"Caronte - Agencia de marketing\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"width\":1090,\"height\":155,\"caption\":\"Caronte - Agencia de marketing\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/carontewebstudio\\\/\",\"https:\\\/\\\/www.instagram.com\\\/caronte_studio\\\/\",\"https:\\\/\\\/www.tiktok.com\\\/@carontewebstudio\",\"https:\\\/\\\/www.youtube.com\\\/@carontewebstudio\",\"https:\\\/\\\/es.linkedin.com\\\/company\\\/carontewebstudio\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/af53223b68efd2be07f600dfc0506979\",\"name\":\"Caronte Studio\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4156e97024f8a40a8bcef2b24c0de8c6cfdd6857e2bc92e993c1a04b255e2e98?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4156e97024f8a40a8bcef2b24c0de8c6cfdd6857e2bc92e993c1a04b255e2e98?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4156e97024f8a40a8bcef2b24c0de8c6cfdd6857e2bc92e993c1a04b255e2e98?s=96&d=mm&r=g\",\"caption\":\"Caronte Studio\"},\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/author\\\/caronte-studio\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00f3mo a\u00f1adir un tema oscuro con CSS y JavaScript - Caronte","description":"\u00bfQuieres que tu web cambie de un tema light a un tema dark con un solo click? \u00a1Aprende como a\u00f1adir un tema oscuro empleando CSS y JavaScript!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/carontestudio.com\/blog\/anadir-tema-oscuro-css-javascript\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo a\u00f1adir un tema oscuro con CSS y JavaScript - Caronte","og_description":"\u00bfQuieres que tu web cambie de un tema light a un tema dark con un solo click? \u00a1Aprende como a\u00f1adir un tema oscuro empleando CSS y JavaScript!","og_url":"https:\/\/carontestudio.com\/blog\/anadir-tema-oscuro-css-javascript\/","og_site_name":"Blog de maketing | Caronte","article_publisher":"https:\/\/www.facebook.com\/carontewebstudio\/","article_published_time":"2020-11-20T12:00:42+00:00","article_modified_time":"2023-10-30T09:44:39+00:00","og_image":[{"width":1250,"height":737,"url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/11\/tema-oscuro-javascript.jpg","type":"image\/jpeg"}],"author":"Caronte Studio","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Caronte Studio","Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/carontestudio.com\/blog\/anadir-tema-oscuro-css-javascript\/#article","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/anadir-tema-oscuro-css-javascript\/"},"author":{"name":"Caronte Studio","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/af53223b68efd2be07f600dfc0506979"},"headline":"C\u00f3mo a\u00f1adir un tema oscuro con CSS y JavaScript","datePublished":"2020-11-20T12:00:42+00:00","dateModified":"2023-10-30T09:44:39+00:00","mainEntityOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/anadir-tema-oscuro-css-javascript\/"},"wordCount":956,"commentCount":2,"publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/anadir-tema-oscuro-css-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/11\/tema-oscuro-javascript.jpg","keywords":["CSS"],"articleSection":["Programaci\u00f3n"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/carontestudio.com\/blog\/anadir-tema-oscuro-css-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/carontestudio.com\/blog\/anadir-tema-oscuro-css-javascript\/","url":"https:\/\/carontestudio.com\/blog\/anadir-tema-oscuro-css-javascript\/","name":"C\u00f3mo a\u00f1adir un tema oscuro con CSS y JavaScript - Caronte","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/anadir-tema-oscuro-css-javascript\/#primaryimage"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/anadir-tema-oscuro-css-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/11\/tema-oscuro-javascript.jpg","datePublished":"2020-11-20T12:00:42+00:00","dateModified":"2023-10-30T09:44:39+00:00","description":"\u00bfQuieres que tu web cambie de un tema light a un tema dark con un solo click? \u00a1Aprende como a\u00f1adir un tema oscuro empleando CSS y JavaScript!","breadcrumb":{"@id":"https:\/\/carontestudio.com\/blog\/anadir-tema-oscuro-css-javascript\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/carontestudio.com\/blog\/anadir-tema-oscuro-css-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/anadir-tema-oscuro-css-javascript\/#primaryimage","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/11\/tema-oscuro-javascript.jpg","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/11\/tema-oscuro-javascript.jpg","width":1250,"height":737,"caption":"Tema oscuro Javascript"},{"@type":"BreadcrumbList","@id":"https:\/\/carontestudio.com\/blog\/anadir-tema-oscuro-css-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/carontestudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo a\u00f1adir un tema oscuro con CSS y JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/carontestudio.com\/blog\/#website","url":"https:\/\/carontestudio.com\/blog\/","name":"Blog de marketing | Caronte","description":"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.","publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/carontestudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/carontestudio.com\/blog\/#organization","name":"Caronte - Agencia de marketing","url":"https:\/\/carontestudio.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","width":1090,"height":155,"caption":"Caronte - Agencia de marketing"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/carontewebstudio\/","https:\/\/www.instagram.com\/caronte_studio\/","https:\/\/www.tiktok.com\/@carontewebstudio","https:\/\/www.youtube.com\/@carontewebstudio","https:\/\/es.linkedin.com\/company\/carontewebstudio"]},{"@type":"Person","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/af53223b68efd2be07f600dfc0506979","name":"Caronte Studio","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/4156e97024f8a40a8bcef2b24c0de8c6cfdd6857e2bc92e993c1a04b255e2e98?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4156e97024f8a40a8bcef2b24c0de8c6cfdd6857e2bc92e993c1a04b255e2e98?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4156e97024f8a40a8bcef2b24c0de8c6cfdd6857e2bc92e993c1a04b255e2e98?s=96&d=mm&r=g","caption":"Caronte Studio"},"url":"https:\/\/carontestudio.com\/blog\/author\/caronte-studio\/"}]}},"_links":{"self":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/3014","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/comments?post=3014"}],"version-history":[{"count":29,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/3014\/revisions"}],"predecessor-version":[{"id":7976,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/3014\/revisions\/7976"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media\/3057"}],"wp:attachment":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media?parent=3014"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/categories?post=3014"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/tags?post=3014"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}