feat: 新增 global-dark-text-color 与 global-dark-background-color 主题变量

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

@@ -11,6 +11,17 @@
 <template>
 <lay-timeline>
   <lay-timeline-item title="1.0.x">
+  <ul> 
+      <a name="1-0-1"> </a> 
+      <li> 
+        <h3>1.0.1 <span class="layui-badge-rim">2022-04-03</span></h3> 
+        <ul>
+          <li>[新增] timeline 组件 direction 属性, 支持垂直与水平布局。</li>
+          <li>[新增] config-proivder 组件 global-dark-background-color 夜间模式背景颜色变量。</li>
+          <li>[新增] config-proivder 组件 global-dark-text-color 夜间模式文字颜色变量。</li>
+        </ul> 
+      </li>
+    </ul>
     <ul> 
       <a name="1-0-0"> </a> 
       <li> 

example/src/layouts/Layout.vue

@@ -109,7 +109,15 @@
                   <lay-color-picker
                     v-model="themeVariable['--global-neutral-color-8']"
                   ></lay-color-picker>
-                  <lay-button fluid>导 出 配 置</lay-button>
+                  <lay-color-picker
+                    v-model="themeVariable['--global-dark-text-color']"
+                  ></lay-color-picker
+                  >&nbsp;
+                  <lay-color-picker
+                    v-model="themeVariable['--global-dark-background-color']"
+                  ></lay-color-picker>
+
+                  <lay-button fluid="true">导 出 配 置</lay-button>
                 </div>
               </template>
             </lay-dropdown>
@@ -231,6 +239,7 @@ export default {
     ];
     let isDark = (localStorage.getItem('layui-vue-theme-dark') !== "false") ||
                  window.matchMedia('prefers-color-scheme: dark').matches;
+    
     const theme = ref(isDark ? "dark":"light");
     const themeVariable = ref({
       "--global-primary-color": "#009688",
@@ -247,6 +256,8 @@ export default {
       "--global-neutral-color-6": "#d2d2d2",
       "--global-neutral-color-7": "#cccccc",
       "--global-neutral-color-8": "#c2c2c2",
+      "--global-dark-text-color": "#FFFFFFc9",
+      "--global-dark-background-color": "#22272E",
     });
 
     const menus = [];

src/provider/index.vue

@@ -46,8 +46,8 @@ const changeTheme = (theme: string) => {
         brightness: 100,
         contrast: 90,
         sepia: 0,
-        // darkSchemeTextColor: 'rgba(255, 255, 255, 0.9)',
-        // darkSchemeBackgroundColor: '#22272E'
+        darkSchemeTextColor: getComputedStyle(document.documentElement).getPropertyValue("--global-dark-text-color"),
+        darkSchemeBackgroundColor: getComputedStyle(document.documentElement).getPropertyValue("--global-dark-background-color")
       },
       {
         invert: [],

src/theme/variable.less

@@ -60,4 +60,8 @@
   
   --global-neutral-color-8: #c2c2c2;
   
+  --global-dark-text-color: #FFFFFFc9;
+
+  --global-dark-background-color: #22272E;
+
 }