feat: 主题支持次色可配置

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

@@ -111,7 +111,7 @@ export default {
 <template>
 <ul class="layui-row site-doc-color site-doc-necolor">
       <li class="layui-col-md12">
-        <div style="background-color: #FAFAFA;">
+        <div style="background-color: @global-neutral-color-1;">
           <p>#FAFAFA</p><p>
         </p></div>
       </li>

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

@@ -24,7 +24,30 @@ const themeVariable = {
 ```
 --global-primary-color: #009688;
 
+--global-normal-color: #1e9fff;
+
+--global-warm-color: #ffb800;
+
+--global-danger-color: #ff5722;
+
 --global-checked-color: #5fb878;
 
 --global-border-radius: 2px;
+
+--global-neutral-color-1: #FAFAFA;
+
+--global-neutral-color-2: #F6F6F6;
+  
+--global-neutral-color-3: #eeeeee;
+  
+--global-neutral-color-4: #e2e2e2;
+  
+--global-neutral-color-5: #dddddd;
+  
+--global-neutral-color-6: #d2d2d2;
+  
+--global-neutral-color-7: #cccccc;
+  
+--global-neutral-color-8: #c2c2c2;
+
 ```

example/src/components/LaySearch.vue

@@ -41,7 +41,7 @@
 <script setup name="LaySelect" lang="ts">
 import { ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { Recordable } from '../../../src/module/type'
+import { Recordable } from '../../../src/types'
 
 const props = defineProps<{
   datas?: Recordable[]

example/src/layouts/Layout.vue

@@ -59,13 +59,21 @@
                 ></lay-icon>
               </a>
               <template #content>
-                <div style="width: 400px; padding:0px 10px 10px 10px;">
+                <div style="width: 380px; padding:0px 10px 10px 10px;">
                   <lay-color-picker v-model="themeVariable['--global-primary-color']"></lay-color-picker>&nbsp;
                   <lay-color-picker v-model="themeVariable['--global-normal-color']"></lay-color-picker>&nbsp;
                   <lay-color-picker v-model="themeVariable['--global-warm-color']"></lay-color-picker>&nbsp;
                   <lay-color-picker v-model="themeVariable['--global-danger-color']"></lay-color-picker>&nbsp;
                   <lay-color-picker v-model="themeVariable['--global-checked-color']"></lay-color-picker>&nbsp;
-                  <lay-input style="display:inline-block;width:150px;" v-model="themeVariable['--global-border-radius']"></lay-input>
+                  <lay-input v-model="themeVariable['--global-border-radius']" style="display:inline-block;width:130px;"></lay-input>
+                  <lay-color-picker v-model="themeVariable['--global-neutral-color-1']"></lay-color-picker>&nbsp;
+                  <lay-color-picker v-model="themeVariable['--global-neutral-color-2']"></lay-color-picker>&nbsp;
+                  <lay-color-picker v-model="themeVariable['--global-neutral-color-3']"></lay-color-picker>&nbsp;
+                  <lay-color-picker v-model="themeVariable['--global-neutral-color-4']"></lay-color-picker>&nbsp;
+                  <lay-color-picker v-model="themeVariable['--global-neutral-color-5']"></lay-color-picker>&nbsp;
+                  <lay-color-picker v-model="themeVariable['--global-neutral-color-6']"></lay-color-picker>&nbsp;
+                  <lay-color-picker v-model="themeVariable['--global-neutral-color-7']"></lay-color-picker>&nbsp;
+                  <lay-color-picker v-model="themeVariable['--global-neutral-color-8']"></lay-color-picker>
                   <lay-button fluid>导 出 配 置</lay-button>
                 </div>
               </template>
@@ -117,6 +125,7 @@ import zh_CN from "../locales/zh_CN.ts";
 import en_US from "../locales/en_US.ts";
 export default {
   setup() {
+
     const { t } = useI18n();
     const route = useRoute();
     const router = useRouter();
@@ -134,7 +143,15 @@ export default {
       "--global-warm-color": "#ffb800",
       "--global-danger-color": "#ff5722",
       "--global-checked-color": "#5fb878",
-      "--global-border-radius": "2px"
+      "--global-border-radius": "2px",
+      "--global-neutral-color-1": "#FAFAFA",
+      "--global-neutral-color-2": "#F6F6F6",
+      "--global-neutral-color-3": "#eeeeee",
+      "--global-neutral-color-4": "#e2e2e2",
+      "--global-neutral-color-5": "#dddddd",
+      "--global-neutral-color-6": "#d2d2d2",
+      "--global-neutral-color-7": "#cccccc",
+      "--global-neutral-color-8": "#c2c2c2",
     });
 
     const menus = [];

src/component/avatarList/index.less

@@ -0,0 +1 @@
+@import "../../theme/variable.less";

src/component/body/index.less

@@ -1,3 +1,5 @@
+@import "../../theme/variable.less";
+
 .layui-body {
   display: block;
   flex: 1;

src/component/breadcrumb/index.less

@@ -0,0 +1 @@
+@import "../../theme/variable.less";

src/component/breadcrumbItem/index.less

@@ -0,0 +1 @@
+@import "../../theme/variable.less";

src/component/button/index.less

@@ -56,7 +56,7 @@
 }
 
 .layui-btn-primary {
-  border-color: @global-border-color;
+  border-color: @global-neutral-color-3;
   background: 0 0;
   color: #666;
 }

src/component/buttonContainer/index.less

@@ -1,3 +1,5 @@
+@import "../../theme/variable.less";
+
 .layui-btn-container {
   font-size: 0;
   .layui-btn {

src/component/carousel/index.less

@@ -0,0 +1 @@
+@import "../../theme/variable.less";

src/component/carouselItem/index.less

@@ -0,0 +1 @@
+@import "../../theme/variable.less";

src/component/checkbox/index.less

@@ -0,0 +1 @@
+@import "../../theme/variable.less";

src/component/checkboxGroup/index.less

@@ -0,0 +1 @@
+@import "../../theme/variable.less";

src/component/col/index.less

@@ -0,0 +1 @@
+@import "../../theme/variable.less";

src/component/collapse/index.less

@@ -0,0 +1 @@
+@import "../../theme/variable.less";

src/component/collapseItem/index.less

@@ -0,0 +1 @@
+@import "../../theme/variable.less";

src/component/colorPicker/index.vue

@@ -131,6 +131,7 @@ let blue = ref(0);
 let alpha = ref(1);
 
 onMounted(() => {
+  console.log(props.modelValue)
   let { r, g, b, a } = parseColor(props.modelValue);
   red.value = r;
   green.value = g;

src/component/container/index.less

@@ -1,3 +1,5 @@
+@import "../../theme/variable.less";
+
 .layui-container {
   position: relative;
   margin: 0 auto;

src/component/countUp/index.less

@@ -0,0 +1 @@
+@import "../../theme/variable.less";

src/component/dropdown/index.less

@@ -0,0 +1 @@
+@import "../../theme/variable.less";

src/component/dropdownItem/index.less

@@ -0,0 +1 @@
+@import "../../theme/variable.less";

src/component/empty/index.less

@@ -1,3 +1,5 @@
+@import "../../theme/variable.less";
+
 .layui-empty {
   margin: 0 8px;
   font-size: 14px;

src/component/exception/index.less

@@ -1,3 +1,5 @@
+@import "../../theme/variable.less";
+
 .layui-exception {
   .layui-exception-image {
     width: 50%;

src/component/field/index.less

@@ -4,7 +4,7 @@
 @field-border-radius: var(--field-border-radius);
 
 :root {
-  --field-border-color: @global-border-color;
+  --field-border-color: @global-neutral-color-3;
   --field-border-radius: @global-border-radius;
 }
 

src/component/footer/index.less

@@ -1,3 +1,5 @@
+@import "../../theme/variable.less";
+
 .layui-footer {
   box-sizing: border-box;
 }

src/component/form/index.less

@@ -0,0 +1 @@
+@import "../../theme/variable.less";

src/component/formItem/index.less

@@ -1,3 +1,5 @@
+@import "../../theme/variable.less";
+
 @error_color: red;
 
 .layui-required {

src/component/fullscreen/index.less

@@ -1,3 +1,5 @@
+@import "../../theme/variable.less";
+
 .layui-fullscreen {
   position: fixed;
   top: 0;

src/component/header/index.less

@@ -1,3 +1,5 @@
+@import "../../theme/variable.less";
+
 .layui-header {
   box-sizing: border-box;
   height: 60px;

src/component/icon/index.less

@@ -0,0 +1 @@
+@import "../../theme/variable.less";

src/component/iconPicker/index.less

@@ -94,7 +94,7 @@
 }
 
 .layui-iconpicker-list li:hover {
-  background-color: #fafafa;
+  background-color: @global-neutral-color-1;
   color: rgba(0, 0, 0, 0.5);
 }
 

src/component/input/index.less

@@ -5,7 +5,7 @@
 
 :root {
   --input-border-radius: @global-border-radius;
-  --input-border-color: @global-border-color;
+  --input-border-color: @global-neutral-color-3;
 }
 
 .layui-input {

src/component/layout/index.less

@@ -1,3 +1,5 @@
+@import "../../theme/variable.less";
+
 .layui-layout {
   flex: 1;
   display: flex;

src/component/panel/index.less

@@ -6,7 +6,7 @@
 @panel-back-color: var(--panel-back-color);
 
 :root {
-  --panel-border-color: @global-border-color;
+  --panel-border-color: @global-neutral-color-3;
   --panel-border-radius: @global-border-radius;
   --panel-fore-color: @global-fore-color;
   --panel-back-color: @global-back-color;

src/component/popper/index.less

@@ -1,3 +1,5 @@
+@import "../../theme/variable.less";
+
 // 主题颜色
 // 浅色 --> 默认使用
 @ligh-background: #FFF;

src/component/quote/index.less

@@ -14,7 +14,7 @@
   margin-bottom: 10px;
   border-left: 5px solid @block-default-color;
   border-radius: @block-border-radius;
-  background-color: #fafafa;
+  background-color: @global-neutral-color-1;
 }
 
 .layui-quote-nm {

src/component/rate/index.less

@@ -1,3 +1,5 @@
+@import "../../theme/variable.less";
+
 .layui-rate,
 .layui-rate * {
   display: inline-block;

src/component/result/index.less

@@ -1,3 +1,5 @@
+@import "../../theme/variable.less";
+
 .result {
   text-align: center;
 }

src/component/row/index.less

@@ -1,3 +1,5 @@
+@import "../../theme/variable.less";
+
 .layui-row:after,
 .layui-row:before {
   content: "";

src/component/select/index.less

@@ -1,3 +1,5 @@
+@import "../../theme/variable.less";
+
 dl.layui-anim-upbit > dd input[type="checkbox"] {
   display: none;
 }

src/component/side/index.less

@@ -1,3 +1,5 @@
+@import "../../theme/variable.less";
+
 .layui-side {
   overflow: auto;
   box-sizing: border-box;

src/component/skeleton/index.less

@@ -1,3 +1,5 @@
+@import "../../theme/variable.less";
+
 .lay-skeleton {
   .lay-skeleton-item {
     height: 16px;

src/component/splitPanel/index.less

@@ -1,3 +1,5 @@
+@import "../../theme/variable.less";
+
 .lay-split-panel {
   height: 100%;
   display: flex;
@@ -16,7 +18,7 @@
     height: 100%;
     width: 3px;
     border: 1px #eeeeee solid;
-    background-color: #fafafa;
+    background-color: @global-neutral-color-1;
     border-left: none;
     border-right: none;
     cursor: col-resize;
@@ -48,7 +50,7 @@
     height: 3px;
     cursor: row-resize;
     border: 1px #eeeeee solid;
-    background-color: #fafafa;
+    background-color: @global-neutral-color-1;
     border-top: none;
     border-bottom: none;
     &:before {

src/component/step/index.less

@@ -1,3 +1,5 @@
+@import "../../theme/variable.less";
+
 @width-height-pace: 24px;
 @step-color: @step-success-color;
 @step-fail-color: #ff5722;

src/component/table/index.less

@@ -1,3 +1,5 @@
+@import "../../theme/variable.less";
+
 .laytable-cell-checkbox {
   width: 34px;
 }
@@ -32,7 +34,7 @@
 .layui-table-total,
 .layui-table-total tr,
 .layui-table[lay-even] tr:nth-child(even) {
-  background-color: #fafafa;
+  background-color: @global-neutral-color-1;
 }
 
 .layui-table td,

src/component/textarea/index.less

@@ -5,7 +5,7 @@
 
 :root {
   --textarea-border-radius: @global-border-radius;
-  --textarea-border-color: @global-border-color;
+  --textarea-border-color: @global-neutral-color-3;
 }
 
 .layui-textarea {

src/component/tree/index.less

@@ -1,3 +1,5 @@
+@import "../../theme/variable.less";
+
 .layui-tree {
   line-height: 22px;
 }

src/theme/index.less

@@ -372,7 +372,7 @@ a cite {
   line-height: 42px;
   padding: 0 15px 0 35px;
   color: #333;
-  background-color: #fafafa;
+  background-color: @global-neutral-color-1;
   cursor: pointer;
   font-size: 14px;
   overflow: hidden;
@@ -474,7 +474,7 @@ a cite {
 }
 
 .layui-bg-gray {
-  background-color: #fafafa !important;
+  background-color: @global-neutral-color-1 !important;
   color: #666 !important;
 }
 
@@ -1225,7 +1225,7 @@ a cite {
   border-style: solid;
   border-radius: 2px 0 0 2px;
   text-align: center;
-  background-color: #fafafa;
+  background-color: @global-neutral-color-1;
   overflow: hidden;
   box-sizing: border-box;
 }
@@ -1992,7 +1992,7 @@ a cite {
 }
 
 .layui-keyboard-list li:hover {
-  background-color: #fafafa;
+  background-color: @global-neutral-color-1;
   color: rgba(0, 0, 0, 0.5);
 }
 
@@ -2191,7 +2191,7 @@ a cite {
 }
 
 .layui-tab-card > .layui-tab-title {
-  background-color: #fafafa;
+  background-color: @global-neutral-color-1;
 }
 
 .layui-tab-card > .layui-tab-title li {
@@ -2608,7 +2608,7 @@ body .layui-util-face .layui-layer-content {
   line-height: 20px;
   border: 1px solid #eee;
   border-left-width: 6px;
-  background-color: #fafafa;
+  background-color: @global-neutral-color-1;
   color: #333;
   font-family: Courier New;
   font-size: 12px;

src/theme/variable.less

@@ -10,13 +10,28 @@
 
 @global-border-radius: var(--global-border-radius);
 
-@global-border-color: var(--global-border-color);
-
 @global-fore-color: var(--global-fore-color);
 
 @global-back-color: var(--global-back-color);
 
+@global-neutral-color-1: var(--global-neutral-color-1);
+
+@global-neutral-color-2: var(--global-neutral-color-2);
+
+@global-neutral-color-3: var(--global-neutral-color-3);
+
+@global-neutral-color-4: var(--global-neutral-color-4);
+
+@global-neutral-color-5: var(--global-neutral-color-5);
+
+@global-neutral-color-6: var(--global-neutral-color-6);
+
+@global-neutral-color-7: var(--global-neutral-color-7);
+
+@global-neutral-color-8: var(--global-neutral-color-8);
+
 :root {
+
   --global-primary-color: #009688;
 
   --global-normal-color: #1e9fff;
@@ -27,13 +42,28 @@
 
   --global-checked-color: #5fb878;
 
-  --global-border-color: #eee;
-
   --global-border-radius: 2px;
 
   --global-fore-color: #333;
 
   --global-back-color: #ffffff;
+
+  --global-neutral-color-1: #FAFAFA;
+
+  --global-neutral-color-2: #F6F6F6;
+  
+  --global-neutral-color-3: #eeeeee;
+  
+  --global-neutral-color-4: #e2e2e2;
+  
+  --global-neutral-color-5: #dddddd;
+  
+  --global-neutral-color-6: #d2d2d2;
+  
+  --global-neutral-color-7: #cccccc;
+  
+  --global-neutral-color-8: #c2c2c2;
+  
 }
 
 body[lay-theme="dark"] {