{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/advanced/dark-mode","result":{"data":{"current":{"frontmatter":{"title":"Dark Mode 暗色模式","order":6,"brief":null,"icon":"doc-darkmode"},"fields":{"type":"advanced"},"tableOfContents":{"items":[{"url":"#能力介绍","title":"能力介绍"},{"url":"#推荐设置","title":"推荐设置"},{"url":"#如何切换","title":"如何切换"},{"url":"#和系统主题保持一致","title":"和系统主题保持一致"},{"url":"#局部暗色亮色模式","title":"局部暗色/亮色模式"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"category\": \"设计协作\",\n  \"title\": \"Dark Mode 暗色模式\",\n  \"icon\": \"doc-darkmode\",\n  \"localeCode\": \"zh-CN\",\n  \"order\": 6\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar Compare = makeShortcode(\"Compare\");\nvar Notice = makeShortcode(\"Notice\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u80FD\\u529B\\u4ECB\\u7ECD\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5927\\u591A\\u6570\\u60C5\\u51B5\\u4E0B\\uFF0C\\u6DF1\\u8272\\u6A21\\u5F0F\\u662F\\u6D45\\u8272\\u6A21\\u5F0F\\u7684\\u8865\\u5145\\u3002\\u9ED8\\u8BA4\\u9009\\u7528\\u503C\\uFF0C\\u66F4\\u591A\\u53D6\\u51B3\\u4E8E\\u7528\\u6237\\u7684\\u5BA1\\u7F8E\\u9009\\u62E9\\u6216\\u4E1A\\u52A1\\u573A\\u666F\\uFF0C\\u7528\\u6237\\u53EF\\u4EE5\\u6839\\u636E\\u81EA\\u5DF1\\u7684\\u9700\\u8981\\u9009\\u62E9\\u4F7F\\u7528\\u54EA\\u4E00\\u4E2A\\u6A21\\u5F0F\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\uD83E\\uDD29 Semi \\u7684\\u9ED8\\u8BA4\\u4E3B\\u9898\\u6216\\u4EFB\\u610F\\u901A\\u8FC7 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/dsm\"\n  }, \"Semi DSM\"), \" \\u914D\\u7F6E\\u7684\\u5B9A\\u5236\\u4E3B\\u9898\\u90FD\\u81EA\\u5E26\\u4E86\\u4EAE\\u8272\\u6A21\\u5F0F\\u4E0E\\u6697\\u8272\\u6A21\\u5F0F\\uFF0C\\u53EF\\u4EE5\\u65B9\\u4FBF\\u5730\\u8FDB\\u884C\\u5207\\u6362\\u3002\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\uD83C\\uDF12 Semi \\u4E5F\\u652F\\u6301\\u5728\\u9875\\u9762\\u7684\\u5C40\\u90E8\\u8303\\u56F4\\u4F7F\\u7528\\u4EAE/\\u6697\\u8272\\u6A21\\u5F0F\\u3002\"), mdx(Compare, {\n    dark: \"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/dsm/dark.png\",\n    light: \"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/dsm/light.png\\n\",\n    mdxType: \"Compare\"\n  })), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u63A8\\u8350\\u8BBE\\u7F6E\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Semi \\u4F1A\\u81EA\\u52A8\\u5728 body \\u5143\\u7D20\\u4E0A\\u6302\\u8F7D\\u5168\\u5C40\\u8272\\u76D8\\uFF0C\\u6211\\u4EEC\\u5185\\u7F6E\\u4E86\\u4E00\\u4E9B\\u5E38\\u7528\\u7684 CSS Token\\uFF0C\\u8BE6\\u7EC6\\u7684 Token \\u8BE6\\u60C5\\u53EF\\u67E5\\u9605 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/basic/tokens\"\n  }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u6211\\u4EEC\\u63A8\\u8350\\u4F60\\u5728 body \\u4E0A\\u914D\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"color\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"background-color\"), \", \\u4F60\\u7684\\u4E1A\\u52A1\\u7EC4\\u4EF6\\u53EF\\u4ECE body \\u81EA\\u52A8\\u7EE7\\u627F\\u83B7\\u5F97\\u9ED8\\u8BA4\\u7684\\u80CC\\u666F\\u8272\\u3001\\u6587\\u672C\\u989C\\u8272\\uFF0C\\u81EA\\u9002\\u5E94\\u4EAE/\\u6697\\u8272\\u5207\\u6362\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \"// css\\nbody {\\n    color: var(--semi-color-text-0);\\n    background-color: var( --semi-color-bg-0);\\n}\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u4F55\\u5207\\u6362\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Semi \\u6697\\u8272\\u6A21\\u5F0F\\u7684\\u5207\\u6362\\u662F\\u901A\\u8FC7\\u7ED9 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"body\"), \" \\u6DFB\\u52A0\\u5C5E\\u6027 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"[theme-mode='dark']\"), \" \\u6765\\u5B9E\\u73B0\\u7684\\uFF08\\u6211\\u4EEC\\u5728 body \\u4E0B\\u540C\\u65F6\\u6302\\u8F7D\\u4E86\\u4E24\\u5957\\u8272\\u76D8\\uFF09\\u3002\\u4F60\\u53EF\\u4EE5\\u4F7F\\u7528\\u4EFB\\u4F55\\u4F60\\u559C\\u6B22\\u7684\\u65B9\\u5F0F\\u6765\\u8FDB\\u884C\\u5207\\u6362\\u3002\\u6BD4\\u5982\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"const body = document.body;\\nif (body.hasAttribute('theme-mode')) {\\n    body.removeAttribute('theme-mode');\\n} else {\\n    body.setAttribute('theme-mode', 'dark');\\n}\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u8FD9\\u91CC\\u4E5F\\u6709\\u4E00\\u4E2A\\uD83C\\uDF30\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Button } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    const switchMode = () => {\\n        const body = document.body;\\n        if (body.hasAttribute('theme-mode')) {\\n            body.removeAttribute('theme-mode');\\n            // \\u4EE5\\u4E0B\\u8FD9\\u884C\\u4EE3\\u7801\\uFF0Cwindow.setMode\\u4EC5\\u7528\\u4E8E\\u5F53\\u901A\\u8FC7\\u672CDemo\\u5207\\u6362\\u65F6\\uFF0C\\u901A\\u77E5Semi\\u5B98\\u7F51Header\\u8BB0\\u5F55\\u66F4\\u65B0\\u5F53\\u524D\\u6A21\\u5F0F\\uFF08\\u53EA\\u7528\\u4E8E\\u6F14\\u793A\\uFF09\\u3002\\u5728\\u60A8\\u7684\\u4EE3\\u7801\\u91CC\\u65E0\\u9700\\u5B58\\u5728\\u3002\\n            window.setMode('light');\\n        } else {\\n            body.setAttribute('theme-mode', 'dark');\\n            window.setMode('dark');\\n        }\\n    };\\n\\n    return (\\n        <Button\\n            onClick={switchMode}\\n        >\\n            Switch Mode\\n        </Button>\\n    );\\n}\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u548C\\u7CFB\\u7EDF\\u4E3B\\u9898\\u4FDD\\u6301\\u4E00\\u81F4\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u679C\\u4F60\\u5E0C\\u671B\\u9875\\u9762\\u7684\\u4EAE\\u8272/\\u6697\\u8272\\u6A21\\u5F0F\\u80FD\\u81EA\\u52A8\\u548C\\u7CFB\\u7EDF\\u4E3B\\u9898\\u4FDD\\u6301\\u4E00\\u81F4\\uFF0C\\u53EF\\u4EE5\\u53C2\\u8003 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme\"\n  }, \"prefers-color-scheme\"), \" \\u5C5E\\u6027\\u3002\\u8BE5\\u5C5E\\u6027\\u76EE\\u524D\\u5904\\u4E8E\\u5B9E\\u9A8C\\u9636\\u6BB5\\uFF0C\\u8BF7\\u7559\\u610F\\u6D4F\\u89C8\\u5668\\u517C\\u5BB9\\u6027 (Chrome >= 76, Safari >= 12.1) \\u53CA\\u672A\\u6765\\u53EF\\u80FD\\u53D1\\u751F\\u7684\\u6539\\u53D8\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"macOS \\u4E0B\\u7684\\u7CFB\\u7EDF\\u4E3B\\u9898\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"\\u7CFB\\u7EDF\\u504F\\u597D\\u8BBE\\u7F6E -> \\u901A\\u7528 -> \\u5916\\u89C2\"), \" \\u6765\\u914D\\u7F6E\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7531\\u4E8E\\u6211\\u4EEC\\u4E0D\\u5EFA\\u8BAE\\u76F4\\u63A5\\u4FEE\\u6539 npm \\u4E3B\\u9898\\u5305\\u7684\\u5185\\u5BB9\\uFF0C\\u4F60\\u53EF\\u4EE5\\u901A\\u8FC7 JS \\u7684\\u65B9\\u5F0F\\u76D1\\u542C\\u8BE5\\u5C5E\\u6027\\u7684\\u53D8\\u5316\\uFF0C\\u8FD9\\u91CC\\u4E5F\\u6709\\u4E00\\u4E2A\\uD83C\\uDF30\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"const mql = window.matchMedia('(prefers-color-scheme: dark)');\\n\\nfunction matchMode(e) {\\n    const body = document.body;\\n    if (e.matches) {\\n        if (!body.hasAttribute('theme-mode')) {\\n            body.setAttribute('theme-mode', 'dark');\\n        }\\n    } else {\\n        if (body.hasAttribute('theme-mode')) {\\n            body.removeAttribute('theme-mode');\\n        }\\n    }\\n}\\n\\nmql.addListener(matchMode);\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u5C40\\u90E8\\u6697\\u8272/\\u4EAE\\u8272\\u6A21\\u5F0F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Semi 2.0 \\u539F\\u751F\\u652F\\u6301\\u5C40\\u90E8\\u6697\\u8272/\\u4EAE\\u8272\\u6A21\\u5F0F\\u3002\\u4F7F\\u7528\\u65F6\\uFF0C\\u5728\\u9876\\u7EA7\\u5143\\u7D20\\u4E0A\\u6DFB\\u52A0 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".semi-always-dark\"), \" \\u6216 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".semi-always-light\"), \" \\u7C7B\\uFF0C\\u8FD9\\u4E2A\\u7C7B\\u4E0B\\u7684\\u7EC4\\u4EF6\\u4F1A\\u4F7F\\u7528\\u5BF9\\u5E94\\u6A21\\u5F0F\\u7684\\u989C\\u8272\\u53D8\\u91CF\\u3002\"), mdx(Notice, {\n    mdxType: \"Notice\"\n  }, \"\\u6CE8\\u610F\\uFF1A\\u7531\\u4E8E\\u5F39\\u51FA\\u5C42\\u9ED8\\u8BA4\\u662F\\u63D2\\u5165\\u5230 body \\u4E2D\\uFF0C\\u5C40\\u90E8\\u6697\\u8272/\\u4EAE\\u8272\\u5BF9\\u5F39\\u51FA\\u5C42\\u5143\\u7D20\\u4E0D\\u751F\\u6548\\u3002\\u82E5\\u4F60\\u5E0C\\u671B\\u5BF9\\u5F39\\u51FA\\u5C42\\u4E5F\\u751F\\u6548\\uFF0C\\u5E94\\u5F53\\u4F7F\\u7528 getPopupContainer \\u5C06\\u5F39\\u51FA\\u5C42\\u63D2\\u5165\\u8282\\u70B9\\u7F6E\\u4E8E\\u4F60\\u6302\\u8F7D `.semi-always-dark` \\u6216 `.semi-always-light`\\u7C7B\\u540D\\u7684\\u5143\\u7D20\\u5185\\u90E8\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" hideInDSM\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"hideInDSM\": true\n  }, \"import React from 'react';\\nimport { Layout, Nav, Button, Breadcrumb, Avatar, Steps, Pagination, Row, Badge, Tag, Rating, Tooltip, Timeline, Popover } from '@douyinfe/semi-ui';\\nimport { IconSemiLogo, IconCamera, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, IconLive, IconSetting, IconEdit, IconList } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const { Header, Footer, Sider, Content } = Layout;\\n    const [mode, setMode] = useState('semi-always-dark');\\n\\n    const switchMode = () => {\\n        const newMode = mode === 'semi-always-dark' ? 'semi-always-light' : 'semi-always-dark';\\n        setMode(newMode);\\n    };\\n\\n    const rowStyle = { margin: '16px 10px' };\\n    const badgeStyle = {\\n        width: '42px',\\n        height: '42px',\\n        borderRadius: '4px',\\n        display: 'inline-block',\\n    };\\n    const tagStyle = { marginRight: 8, marginBottom: 8 };\\n\\n    return (\\n        <>\\n            <Button\\n                onClick={switchMode}\\n                style={{ marginBottom: 4 }}\\n            >\\n                Switch Content Mode\\n            </Button>\\n            <Layout style={{ border: '1px solid var(--semi-color-border)' }}>\\n                <Header style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>\\n                    <div>\\n                        <Nav mode=\\\"horizontal\\\" defaultSelectedKeys={['Home']}>\\n                            <Nav.Header>\\n                                <IconSemiLogo style={{ width: '96px', height: '36px', fontSize: 36 }} />\\n                            </Nav.Header>\\n                            <span\\n                                style={{\\n                                    color: 'var(--semi-color-text-2)',\\n                                }}\\n                            >\\n                                <span\\n                                    style={{\\n                                        marginRight: '24px',\\n                                        color: 'var(--semi-color-text-0)',\\n                                        fontWeight: '600',\\n                                    }}\\n                                >\\n                                    \\u6A21\\u7248\\u63A8\\u8350\\n                                </span>\\n                                <span style={{ marginRight: '24px' }}>\\u6240\\u6709\\u6A21\\u7248</span>\\n                                <span>\\u6211\\u7684\\u6A21\\u7248</span>\\n                            </span>\\n                            <Nav.Footer>\\n                                <Button\\n                                    theme=\\\"borderless\\\"\\n                                    icon={<IconBell size=\\\"large\\\" />}\\n                                    style={{\\n                                        color: 'var(--semi-color-text-2)',\\n                                        marginRight: '12px',\\n                                    }}\\n                                />\\n                                <Button\\n                                    theme=\\\"borderless\\\"\\n                                    icon={<IconHelpCircle size=\\\"large\\\" />}\\n                                    style={{\\n                                        color: 'var(--semi-color-text-2)',\\n                                        marginRight: '12px',\\n                                    }}\\n                                />\\n                                <Avatar color=\\\"orange\\\" size=\\\"small\\\">\\n                                    YJ\\n                                </Avatar>\\n                            </Nav.Footer>\\n                        </Nav>\\n                    </div>\\n                </Header>\\n                <Layout>\\n                    <Sider style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>\\n                        <Nav\\n                            style={{ maxWidth: 220, height: '100%' }}\\n                            defaultSelectedKeys={['Home']}\\n                            items={[\\n                                { itemKey: 'Home', text: '\\u9996\\u9875', icon: <IconHome size=\\\"large\\\" /> },\\n                                { itemKey: 'Histogram', text: '\\u57FA\\u7840\\u6570\\u636E', icon: <IconHistogram size=\\\"large\\\" /> },\\n                                { itemKey: 'Live', text: '\\u6D4B\\u8BD5\\u529F\\u80FD', icon: <IconLive size=\\\"large\\\" /> },\\n                                { itemKey: 'Setting', text: '\\u8BBE\\u7F6E', icon: <IconSetting size=\\\"large\\\" /> },\\n                            ]}\\n                            footer={{\\n                                collapseButton: true,\\n                            }}\\n                        />\\n                    </Sider>\\n                    <Content\\n                        className={mode}\\n                        style={{\\n                            padding: '24px',\\n                            backgroundColor: 'var(--semi-color-bg-1)',\\n                        }}\\n                    >\\n                        <Breadcrumb\\n                            style={{\\n                                marginBottom: '24px',\\n                            }}\\n                            routes={['\\u9996\\u9875', '\\u5F53\\u8FD9\\u4E2A\\u9875\\u9762\\u6807\\u9898\\u5F88\\u957F\\u65F6\\u9700\\u8981\\u7701\\u7565', '\\u4E0A\\u4E00\\u9875', '\\u8BE6\\u60C5\\u9875']}\\n                        />\\n                        <div\\n                            style={{\\n                                borderRadius: '10px',\\n                                border: '1px solid var(--semi-color-border)',\\n                                height: '700px',\\n                                padding: '32px'\\n                            }}\\n                        >\\n                            <Row style={rowStyle}>\\n                                <div id='popup-layer'></div>\\n                                <Nav\\n                                    mode={'horizontal'}\\n                                    getPopupContainer={() => document.querySelector('#popup-layer')}\\n                                    items={[\\n                                        { itemKey: 'user', text: 'Option1', icon: <IconEdit /> },\\n                                        { itemKey: 'union', text: 'Option2', icon: <IconCamera /> },\\n                                        {\\n                                            itemKey: 'approve-management',\\n                                            text: 'Group3',\\n                                            icon: <IconList />,\\n                                            items: [\\n                                                '3-1',\\n                                                '3-2'\\n                                            ]\\n                                        },\\n                                    ]}\\n                                />\\n                                <br /><br />\\n                                <Pagination total={80} showSizeChanger></Pagination>\\n                                <br />\\n                                <Steps current={1}>\\n                                    <Steps.Step title=\\\"Finished\\\" description=\\\"This is a description.\\\" />\\n                                    <Steps.Step title=\\\"In Progress\\\" description=\\\"This is a description.\\\" />\\n                                    <Steps.Step title=\\\"Waiting\\\" description=\\\"This is a description.\\\" />\\n                                </Steps>\\n                                <br />\\n                                <Steps current={1} status=\\\"error\\\">\\n                                    <Steps.Step title=\\\"Finished\\\" description=\\\"This is a description\\\" />\\n                                    <Steps.Step title=\\\"In Process\\\" description=\\\"This is a description\\\" />\\n                                    <Steps.Step title=\\\"Waiting\\\" description=\\\"This is a description\\\" />\\n                                </Steps>\\n                            </Row>\\n                            <Row style={rowStyle}>\\n                                <div style={{ display: 'flex' }}>\\n                                    <div style={{ padding: 8 }}>\\n                                        <Badge count={5} theme='solid' >\\n                                            <Avatar color='blue' shape='square' style={badgeStyle}>XZ</Avatar>\\n                                        </Badge>\\n                                    </div>\\n                                    <div style={{ padding: 8 }}>\\n                                        <Badge count={5} theme='light' >\\n                                            <Avatar color='cyan' shape='square' style={badgeStyle}>YB</Avatar>\\n                                        </Badge>\\n                                    </div>\\n                                    <div style={{ padding: 8 }}>\\n                                        <Badge count={5} theme='inverted'>\\n                                            <Avatar color='indigo' shape='square' style={badgeStyle}>LX</Avatar>\\n                                        </Badge>\\n                                    </div>\\n                                    <div style={{ padding: 8 }}>\\n                                        <Badge dot theme='solid' >\\n                                            <Avatar color='light-blue' shape='square' style={badgeStyle}>YZ</Avatar>\\n                                        </Badge>\\n                                    </div>\\n                                    <div style={{ padding: 8 }}>\\n                                        <Badge dot theme='light' >\\n                                            <Avatar color='teal' shape='square' style={badgeStyle}>HW</Avatar>\\n                                        </Badge>\\n                                    </div>\\n                                    <div style={{ padding: '8px', borderRadius: '4px', backgroundColor: 'var(--semi-color-fill-0)' }}>\\n                                        <Badge dot theme='inverted'>\\n                                            <Avatar color='green' shape='square' style={badgeStyle}>XM</Avatar>\\n                                        </Badge>\\n                                    </div>\\n                                </div>\\n                                <br />\\n                                <div>\\n                                    <Tag color='grey' style={tagStyle}> grey tag </Tag>\\n                                    <Tag color='blue' style={tagStyle}> blue tag </Tag>\\n                                    <Tag color='blue' type='ghost' style={tagStyle}> ghost tag </Tag>\\n                                    <Tag color='blue' type='solid' style={tagStyle}> solid tag </Tag>\\n                                    <Tag color='red' style={tagStyle}> red tag </Tag>\\n                                    <Tag color='green' style={tagStyle}> green tag </Tag>\\n                                    <Tag color='orange' style={tagStyle}> orange tag </Tag>\\n                                    <Tag color='teal' style={tagStyle}> teal tag </Tag>\\n                                    <Tag color='violet' style={tagStyle}> violet tag </Tag>\\n                                    <Tag color='white' style={tagStyle}> white tag </Tag>\\n                                </div>\\n                                <br />\\n                                <div style={{ display: 'flex', alignItems: 'center' }}>\\n                                    <Popover content={'hi semi-design'} style={{ padding: 8 }}><Tag style={{ marginRight: 8 }}>I am Popover</Tag></Popover>\\n                                    <Tooltip content={'hi semi-design'}>\\n                                        <Tag style={{ marginRight: 8 }}>I am Tooltip</Tag>\\n                                    </Tooltip>\\n                                    <Rating defaultValue={3} size='small' style={{ marginRight: 8 }} />\\n                                </div>\\n                                <br />\\n                                <Timeline>\\n                                    <Timeline.Item time='2019-07-14 10:35' type='ongoing'>\\u5BA1\\u6838\\u4E2D</Timeline.Item>\\n                                    <Timeline.Item time='2019-06-13 16:17' type='success'>\\u53D1\\u5E03\\u6210\\u529F</Timeline.Item>\\n                                    <Timeline.Item time='2019-05-14 18:34' type='error'>\\u5BA1\\u6838\\u5931\\u8D25</Timeline.Item>\\n                                </Timeline>\\n                            </Row>\\n                        </div>\\n                    </Content>\\n                </Layout>\\n                <Footer\\n                    style={{\\n                        display: 'flex',\\n                        justifyContent: 'space-between',\\n                        padding: '20px',\\n                        color: 'var(--semi-color-text-2)',\\n                        backgroundColor: 'rgba(var(--semi-grey-0), 1)',\\n                    }}\\n                >\\n                    <span\\n                        style={{\\n                            display: 'flex',\\n                            alignItems: 'center',\\n                        }}\\n                    >\\n                        <IconBytedanceLogo size=\\\"large\\\" style={{ marginRight: '8px' }} />\\n                        <span>Copyright \\xA9 2019 ByteDance. All Rights Reserved. </span>\\n                    </span>\\n                    <span>\\n                        <span style={{ marginRight: '24px' }}>\\u5E73\\u53F0\\u5BA2\\u670D</span>\\n                        <span>\\u53CD\\u9988\\u5EFA\\u8BAE</span>\\n                    </span>\\n                </Footer>\\n            </Layout>\\n        </>\\n    );\\n};\\n\\n\"))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/advanced/dark-mode","next":{"fields":{"slug":"en-US/experience/accessibility"},"id":"15717e21-7784-50c9-ad96-f0173165d77e","frontmatter":{"title":"Accessibility","localeCode":"en-US","icon":"doc-a11y","showNew":null}},"previous":{"fields":{"slug":"en-US/advanced/dark-mode"},"id":"c6c9b34c-22f2-5e93-a7d8-3accd7202aab","frontmatter":{"title":"Dark Mode","localeCode":"en-US","icon":"doc-darkmode","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}