element-plus/assets/es-ES_guide_dark-mode.md.0efca8b4.js

import{c as e,b as s,a as t,d as a,e as o,o as p,y as c}from"./app.d323121f.js";const l={id:"modo-oscuro",tabindex:"-1"},r=a("Modo Oscuro "),i=a(),u=s("a",{class:"header-anchor",href:"#modo-oscuro","aria-hidden":"true"},"#",-1),d=o(`<p>Despu\xE9s de un largo tiempo, Element Plus soporta modo oscuro!</p><p>Extrajimos y unificamos todas las variables necesarias para hacer posible la implementaci\xF3n basada en variables CSS.</p><h2 id="\xBFcomo-activarlo" tabindex="-1">\xBFC\xF3mo activarlo? <a class="header-anchor" href="#\xBFcomo-activarlo" aria-hidden="true">#</a></h2><p>Puede crear un switch para cambiar la clase <code>dark</code> del Html.</p><blockquote><p>Si solo necesita el modo oscuro, solo tiene que a\xF1adir la clase <code>dark</code> al Html.</p></blockquote><div class="language-html"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><blockquote><p>Si quiere alternarlo, le recomendamos <a href="https://vueuse.org/core/useDark/" target="_blank" rel="noopener noreferrer">useDark | VueUse</a>.</p></blockquote><p>Entonces, puede activarlo r\xE1pidamente con una sola l\xEDnea de c\xF3digo para importar CSS en su entrada.</p><div class="language-ts"><pre><code><span class="token comment">// main.ts</span>
<span class="token comment">// if you just want to import css</span>
<span class="token keyword">import</span> <span class="token string">&#39;element-plus/theme-chalk/dark/css-vars.css&#39;</span>
</code></pre></div><blockquote><p>Si quiere un ejemplo, puede referirse a <a href="https://github.com/element-plus/element-plus-vite-starter" target="_blank" rel="noopener noreferrer">element-plus-vite-starter</a>.</p></blockquote><h2 id="variables-personalizadas" tabindex="-1">Variables personalizadas <a class="header-anchor" href="#variables-personalizadas" aria-hidden="true">#</a></h2><h3 id="por-css" tabindex="-1">Por CSS <a class="header-anchor" href="#por-css" aria-hidden="true">#</a></h3><p>Solo sobrescriba las variables CSS.</p><p>Por ejemplo, nuevo archivo <code>styles/dark/css-vars.css</code>:</p><div class="language-css"><pre><code><span class="token selector">html.dark</span> <span class="token punctuation">{</span>
  <span class="token comment">/* custom dark bg color */</span>
  <span class="token property">--el-bg-color</span><span class="token punctuation">:</span> #626aef<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>Imp\xF3rtelo despu\xE9s de los estilos de Element Plus:</p><div class="language-ts"><pre><code><span class="token comment">// main.ts</span>
<span class="token keyword">import</span> <span class="token string">&#39;element-plus/theme-chalk/dark/css-vars.css&#39;</span>
<span class="token keyword">import</span> <span class="token string">&#39;./styles/dark/css-vars.css&#39;</span>
</code></pre></div><h3 id="por-scss" tabindex="-1">Por SCSS <a class="header-anchor" href="#por-scss" aria-hidden="true">#</a></h3><p>Si utiliza scss, tambi\xE9n puede importar el archivo scss para compilar.</p><blockquote><p>Puedes referirse a <a href="./theming.html">Tema</a> para obtener m\xE1s informaci\xF3n.</p></blockquote><div class="language-scss"><pre><code><span class="token comment">// styles/element/index.scss</span>
<span class="token comment">/*just override what you need*/</span>
<span class="token keyword">@forward</span> <span class="token string">&#39;element-plus/theme-chalk/src/dark/var.scss&#39;</span> <span class="token module-modifier keyword">with</span> <span class="token punctuation">(</span>
  <span class="token property"><span class="token variable">$bg-color</span></span><span class="token punctuation">:</span> <span class="token punctuation">(</span>
    <span class="token string">&#39;page&#39;</span><span class="token punctuation">:</span> #0a0a0a<span class="token punctuation">,</span>
    <span class="token string">&#39;&#39;</span><span class="token punctuation">:</span> #626aef<span class="token punctuation">,</span>
    <span class="token string">&#39;overlay&#39;</span><span class="token punctuation">:</span> #1d1e1f<span class="token punctuation">,</span>
  <span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><div class="language-ts"><pre><code><span class="token comment">// main.ts</span>
<span class="token keyword">import</span> <span class="token string">&#39;./styles/element/index.scss&#39;</span>

<span class="token comment">// or just want to import scss?</span>
<span class="token comment">// import &#39;element-plus/theme-chalk/src/dark/css-vars.scss&#39;</span>
</code></pre></div>`,22),_='{"title":"Dark Mode","description":"","frontmatter":{"title":"Dark Mode","lang":"es-ES"},"headers":[{"level":2,"title":"\xBFC\xF3mo activarlo?","slug":"\xBFcomo-activarlo"},{"level":2,"title":"Variables personalizadas","slug":"variables-personalizadas"},{"level":3,"title":"Por CSS","slug":"por-css"},{"level":3,"title":"Por SCSS","slug":"por-scss"}],"relativePath":"es-ES/guide/dark-mode.md","lastUpdated":null}',k={},b=Object.assign(k,{setup(m){return(h,g)=>{const n=c;return p(),e("div",null,[s("h1",l,[r,t(n,{version:"2.2.0"}),i,u]),d])}}});export{_ as __pageData,b as default};