ant-design/docs__react__customize-theme.en-US.md.eaa524dd.async.js

"use strict";(self.webpackChunkantd=self.webpackChunkantd||[]).push([[345],{572059:function(c,i,l){l.r(i);var m=l(502143),h=l(968521),v=l(720719),p=l(28840),a=l(759907),s=l(828089),g=l(825673),x=l(902068),k=l(574399),d=l(863942),T=l(316073),E=l(24628),f=l(719260),y=l(956140),A=l(127179),b=l(905388),P=l(40428),I=l(606965),D=l(268696),M=l(587302),t=l(424128),C=l(249706),O=l(795127),w=l(116846),R=l(212039),u=l(73024),L=l(553913),o=l(606641),r=l(667294),e=l(370917);function _(){var Z=(0,o.eL)(),n=Z.texts;return(0,e.tZ)(o.dY,null,(0,e.tZ)(r.Fragment,null,(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)("p",null,n[0].value),(0,e.tZ)("p",null,n[1].value),(0,e.tZ)("ol",null,(0,e.tZ)("li",null,n[2].value),(0,e.tZ)("li",null,n[3].value),(0,e.tZ)("li",null,n[4].value),(0,e.tZ)("li",null,n[5].value)),(0,e.tZ)("h2",{id:"customize-theme-with-configprovider"},(0,e.tZ)(t.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#customize-theme-with-configprovider",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Customize theme with ",(0,e.tZ)("code",null,n[6].value)),(0,e.tZ)("p",null,n[7].value,(0,e.tZ)("strong",null,n[8].value),n[9].value),(0,e.tZ)("h3",{id:"customize-design-token"},(0,e.tZ)(t.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#customize-design-token",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Customize Design Token"),(0,e.tZ)("p",null,n[10].value,(0,e.tZ)("code",null,n[11].value),n[12].value),(0,e.tZ)(a.Z,{lang:"tsx"},n[13].value),(0,e.tZ)("p",null,n[14].value,(0,e.tZ)(d.Z,{color:"#00b96b"}),n[15].value),(0,e.tZ)("p",null,(0,e.tZ)("img",{src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*CbF_RJfKEiwAAAAAAAAAAAAAARQnAQ",alt:"themed button"})),(0,e.tZ)("h3",{id:"use-preset-algorithms"},(0,e.tZ)(t.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#use-preset-algorithms",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Use Preset Algorithms"),(0,e.tZ)("p",null,n[16].value,(0,e.tZ)("code",null,n[17].value),n[18].value,(0,e.tZ)("code",null,n[19].value),n[20].value,(0,e.tZ)("code",null,n[21].value),n[22].value,(0,e.tZ)("code",null,n[23].value),n[24].value,(0,e.tZ)("code",null,n[25].value),n[26].value,(0,e.tZ)("code",null,n[27].value),n[28].value),(0,e.tZ)(a.Z,{lang:"tsx"},n[29].value),(0,e.tZ)("h3",{id:"customize-component-token"},(0,e.tZ)(t.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#customize-component-token",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Customize Component Token"),(0,e.tZ)("p",null,n[30].value),(0,e.tZ)(a.Z,{lang:"tsx"},n[31].value),(0,e.tZ)("p",null,n[32].value,(0,e.tZ)(d.Z,{color:"#00b96b"}),n[33].value),(0,e.tZ)("p",null,(0,e.tZ)("img",{src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*EMY0QrHFDjsAAAAAAAAAAAAAARQnAQ",alt:"component token"})),(0,e.tZ)("blockquote",null,(0,e.tZ)("p",null,n[34].value,(0,e.tZ)("code",null,n[35].value),n[36].value,(0,e.tZ)("code",null,n[37].value),n[38].value,(0,e.tZ)("code",null,n[39].value),n[40].value,(0,e.tZ)("code",null,n[41].value),n[42].value,(0,e.tZ)("code",null,n[43].value),n[44].value,(0,e.tZ)("code",null,n[45].value),n[46].value,(0,e.tZ)(t.Z,{to:"/components/app",sourceType:"Link"},n[47].value),n[48].value)),(0,e.tZ)("h3",{id:"disable-motion"},(0,e.tZ)(t.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#disable-motion",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Disable Motion"),(0,e.tZ)("p",null,n[49].value)),(0,e.tZ)(o.Dl,{demo:{id:"docs-react-customize-theme-en-us-demo-motion"},previewerProps:{title:"Motion",filename:"docs/react/demo/motion.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-
import { Switch, ConfigProvider, Space, Checkbox, Radio, Row, Col } from 'antd';
export default () => {
  const [checked, setChecked] = React.useState(false);
  React.useEffect(() => {
    const id = setInterval(() => {
      setChecked((prev) => !prev);
    }, 500);
    return () => {
      clearInterval(id);
    };
  }, []);
  const nodes = (
    <Space>
      <Checkbox checked={checked}>Checkbox</Checkbox>
      <Radio checked={checked}>Radio</Radio>
      <Switch checked={checked} />
    </Space>
  );
  return (
    <Row gutter={[24, 24]}>
      <Col span={24}>{nodes}</Col>

      <Col span={24}>
        <ConfigProvider
          theme={{
            token: {
              motion: false,
            },
          }}
        >
          {nodes}
        </ConfigProvider>
      </Col>
    </Row>
  );
};
`}}),(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)("h2",{id:"other-ways-to-use-dynamic-themes"},(0,e.tZ)(t.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#other-ways-to-use-dynamic-themes",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Other Ways to Use Dynamic Themes"),(0,e.tZ)("h3",{id:"switch-themes-dynamically"},(0,e.tZ)(t.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#switch-themes-dynamically",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Switch Themes Dynamically"),(0,e.tZ)("p",null,n[50].value,(0,e.tZ)("code",null,n[51].value),n[52].value,(0,e.tZ)("code",null,n[53].value),n[54].value),(0,e.tZ)("h3",{id:"local-theme"},(0,e.tZ)(t.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#local-theme",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Local Theme"),(0,e.tZ)("p",null,n[55].value,(0,e.tZ)("code",null,n[56].value),n[57].value),(0,e.tZ)(a.Z,{lang:"tsx"},n[58].value),(0,e.tZ)("h3",{id:"consume-design-token"},(0,e.tZ)(t.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#consume-design-token",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Consume Design Token"),(0,e.tZ)("p",null,n[59].value,(0,e.tZ)("code",null,n[60].value),n[61].value),(0,e.tZ)(a.Z,{lang:"tsx"},n[62].value),(0,e.tZ)("h3",{id:"static-consume-eg-less"},(0,e.tZ)(t.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#static-consume-eg-less",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Static consume (e.g. less)"),(0,e.tZ)("p",null,n[63].value),(0,e.tZ)(a.Z,{lang:"jsx"},n[64].value),(0,e.tZ)("p",null,n[65].value,(0,e.tZ)("code",null,n[66].value),n[67].value,(0,e.tZ)("code",null,n[68].value),n[69].value),(0,e.tZ)(a.Z,{lang:"tsx"},n[70].value),(0,e.tZ)("p",null,n[71].value),(0,e.tZ)(a.Z,{lang:"jsx"},n[72].value),(0,e.tZ)("p",null,n[73].value,(0,e.tZ)(t.Z,{to:"/docs/react/migration-v5",sourceType:"Link"},n[74].value),n[75].value),(0,e.tZ)("h2",{id:"advanced"},(0,e.tZ)(t.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#advanced",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Advanced"),(0,e.tZ)("p",null,n[76].value),(0,e.tZ)("h3",{id:"life-cycle-of-design-token"},(0,e.tZ)(t.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#life-cycle-of-design-token",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Life Cycle of Design Token"),(0,e.tZ)("p",null,(0,e.tZ)("img",{src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*uF3kTrY4InUAAAAAAAAAAAAAARQnAQ",alt:"token"})),(0,e.tZ)("h3",{id:"seed-token"},(0,e.tZ)(t.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#seed-token",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Seed Token"),(0,e.tZ)("p",null,n[77].value,(0,e.tZ)("code",null,n[78].value),n[79].value),(0,e.tZ)(a.Z,{lang:"tsx"},n[80].value),(0,e.tZ)("h3",{id:"map-token"},(0,e.tZ)(t.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#map-token",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Map Token"),(0,e.tZ)("p",null,n[81].value,(0,e.tZ)("code",null,n[82].value),n[83].value,(0,e.tZ)("code",null,n[84].value),n[85].value),(0,e.tZ)(a.Z,{lang:"tsx"},n[86].value),(0,e.tZ)("h3",{id:"alias-token"},(0,e.tZ)(t.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#alias-token",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Alias Token"),(0,e.tZ)("p",null,n[87].value),(0,e.tZ)(a.Z,{lang:"tsx"},n[88].value),(0,e.tZ)("h3",{id:"algorithm"},(0,e.tZ)(t.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#algorithm",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Algorithm"),(0,e.tZ)("p",null,n[89].value),(0,e.tZ)(a.Z,{lang:"tsx"},n[90].value),(0,e.tZ)("h3",{id:"legacy-browser-compatible"},(0,e.tZ)(t.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#legacy-browser-compatible",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Legacy Browser Compatible"),(0,e.tZ)("p",null,n[91].value,(0,e.tZ)(t.Z,{to:"/docs/react/compatible-style",sourceType:"Link"},n[92].value),n[93].value),(0,e.tZ)("h3",{id:"server-side-render-ssr"},(0,e.tZ)(t.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#server-side-render-ssr",sourceType:"a"},(0,e.tZ)("span",{className:"ico