{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/advanced/customize-theme","result":{"data":{"current":{"frontmatter":{"title":"Customized Themes 定制主题","order":4,"brief":null,"icon":"doc-theme"},"fields":{"type":"advanced"},"tableOfContents":{"items":[{"url":"#定制方式","title":"定制方式","items":[{"url":"#创造主题","title":"创造主题"}]},{"url":"#接入主题","title":"接入主题","items":[{"url":"#使用-webpack-作为构建工具时","title":"使用 Webpack 作为构建工具时"},{"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\": \"Customized Themes 定制主题\",\n  \"icon\": \"doc-theme\",\n  \"localeCode\": \"zh-CN\",\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  }, \"\\u5B9A\\u5236\\u65B9\\u5F0F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Semi \\u63D0\\u4F9B\\u5B8C\\u6574\\u7684\\u4E3B\\u9898\\u914D\\u7F6E\\u6D41\\u7A0B\\uFF0C\\u65E2\\u4FDD\\u6301\\u989C\\u8272\\u3001\\u5B57\\u4F53\\u3001\\u5706\\u89D2\\u3001\\u9634\\u5F71\\u3001\\u5E03\\u5C40\\u7B49\\u5728\\u89C6\\u89C9\\u8BED\\u8A00\\u4E0A\\u7684\\u7EDF\\u4E00\\u8FDE\\u8D2F\\uFF0C\\u53C8\\u80FD\\u6EE1\\u8DB3\\u4E1A\\u52A1\\u548C\\u54C1\\u724C\\u591A\\u6837\\u5316\\u7684\\u89C6\\u89C9\\u9700\\u6C42\\u3002\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u4F60\\u53EF\\u4EE5\\u524D\\u5F80 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://semi.design/dsm/\"\n  }, \"Semi \\u8BBE\\u8BA1\\u7CFB\\u7EDF\\u7BA1\\u7406\\u7AD9\\u70B9\"), \" \\uFF08\\u53C8\\u79F0DSM\\uFF09 \\u9009\\u62E9\\u6216\\u8005\\u521B\\u9020\\u4E00\\u5957\\u7B26\\u5408\\u4F60\\u7684\\u9700\\u6C42\\u7684\\u4E3B\\u9898\\u98CE\\u683C\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u76EE\\u524DDSM\\u652F\\u6301\\u5168\\u5C40\\u3001\\u7EC4\\u4EF6\\u7EA7\\u522B\\u7684\\u6837\\u5F0F\\u5B9A\\u5236\\uFF0C\\u5E76\\u5728 Figma \\u548C\\u7EBF\\u4E0A\\u4EE3\\u7801\\u4E4B\\u95F4\\u4FDD\\u6301\\u540C\\u6B65\\u3002\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u4F7F\\u7528 DSM\\uFF0C\\u5C06 Semi Design \\u9002\\u914D\\u4E3A Any Design\")), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\uD83C\\uDFA8 \\u5168\\u5C40\\u6837\\u5F0F \\u53D8\\u91CF\\u7BA1\\u7406\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u652F\\u6301\\u8272\\u76D8\\u3001\\u5706\\u89D2\\u3001\\u5B57\\u4F53\\u6392\\u7248\\u3001\\u63CF\\u8FB9\\u3001\\u9634\\u5F71\\u7684\\u53EF\\u89C6\\u5316\\u7F16\\u8F91\\u9884\\u89C8  \")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\uD83D\\uDD01 \\u8BBE\\u8BA1\\u53D8\\u91CF\\u53CC\\u5411\\u540C\\u6B65\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u8BBE\\u8BA1\\u53D8\\u91CF\\u53EF\\u4EE5\\u5728 Web \\u7AEF\\u4E0E Figma \\u63D2\\u4EF6\\u4FA7\\u53CC\\u5411\\u5B9E\\u65F6\\u540C\\u6B65\\u3002  \")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\uD83E\\uDDE9 \\u6DF1\\u5EA6\\u7684\\u7EC4\\u4EF6\\u6837\\u5F0F\\u5B9A\\u5236\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u5BF9\\u5355\\u4E2A\\u7EC4\\u4EF6\\u7684\\u6837\\u5F0F\\u8FDB\\u884C\\u6DF1\\u5EA6\\u5B9A\\u5236\\uFF0C\\u4F8B\\u5982\\u7EC4\\u4EF6\\u7684 \\u9AD8\\u5EA6 / \\u95F4\\u8DDD\\u7B49\\u6837\\u5F0F\\u5B9A\\u5236\\uFF1B  \"))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u521B\\u9020\\u4E3B\\u9898\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F60\\u4E5F\\u53EF\\u4EE5\\u4ECE\\u5DF2\\u53D1\\u5E03\\u7684\\u4E3B\\u9898\\u51FA\\u53D1\\uFF0C\\u6216\\u8005\\u9009\\u62E9 \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u7ACB\\u5373\\u521B\\u9020\"), \" \\u6765\\u521B\\u9020\\u4E00\\u4E2A\\u65B0\\u7684\\u4E3B\\u9898\\uFF0C\\u4E5F\\u53EF\\u4EE5\\u66F4\\u65B0\\u5DF2\\u53D1\\u5E03\\u7684\\u4E3B\\u9898\\u3002\\u9009\\u53D6\\u4E3B\\u8272\\u540E\\uFF0C\\u6211\\u4EEC\\u7684\\u989C\\u8272\\u7B97\\u6CD5\\u4F1A\\u4E3A\\u4F60\\u751F\\u6210\\u4E00\\u5957\\u9AD8\\u53EF\\u7528\\u7684\\u8272\\u76D8\\u3002\\u5728\\u6B64\\u57FA\\u7840\\u4E0A\\u4F60\\u53EF\\u4EE5\\u4FEE\\u6539\\u901A\\u7528\\u53D8\\u91CF\\u5E76\\u4EA7\\u51FA\\u5BF9\\u5E94\\u7684\\u4E3B\\u9898\\u5305\\u3002\\u4E00\\u952E\\u53D1\\u5E03\\u5373\\u53EF\\u63A8\\u9001\\u5230 npm \\u4E2D\\u3002\"), 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\": \"主题创建\"\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\": \"主题编辑\"\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\": \"基础色调整\"\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\": \"色盘调整\"\n  }))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u63A5\\u5165\\u4E3B\\u9898\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u521B\\u5EFA\\u5B8C\\u6210\\u4E3B\\u9898\\u4E0B\\u8F7D\\u540E\\uFF0C\\u4F7F\\u7528 Semi \\u63D2\\u4EF6\\u53EF\\u4EE5\\u5FEB\\u901F\\u5730\\u63A5\\u5165\\u9009\\u62E9\\u7684\\u4E3B\\u9898\\u3002\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528 Webpack \\u4F5C\\u4E3A\\u6784\\u5EFA\\u5DE5\\u5177\\u65F6\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5BF9\\u4E8E\\u4F7F\\u7528 Webpack \\u7684\\u7528\\u6237\\uFF0C\\u5728 SemiWebpackPlugin \\u52A0\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"theme\"), \" \\u53C2\\u6570\\u5373\\u53EF\\u3002\"), 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: {\\n        name: '\\u4F60\\u7684\\u4E3B\\u9898npm\\u5305\\u540D\\u79F0'\\n    }\\n    /* ...options */\\n});\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u66F4\\u591A\\u5DE5\\u7A0B\\u5316\\u65B9\\u6848\\uFF08\\u5982Vite\\u3001NextJs\\uFF09\\u7684\\u4E3B\\u9898\\u63A5\\u5165\\uFF0C\\u53EF\\u53C2\\u8003 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://semi.design/dsm_manual/zh-CN/web/use#dsm_%E5%A6%82%E4%BD%95%E6%B6%88%E8%B4%B9%E4%B8%BB%E9%A2%98\"\n  }, \"DSM \\u6587\\u6863\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7EC4\\u4EF6\\u7EA7\\u53D8\\u91CF\\u7684\\u6539\\u52A8\\u751F\\u6548\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u679C\\u5728\\u5B9A\\u5236\\u4E3B\\u9898\\u7684\\u8FC7\\u7A0B\\u4E2D\\u4F60\\u4FEE\\u6539\\u4E86\\u7EC4\\u4EF6\\u7EA7\\u522B\\u7684\\u53D8\\u91CF\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"theme\"), \" \\u5B57\\u6BB5\\u9700\\u8981\\u7528\\u5982\\u4E0B\\u914D\\u7F6E\\u4F7F\\u6539\\u52A8\\u751F\\u6548\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"{\\n    theme: {\\n        name: '\\u4F60\\u7684\\u4E3B\\u9898npm\\u5305\\u540D\\u79F0',\\n        include: '~\\u4F60\\u7684\\u4E3B\\u9898npm\\u5305\\u540D\\u79F0/scss/local.scss'\\n    }\\n}\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u66F4\\u65B0\\u4E3B\\u9898\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Semi \\u5728\\u5F00\\u53D1\\u8FC7\\u7A0B\\u4E2D\\uFF0C\\u6709\\u53EF\\u80FD\\u51FA\\u4E8E\\u8BBE\\u8BA1\\u8003\\u8651\\u66F4\\u65B0\\u6216\\u8005\\u6DFB\\u52A0\\u90E8\\u5206\\u901A\\u7528\\u53D8\\u91CF\\u3002\\u5982\\u679C\\u4F60\\u4F7F\\u7528\\u7684\\u662F\\u5B9A\\u5236\\u4E3B\\u9898\\uFF0C\\u5F53 Semi \\u53D1\\u5E03\\u4E86\\u65B0\\u7684\\u901A\\u7528\\u53D8\\u91CF\\u540E\\uFF08\\u6211\\u4EEC\\u4F1A\\u5728\\u66F4\\u65B0\\u65E5\\u5FD7\\u91CC\\u6807\\u6CE8\\uFF09\\uFF0C\\u6211\\u4EEC\\u5EFA\\u8BAE\\u4F60\\u524D\\u5F80 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://semi.design/dsm/\"\n  }, \"Semi DSM\"), \" \\u66F4\\u65B0\\u8BE5\\u4E3B\\u9898\\uFF08\\u5927\\u90E8\\u5206\\u60C5\\u51B5\\u4E0B\\u4EC5\\u9700\\u91CD\\u65B0\\u6267\\u884C\\u4E00\\u6B21\\u53D1\\u5E03\\u64CD\\u4F5C\\u5373\\u53EF\\uFF09\")));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/advanced/customize-theme","next":{"fields":{"slug":"en-US/advanced/design-to-code"},"id":"c279ca11-8576-5e2b-9d17-f690d6a007b8","frontmatter":{"title":"Design to Code","localeCode":"en-US","icon":"doc-code","showNew":null}},"previous":{"fields":{"slug":"en-US/advanced/customize-theme"},"id":"e7a25faf-d186-5600-85ed-0723ab8391b7","frontmatter":{"title":"Customized Themes","localeCode":"en-US","icon":"doc-theme","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}