element-plus/assets/zh-CN_guide_dark-mode.md.f547c594.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.fbce7c62.js";const l={id:"\u6697\u9ED1\u6A21\u5F0F",tabindex:"-1"},r=a("\u6697\u9ED1\u6A21\u5F0F "),i=a(),u=s("a",{class:"header-anchor",href:"#\u6697\u9ED1\u6A21\u5F0F","aria-hidden":"true"},"#",-1),d=o(`<p>\u73B0\u5728\uFF0CElement Plus \u7EC8\u4E8E\u652F\u6301\u4E86\u9ED1\u6697\u6A21\u5F0F\uFF01</p><p>\u6211\u4EEC\u63D0\u53D6\u5E76\u6574\u7406\u4E86\u6240\u6709\u7684\u8BBE\u8BA1\u53D8\u91CF\uFF0C\u5E76\u901A\u8FC7 CSS Vars \u6280\u672F\u5B9E\u73B0\u52A8\u6001\u66F4\u65B0\u4E3B\u9898\u3002</p><h2 id="\u5982\u4F55\u542F\u7528\uFF1F" tabindex="-1">\u5982\u4F55\u542F\u7528\uFF1F <a class="header-anchor" href="#\u5982\u4F55\u542F\u7528\uFF1F" aria-hidden="true">#</a></h2><p>First you can create a switch to toggle <code>dark</code> class of html.</p><blockquote><p>If you only need dark mode, just add <code>dark</code> class for 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>If you want to toggle it, i recommend <a href="https://vueuse.org/core/useDark/" target="_blank" rel="noopener noreferrer">useDark | VueUse</a>.</p></blockquote><p>Then, you can quickly enable it with just one line of code to import CSS in your entry.</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>If you want an example, you can refer to <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="\u81EA\u5B9A\u4E49\u53D8\u91CF" tabindex="-1">\u81EA\u5B9A\u4E49\u53D8\u91CF <a class="header-anchor" href="#\u81EA\u5B9A\u4E49\u53D8\u91CF" aria-hidden="true">#</a></h2><h3 id="\u901A\u8FC7-css" tabindex="-1">\u901A\u8FC7 CSS <a class="header-anchor" href="#\u901A\u8FC7-css" aria-hidden="true">#</a></h3><p>Just override it by CSS Vars.</p><p>For example, new file <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>Import it after styles of 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="\u901A\u8FC7-scss" tabindex="-1">\u901A\u8FC7 SCSS <a class="header-anchor" href="#\u901A\u8FC7-scss" aria-hidden="true">#</a></h3><p>If you use scss, you can also import scss file to compile.</p><blockquote><p>You can refer <a href="./theming.html">Theming</a> to get more info.</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),f='{"title":"\u6697\u9ED1\u6A21\u5F0F","description":"","frontmatter":{"title":"\u6697\u9ED1\u6A21\u5F0F","lang":"zh-CN"},"headers":[{"level":2,"title":"\u5982\u4F55\u542F\u7528\uFF1F","slug":"\u5982\u4F55\u542F\u7528\uFF1F"},{"level":2,"title":"\u81EA\u5B9A\u4E49\u53D8\u91CF","slug":"\u81EA\u5B9A\u4E49\u53D8\u91CF"},{"level":3,"title":"\u901A\u8FC7 CSS","slug":"\u901A\u8FC7-css"},{"level":3,"title":"\u901A\u8FC7 SCSS","slug":"\u901A\u8FC7-scss"}],"relativePath":"zh-CN/guide/dark-mode.md","lastUpdated":null}',k={},v=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{f as __pageData,v as default};