{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/advanced/dark-mode","result":{"data":{"current":{"frontmatter":{"title":"Dark Mode","order":6,"brief":null,"icon":"doc-darkmode"},"fields":{"type":"advanced"},"tableOfContents":{"items":[{"url":"#dark-mode","title":"Dark mode"},{"url":"#recommended-settings","title":"Recommended settings"},{"url":"#how-to-switch","title":"How to switch"},{"url":"#keep-consistency-with-system-theme","title":"Keep Consistency with System Theme"},{"url":"#block-darklight-mode","title":"Block Dark/Light Mode"}]},"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\": \"Design Collaboration\",\n \"title\": \"Dark Mode\",\n \"subTitle\": \"Dark Mode\",\n \"icon\": \"doc-darkmode\",\n \"localeCode\": \"en-US\",\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 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 }, \"Dark mode\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\uD83E\\uDD29 Semi's default theme or custom themes configured through \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/dsm\"\n }, \"Semi DSM\"), \" come with both light and dark modes, which can be easily switched.\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"\\uD83C\\uDF12 Semi also supports the use of dark mode in a partial area of the page. \"), 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 }, \"Recommended settings\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Semi will automatically mount the global color palette on the body element. We have built in some commonly used CSS Tokens. For detailed Token details, please refer to \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/en-US/basic/tokens\"\n }, \"Design Variables\"), \"\\nWe recommend that you configure \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"color\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"background-color\"), \" on the body, your business components can automatically inherit the default background color and text color from the body, and adaptive light/dark color switching\"), 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 }, \"How to switch\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"To use Dark Mode, you could simply add \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"[theme-mode='dark']\"), \" to \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"body\"), \" in any way you prefer. Here is a quick idea:\"), 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 }, \"For instance:\"), 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 // Notify our site to update current mode\\n window.setMode('light');\\n } else {\\n body.setAttribute('theme-mode', 'dark');\\n // Notify our site to update current mode\\n window.setMode('dark');\\n }\\n };\\n\\n return (\\n \\n Switch Mode\\n \\n );\\n}\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Keep Consistency with System Theme\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"If you want the mode of the site to change with the system setting, you may find this property \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme\"\n }, \"Prefers-color-scheme\\n\"), \" helpful. Please pay attention that this property is experimental. It asks for browser compatibility (Chrome >= 76, Safari >= 12.1) and you may expect behavior to change in the future.\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"To change system setting in macOS, go to System Preferences -> General -> Appearance\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Since we do not recommend modifying the content of the npm theme package directly, you could add a listener for this property using js. Here is another example:\"), 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 }, \"Block Dark/Light Mode\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Semi 2.0 natively supports block dark/bright color mode, and you can add \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \".semi-always-dark\"), \" or \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \".semi-always-light\"), \" to areas that require block dark or bright colors as needed.\"), mdx(\"blockquote\", {\n parentName: \"section\"\n }, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"Note: this is not work for pop-up layers or components\")), 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 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 \\n Switch Content Mode\\n \\n \\n
\\n
\\n \\n
\\n
\\n \\n \\n },\\n { itemKey: 'Histogram', text: 'Histogram', icon: },\\n { itemKey: 'Live', text: 'Live', icon: },\\n { itemKey: 'Setting', text: 'Setting', icon: },\\n ]}\\n footer={{\\n collapseButton: true,\\n }}\\n />\\n \\n \\n \\n \\n \\n \\n document.querySelector('#popup-layer')}\\n items={[\\n { itemKey: 'user', text: 'Option1', icon: },\\n { itemKey: 'union', text: 'Option2', icon: },\\n {\\n itemKey: 'approve-management',\\n text: 'Group3',\\n icon: ,\\n items: [\\n '3-1',\\n '3-2'\\n ]\\n },\\n ]}\\n />\\n

\\n \\n
\\n \\n \\n \\n \\n \\n
\\n \\n \\n \\n \\n \\n \\n \\n
\\n
\\n \\n XZ\\n \\n
\\n
\\n \\n YB\\n \\n
\\n
\\n \\n LX\\n \\n
\\n
\\n \\n YZ\\n \\n
\\n
\\n \\n HW\\n \\n
\\n
\\n \\n XM\\n \\n
\\n
\\n
\\n
\\n grey tag \\n blue tag \\n ghost tag \\n solid tag \\n red tag \\n green tag \\n orange tag \\n teal tag \\n violet tag \\n white tag \\n
\\n
\\n
\\n I am Popover\\n \\n I am Tooltip\\n \\n \\n
\\n
\\n \\n \\u5BA1\\u6838\\u4E2D\\n \\u53D1\\u5E03\\u6210\\u529F\\n \\u5BA1\\u6838\\u5931\\u8D25\\n \\n \\n \\n \\n \\n \\n \\n \\n Copyright \\xA9 2019 ByteDance. All Rights Reserved. \\n \\n \\n Customer Service\\n Feedback\\n \\n \\n \\n \\n );\\n};\\n\"))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/advanced/dark-mode","next":{"fields":{"slug":"zh-CN/advanced/dark-mode"},"id":"f56b2ab8-74fb-532a-96d6-16ef5699d19a","frontmatter":{"title":"Dark Mode 暗色模式","localeCode":"zh-CN","icon":"doc-darkmode","showNew":null}},"previous":{"fields":{"slug":"zh-CN/advanced/design-to-code"},"id":"f9514cab-40f2-56ff-ba31-3950b7ad3124","frontmatter":{"title":"Design to Code 设计稿转代码","localeCode":"zh-CN","icon":"doc-code","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}