16-9c128e7e1f8e9241073d.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{950:function(n,s,a){"use strict";a.r(s),a.d(s,"default",(function(){return C}));var t=a(840),e=a.n(t),p=a(841),o=a.n(p),c=a(521),l=a.n(c),u=a(842),r=a.n(u),i=a(843),k=a.n(i),m=a(844),h=a.n(m),b=a(845),d=a.n(b),f=a(846),v=a.n(f),y=a(0),g=a.n(y),z=a(210);function x(n){var s=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(n){return!1}}();return function(){var a,t=h()(n);if(s){var e=h()(this).constructor;a=Reflect.construct(t,arguments,e)}else a=t.apply(this,arguments);return k()(this,a)}}function w(n){return g.a.createElement(n.tag,v()({},n.attributes,{dangerouslySetInnerHTML:{__html:n.html}}))}function S(n){return g.a.createElement(w,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function $(n){return g.a.createElement(w,{tag:"style",html:n.style})}y.Component;var C=function(n){r()(a,n);var s=x(a);function a(){return e()(this,a),s.apply(this,arguments)}return o()(a,[{key:"componentDidMount",value:function(){var n=location.hash;if(n){var s=document.querySelector('a[href="'.concat(n,'"]'));s&&Object(z.a)(document.documentElement,0,function n(s,a){for(;s;)return s.offsetTop&&"static"!==getComputedStyle(s).position&&(a+=s.offsetTop),n(s.parentNode,a);return a}(s,-9))}}},{key:"render",value:function(){return g.a.createElement("div",{className:"zandoc-react-container",key:null},g.a.createElement($,{style:'img[alt="zent-theme"] {\n    width: 514px;\n    height: 319px;\n  }'}),g.a.createElement(S,{html:'<h2 class="anchor-heading"><a href="#themes">¶</a><a href="javascript:void(0)" id="themes" class="anchor-point"></a>Themes</h2>\n<p>Zent supports themes, only colors are customizable for now.</p>\n<p><img src="https://img.yzcdn.cn/zanui/react/zent-theme.png" alt="zent-theme"></p>\n<h3 class="anchor-heading"><a href="#customize-through-css-variable">¶</a><a href="javascript:void(0)" id="customize-through-css-variable" class="anchor-point"></a>Customize through CSS variables</h3>\n<p>Zent uses <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">CSS Variables</a>, so it is possible to customize themes via custom CSS variables.</p>\n<p>Each theme color should be provided in both HEX and RGB format, for example:</p>\n<pre><code class="language-css"><span class="token selector"><span class="token pseudo-class">:root</span></span> <span class="token punctuation">{</span>\n  <span class="token comment">/* Use these when opacity is not needed */</span>\n  <span class="token variable">--theme-primary-1</span><span class="token punctuation">:</span> <span class="token hexcode color">#252b6e</span><span class="token punctuation">;</span>\n  <span class="token variable">--theme-primary-2</span><span class="token punctuation">:</span> <span class="token hexcode color">#3c46b1</span><span class="token punctuation">;</span>\n  <span class="token variable">--theme-primary-3</span><span class="token punctuation">:</span> <span class="token hexcode color">#434fc9</span><span class="token punctuation">;</span>\n  <span class="token variable">--theme-primary-4</span><span class="token punctuation">:</span> <span class="token hexcode color">#515ff0</span><span class="token punctuation">;</span>\n  <span class="token variable">--theme-primary-5</span><span class="token punctuation">:</span> <span class="token hexcode color">#6c78f2</span><span class="token punctuation">;</span>\n  <span class="token variable">--theme-primary-6</span><span class="token punctuation">:</span> <span class="token hexcode color">#7e88f3</span><span class="token punctuation">;</span>\n  <span class="token variable">--theme-primary-7</span><span class="token punctuation">:</span> <span class="token hexcode color">#b0b6f8</span><span class="token punctuation">;</span>\n  <span class="token variable">--theme-primary-8</span><span class="token punctuation">:</span> <span class="token hexcode color">#f2f3fe</span><span class="token punctuation">;</span>\n\n  <span class="token comment">/* Values are the same as above, but used when opacity is required */</span>\n  <span class="token variable">--theme-rgb-primary-1</span><span class="token punctuation">:</span> <span class="token number">37</span><span class="token punctuation">,</span> <span class="token number">43</span><span class="token punctuation">,</span> <span class="token number">110</span><span class="token punctuation">;</span>\n  <span class="token variable">--theme-rgb-primary-2</span><span class="token punctuation">:</span> <span class="token number">60</span><span class="token punctuation">,</span> <span class="token number">70</span><span class="token punctuation">,</span> <span class="token number">177</span><span class="token punctuation">;</span>\n  <span class="token variable">--theme-rgb-primary-3</span><span class="token punctuation">:</span> <span class="token number">67</span><span class="token punctuation">,</span> <span class="token number">79</span><span class="token punctuation">,</span> <span class="token number">201</span><span class="token punctuation">;</span>\n  <span class="token variable">--theme-rgb-primary-4</span><span class="token punctuation">:</span> <span class="token number">81</span><span class="token punctuation">,</span> <span class="token number">95</span><span class="token punctuation">,</span> <span class="token number">240</span><span class="token punctuation">;</span>\n  <span class="token variable">--theme-rgb-primary-5</span><span class="token punctuation">:</span> <span class="token number">108</span><span class="token punctuation">,</span> <span class="token number">120</span><span class="token punctuation">,</span> <span class="token number">242</span><span class="token punctuation">;</span>\n  <span class="token variable">--theme-rgb-primary-6</span><span class="token punctuation">:</span> <span class="token number">126</span><span class="token punctuation">,</span> <span class="token number">136</span><span class="token punctuation">,</span> <span class="token number">243</span><span class="token punctuation">;</span>\n  <span class="token variable">--theme-rgb-primary-7</span><span class="token punctuation">:</span> <span class="token number">176</span><span class="token punctuation">,</span> <span class="token number">182</span><span class="token punctuation">,</span> <span class="token number">248</span><span class="token punctuation">;</span>\n  <span class="token variable">--theme-rgb-primary-8</span><span class="token punctuation">:</span> <span class="token number">242</span><span class="token punctuation">,</span> <span class="token number">243</span><span class="token punctuation">,</span> <span class="token number">254</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre>\n<p>These variables can be generated with this code：</p>\n<pre><code class="language-scss"><span class="token comment">// TODO: define your theme overrides here, and that\'s all!</span>\n<span class="token property"><span class="token variable">$theme-overrides</span></span><span class="token punctuation">:</span> <span class="token punctuation">(</span>\n  <span class="token property">--theme-primary-1</span><span class="token punctuation">:</span> <span class="token hexcode color">#252b6e</span><span class="token punctuation">,</span>\n  <span class="token property">--theme-primary-2</span><span class="token punctuation">:</span> <span class="token hexcode color">#3c46b1</span><span class="token punctuation">,</span>\n  <span class="token property">--theme-primary-3</span><span class="token punctuation">:</span> <span class="token hexcode color">#434fc9</span><span class="token punctuation">,</span>\n  <span class="token property">--theme-primary-4</span><span class="token punctuation">:</span> <span class="token hexcode color">#515ff0</span><span class="token punctuation">,</span>\n  <span class="token property">--theme-primary-5</span><span class="token punctuation">:</span> <span class="token hexcode color">#6c78f2</span><span class="token punctuation">,</span>\n  <span class="token property">--theme-primary-6</span><span class="token punctuation">:</span> <span class="token hexcode color">#7e88f3</span><span class="token punctuation">,</span>\n  <span class="token property">--theme-primary-7</span><span class="token punctuation">:</span> <span class="token hexcode color">#b0b6f8</span><span class="token punctuation">,</span>\n  <span class="token property">--theme-primary-8</span><span class="token punctuation">:</span> <span class="token hexcode color">#f2f3fe</span><span class="token punctuation">,</span>\n<span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token keyword">@mixin</span> <span class="token function">theme-css-vars</span><span class="token punctuation">(</span><span class="token variable">$vars</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">@each</span> <span class="token selector"><span class="token variable">$name</span>, <span class="token variable">$color</span> in <span class="token variable">$vars</span> </span><span class="token punctuation">{</span>\n    <span class="token property"><span class="token variable">#{$name}</span></span><span class="token punctuation">:</span> <span class="token variable">$color</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">@mixin</span> <span class="token function">theme-rgb-css-vars</span><span class="token punctuation">(</span><span class="token variable">$vars</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">@each</span> <span class="token selector"><span class="token variable">$name</span>, <span class="token variable">$color</span> in <span class="token variable">$vars</span> </span><span class="token punctuation">{</span>\n    #<span class="token punctuation">{</span><span class="token function">str-insert</span><span class="token punctuation">(</span><span class="token variable">$name</span><span class="token punctuation">,</span> <span class="token string">"-rgb"</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">:</span> <span class="token function">to-rgb</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">@function</span> <span class="token function">to-rgb</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">@return</span> <span class="token color">red</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token color">green</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token color">blue</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token selector">:root </span><span class="token punctuation">{</span>\n  <span class="token keyword">@include</span> <span class="token function">theme-css-vars</span><span class="token punctuation">(</span><span class="token variable">$theme-overrides</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n  <span class="token comment">// Same but used in rgba contexts</span>\n  <span class="token keyword">@include</span> <span class="token function">theme-rgb-css-vars</span><span class="token punctuation">(</span><span class="token variable">$theme-overrides</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre>\n<h3 class="anchor-heading"><a href="#customize-through-rebuilding-s">¶</a><a href="javascript:void(0)" id="customize-through-rebuilding-s" class="anchor-point"></a>Customize through rebuilding SCSS</h3>\n<p>Styles in Zent are written in <a href="https://sass-lang.com">scss</a>, we have a builtin theme extension file to support custom themes. You can build custom styles using this extension file.</p>\n<p>This method is non-intrusive, but you have to manually build your custom theme every time you upgrade Zent.</p>\n<h4 class="anchor-heading"><a href="#build-steps">¶</a><a href="javascript:void(0)" id="build-steps" class="anchor-point"></a>Build Steps</h4>\n<ol>\n<li>Clone Zent from <a href="https://github.com/youzan/zent">github</a> and install dependencies</li>\n<li>Create a file named <a href="https://github.com/youzan/zent/blob/master/packages/zent/assets/theme/_override_.scss"><code>_override.scss</code></a> in <code>packages/zent/assets</code>, define your custom colors in this file. All customizable colors are defined in <a href="https://github.com/youzan/zent/blob/master/packages/zent/assets/theme/_default.scss"><code>_default.scss</code></a> within the same directory.</li>\n<li>Run <code>yarn theme</code> within <code>packages/zent</code></li>\n<li>Your custom theme styles are in <code>packages/zent/css</code>.</li>\n</ol>'}))}}]),a}(y.Component)}}]);