https://takao.blog/es/tags/dark-mode/Recent content in Dark-Mode on Commentary of TakaoHugo -- gohugo.ioesCommentary of TakaoSun, 12 Jul 2026 04:12:51 +0900https://takao.blog/es/web/css-light-dark-color-scheme/Fri, 10 Oct 2025 00:00:00 +0900https://takao.blog/es/web/css-light-dark-color-scheme/<img src="https://takao.blog/img/thumbnail/css-light-dark-color-scheme-es.png" alt="Featured image of post Implementando modo oscuro simple con CSS light-dark()" /><h2 id="el-problema-del-modo-oscuro-tradicional">El problema del modo oscuro tradicional </h2><p>Tradicionalmente requería reglas CSS duplicadas en <code>@media (prefers-color-scheme: dark)</code>. <code>light-dark()</code> elimina esta duplicación.</p> <h2 id="la-función-light-dark">La función light-dark() </h2><p>Acepta dos colores y retorna el que coincide con el esquema actual del usuario: <code>color: light-dark(black, white)</code>.</p> <h2 id="configuración-de-color-scheme">Configuración de color-scheme </h2><p>Requiere declarar los esquemas soportados: <code>color-scheme: light dark;</code> en <code>:root</code> o mediante <code>&lt;meta name=&quot;color-scheme&quot;&gt;</code>.</p> <h2 id="variables-de-tema-simplificadas">Variables de tema simplificadas </h2><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>:<span style="color:#a6e22e">root</span> { --bg: <span style="color:#a6e22e">light-dark</span>(<span style="color:#ae81ff">#ffffff</span>, <span style="color:#ae81ff">#1a1a2e</span>); --text: <span style="color:#a6e22e">light-dark</span>(<span style="color:#ae81ff">#111111</span>, <span style="color:#ae81ff">#e0e0e0</span>); } </span></span></code></pre></div><p>Sin media queries. El navegador maneja el cambio automáticamente.</p>