{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/advanced/customize-theme","result":{"data":{"current":{"frontmatter":{"title":"Customized Themes","order":4,"brief":null,"icon":"doc-theme"},"fields":{"type":"advanced"},"tableOfContents":{"items":[{"url":"#build-your-own-design-system","title":"Build your own design system","items":[{"url":"#create-a-theme","title":"Create a theme"}]},{"url":"#access-topic","title":"Access topic","items":[{"url":"#when-using-webpack-as-a-build-tool","title":"When using webpack as a build tool"},{"url":"#make-changes-to-component-level-variables-take-effect","title":"Make changes to component-level variables take effect"}]},{"url":"#update-theme","title":"Update theme"}]},"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\": \"Customized Themes\",\n  \"icon\": \"doc-theme\",\n  \"localeCode\": \"en-US\",\n  \"order\": 4\n};\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  }, \"Build your own design system\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Semi provides a complete theme configuration process, which not only maintains the uniformity and coherence of colors, fonts, rounded corners, shadows, layouts, etc. in the visual language, but also meets the diversified visual needs of the business and the brand.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"You can go to \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://semi.design/dsm/\"\n  }, \"Semi Design System Management Site\"), \" (also known as DSM) to choose or create a theme style that meets your needs.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Currently DSM supports global and component-level style customization, and keeps synchronization between Figma and online code. \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Use DSM to adapt Semi Design to Any Design\")), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\uD83C\\uDFA8 Global style variable management\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"Supports visual editing and previewing of color wheels, rounded corners, font layout, strokes, and shadows\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\uD83D\\uDD01 Two-way synchronization of design variables\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"Design variables can be synchronized in real time in both directions on the Web side and the Figma plug-in side.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\uD83E\\uDDE9 In-depth component style customization\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"In-depth customization of the style of a single component, such as the style customization of the height/spacing of the component.\"))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Create a theme\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can also start from a published theme, or choose \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Create Now\"), \" to create a new theme, or you can update a published theme. After selecting the main color, our color algorithm will generate a set of highly available color wheels for you. On this basis, you can modify common variables and produce corresponding theme packages. One-click publishing can be pushed to npm.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"https://lf9-static.bytednsdoc.com/obj/eden-cn/nuhpxphk/dsm/dsm_welcome.png\",\n    \"alt\": \"Theme Creation\"\n  })), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"https://lf9-static.bytednsdoc.com/obj/eden-cn/nuhpxphk/dsm/dsm_console.png\",\n    \"alt\": \"Theme Edit\"\n  })), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"https://lf9-static.bytednsdoc.com/obj/eden-cn/nuhpxphk/dsm/dsm_palette.png\",\n    \"alt\": \"Basic color adjustment\"\n  })), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"https://lf9-static.bytednsdoc.com/obj/eden-cn/nuhpxphk/dsm/dsm_usage.png\",\n    \"alt\": \"Color wheel adjustment\"\n  }))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Access topic\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"After the theme is created and downloaded, the Semi plug-in can be used to quickly access the selected theme.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You need to specify the theme to be used in the configuration file.\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"When using webpack as a build tool\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"For users who use webpack, add the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"theme\"), \" parameter to SemiWebpackPlugin.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"SemiWebpackPlugin \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"yarn add -D @douyinfe/semi-webpack-plugin\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"npm i -D @douyinfe/semi-webpack-plugin\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"new SemiWebpackPlugin({\\n    theme: `Your theme npm package name`,\\n    /* ...options */\\n});\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Make changes to component-level variables take effect\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"If you modify the component-level variables in the process of customizing the theme, the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"theme\"), \" field needs to be configured with the following configuration to make the changes take effect:\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"{\\n    theme: {\\n        name:'Your theme npm package name',\\n        include:'~Your theme npm package name/scss/local.scss'\\n    }\\n}\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Update theme\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"During the development of Semi, it is possible to update or add some common variables for design considerations. If you are using a customized theme, when Semi has released a new universal variable (we will mark it in the update log), we recommend that you go to \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://semi.design/dsm/\"\n  }, \"DSM\"), \" to regenerate the theme.\")));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/advanced/customize-theme","next":{"fields":{"slug":"zh-CN/advanced/customize-theme"},"id":"b92b0f74-3277-56cb-9ea9-8077f5d8f121","frontmatter":{"title":"Customized Themes 定制主题","localeCode":"zh-CN","icon":"doc-theme","showNew":null}},"previous":{"fields":{"slug":"zh-CN/ecosystem/react19"},"id":"23213262-3b95-5e10-9ded-f3ff58c528d6","frontmatter":{"title":"React 19 适配","localeCode":"zh-CN","icon":"doc-configprovider","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}