提供主题文档 与 组件主题变量替换

example/docs/zh-CN/components/color.md

@@ -58,7 +58,7 @@ export default {
 ::: title 次色调
 :::
 
-::: demo 事实上，layui 并非不敢去尝试一些亮丽的颜色，但许多情况下一个它可能并不是那么合适，所以我们把这些颜色归为“场景色”，即按照实际场景来呈现对应的颜色，比如你想给人以警觉感，可以尝试用上面的红色。他们一般会出现在 layui 的按钮、提示和修饰性元素，以及一些侧边元素上。
+::: demo 事实上，layui 并非不敢去尝试一些亮丽的颜色，但许多情况下一个它可能并不是那么合适，所以我们把这些颜色归为“场景色”，即按照实际场景来呈现对应的颜色，比如你想给人以警觉感，可以尝试用上面的红色。
 
 <template>
 <ul class="layui-row layui-col-space15">

example/docs/zh-CN/guide/theme.md

@@ -1,2 +1,30 @@
-::: title 定义主题
+::: title 定制主题
+:::
+
+::: describe Layui 设计规范上支持一定程度的样式定制，以满足业务和品牌上多样化的视觉需求，包括但不限于主色、圆角、边框和部分组件的视觉定制。
+:::
+
+::: describe 以下是一些最常用的通用变量，所有样式变量可以在 这里 找到。
+:::
+
+```css
+@global-primary-color: #009688; // 主题色
+@global-checked-color: #5FB878; // 选中色
+@global-border-radius: 2px; // 圆角度数
+```
+::: describe 如果以上变量不能满足你的定制需求，可以给我们提 issue。
+:::
+
+::: title 定制方式
+:::
+
+::: describe 建立一个单独的 less 变量文件，引入这个文件覆盖 index.less 里的变量。
+:::
+
+```css
+@import '@layui/layui-vue/lib/index.less'; // 引入官方提供的 less 样式入口文件
+@import 'your-theme-file.less'; // 用于覆盖上面定义的变量
+```
+
+::: describe 注意，这种方式已经载入了所有组件的样式，不需要也无法和按需加载插件 babel-plugin-import 的 style 属性一起使用。
 :::

example/src/assets/css/code.css

@@ -31,7 +31,7 @@ li > div[class*='language-'] {
 
 @media (min-width: 420px) {
   div[class*='language-'] {
-    margin: 1rem 0;
+    margin: 1rem 1.8rem;
     border-radius: 6px;
   }
 
@@ -39,6 +39,12 @@ li > div[class*='language-'] {
     margin: 1rem 0 1rem 0rem;
     border-radius: 6px;
   }
+
+  .lay-code div[class*='language-'] {
+    margin: 1rem 0.8rem;
+    margin: 0.5rem 0.8rem 1rem 0.8rem;
+    border-radius: 6px;
+  }
 }
 
 [class*='language-'] pre,

example/src/view/guide.vue

@@ -86,6 +86,12 @@ export default {
             subTitle: 'change',
             path: '/zh-CN/guide/changelog',
           },
+          {
+            id: 3,
+            title: '主题',
+            subTitle: 'theme',
+            path: '/zh-CN/guide/theme',
+          },
           {
             id: 4,
             title: '问题',