feat: ✨add dark

demo/demo.vue

@@ -12,6 +12,7 @@
       :show-today="true"
       :show-weekend="true"
       :unit="unit"
+      :dark="isDark"
       @row-click="onClickRow"
       @row-dbl-click="onDblClickRow"
       @row-checked="onCheckedRow"
@@ -104,6 +105,7 @@
     <button @click="changeUnit">切换单位</button>
     <button @click="jumpToDate">跳转到</button>
     <button @click="setSelected">设置选择</button>
+    <button @click="setDark">{{ isDark ? '浅色' : '深色' }}</button>
   </div>
 
   <div style="width: 100%; height: 400px; margin-top: 50px">
@@ -216,6 +218,11 @@ function onExpandAll() {
   expandAll.value = !expandAll.value;
 }
 
+const isDark = ref(false);
+function setDark() {
+  isDark.value = !isDark.value;
+}
+
 const colors = ['red', 'blue', 'green', 'yellow', 'pink', 'orange'];
 const borderColor = ref('');
 function onChangeBorderColor() {

src/components/column/index.vue

@@ -5,7 +5,7 @@
     class="xg-table-cell"
     :style="{
       width: `${realWidth}px`,
-      ...$styleBox.getBorderColor()
+      'border-color': $styleBox.borderColor
     }"
   >
     <div :style="{ lineHeight: `${rowHeight}px`, height: `${rowHeight}px` }">

src/components/common/GanttHeader.vue

@@ -33,7 +33,7 @@
             }
           ]"
           :style="{
-            ...$styleBox.getBorderColor(),
+            'border-color': $styleBox.borderColor,
             color: $styleBox.headerStyle?.textColor,
             backgroundColor:
               $styleBox.headerStyle?.bgColor || $styleBox.primaryColor
@@ -87,7 +87,6 @@ onMounted(updateHeaderHeight);
     border-bottom: 1px solid #e5e5e5;
     border-right: 1px solid #e5e5e5;
     font-size: 14px;
-    background-color: #eca710;
   }
 
   .highlight {

src/components/common/Row.vue

@@ -17,8 +17,8 @@
       height: `${rowHeight}px`,
       borderWidth: props.renderStyle ? '1px' : 0,
       backgroundColor: props.renderStyle ? ($styleBox.levelColor[props.data!.level] ?? undefined) : undefined,
-      ...$styleBox.getBorderColor()
-    }"
+      'border-color': $styleBox.borderColor
+      }"
     @mouseenter.capture="onEnter"
     @mouseleave="onLeave"
     @click="onClick"

src/components/common/TableHeader.vue

@@ -43,7 +43,6 @@ onMounted(updateHeaderHeight);
 <style lang="scss" scoped>
 .xg-table-header {
   width: 100%;
-  background-color: #eca710;
   table-layout: fixed;
   border-collapse: separate;
   top: 0;

src/components/common/TableHeaderTh.vue

@@ -7,7 +7,7 @@
         'cell-resizable': !props.column.isLast
       }
     ]"
-    :style="{ ...$styleBox.getBorderColor() }"
+    :style="{ 'border-color': $styleBox.borderColor }"
     :colspan="props.column.colSpan"
     :rowspan="props.column.rowSpan"
   >

src/components/root/index.vue

@@ -1,8 +1,11 @@
 <template>
   <div
     ref="rootRef"
-    :class="['xg-root', { 'xg-root-dragging': mousedown }]"
-    :style="{ ...$styleBox.getBorder(), ...$styleBox.getBorderColor() }"
+    :class="[
+      'xg-root',
+      { 'xg-root-dragging': mousedown, 'xg-root__dark': isDark }
+    ]"
+    :style="[$styleBox.getBorder(), { 'border-color': $styleBox.borderColor }]"
   >
     <!-- 左侧表格 -->
     <sync-scroll-container
@@ -22,7 +25,13 @@
     </sync-scroll-container>
 
     <!-- 中分线 -->
-    <div ref="midLineRef" class="xg-mid-separate-line" />
+    <div
+      ref="midLineRef"
+      :class="[
+        'xg-mid-separate-line',
+        { 'xg-mid-separate-line__dark': isDark }
+      ]"
+    />
     <!-- 移动示意线 -->
     <div
       v-show="showLine"
@@ -115,7 +124,7 @@ onMounted(() => {
 // #endregion
 
 // #region 处理样式参数
-const { setStyles, $styleBox } = useStyle();
+const { setStyles, $styleBox, isDark } = useStyle();
 setStyles(props);
 // #endregion
 
@@ -200,6 +209,13 @@ defineExpose(exports);
   width: 100%;
   height: 100%;
   border: 1px solid #e5e5e5;
+
+  transition: background-color 0.1s, color 0.1s, border-color 0.1s;
+}
+
+.xg-root__dark {
+  color: #fff;
+  background-color: #303133;
 }
 
 .xg-root-dragging {
@@ -236,6 +252,15 @@ defineExpose(exports);
   }
 }
 
+.xg-mid-separate-line__dark {
+  background-color: #303133;
+
+  &:hover {
+    background-color: #2c2c2c;
+    box-shadow: 0 0 10px #2c2c2c;
+  }
+}
+
 .xg-move-line {
   position: absolute;
   top: 0;

src/components/root/rootProps.ts

@@ -104,8 +104,7 @@ export default {
    * border 颜色
    */
   borderColor: {
-    type: String,
-    default: '#e5e5e5'
+    type: String
   },
 
   /**

src/composables/useStyle.ts

@@ -1,6 +1,7 @@
 import type rootProps from '@/components/root/rootProps';
 import { useStore } from '@/store';
-import { type ExtractPropTypes, computed, unref, watchEffect } from 'vue';
+import { blend } from '@/utils/colors';
+import { type ExtractPropTypes, computed, watchEffect, ref } from 'vue';
 
 export default () => {
   const store = useStore();
@@ -11,29 +12,52 @@ export default () => {
     () => `${rowHeight.value * store.$data.length}px`
   );
 
+  const isDark = ref(false);
+  const darkColor = computed(() => ({
+    r: 0,
+    g: 0,
+    b: 0,
+    a: 50
+  }));
+  const darkWrap = (color: string, darkColor: string | Rgba) => {
+    return blend(darkColor, color);
+  };
+
   const setStyles = (props: ExtractPropTypes<typeof rootProps>) => {
     const fn = () => {
+      isDark.value = props.dark;
+
+      const bc = props.borderColor ?? '#e5e5e5';
+      store.$styleBox.borderColor = isDark.value
+        ? darkWrap(bc, darkColor.value)
+        : bc;
+
       store.$styleBox.setBorder(props.border);
-      store.$styleBox.setBorderColor(props.borderColor);
-
-      store.$styleBox.ganttColumnSize = unref(props.ganttColumnSize);
-      store.$styleBox.unit = unref(props.unit);
-      store.$styleBox.rowHeight = unref(props.rowHeight);
-      store.$styleBox.showCheckbox = unref(props.showCheckbox);
-      store.$styleBox.highlightDate = unref(props.highlightDate);
-      store.$styleBox.showExpand = unref(props.showExpand);
-      store.$styleBox.showToday = unref(props.showToday);
-      store.$styleBox.showWeekend = unref(props.showWeekend);
-      store.$styleBox.levelColor = unref(props.levelColor);
-      store.$styleBox.headerStyle = unref(props.headerStyle);
-      store.$styleBox.bodyStyle = unref(props.bodyStyle);
-      store.$styleBox.primaryColor = unref(props.primaryColor);
+
+      store.$styleBox.ganttColumnSize = props.ganttColumnSize;
+      store.$styleBox.unit = props.unit;
+      store.$styleBox.rowHeight = props.rowHeight;
+      store.$styleBox.showCheckbox = props.showCheckbox;
+      store.$styleBox.highlightDate = props.highlightDate;
+      store.$styleBox.showExpand = props.showExpand;
+      store.$styleBox.showToday = props.showToday;
+      store.$styleBox.showWeekend = props.showWeekend;
+      store.$styleBox.levelColor = props.levelColor;
+      store.$styleBox.headerStyle = props.headerStyle;
+      store.$styleBox.bodyStyle = props.bodyStyle;
+      store.$styleBox.primaryColor = props.primaryColor;
     };
 
     fn();
 
     watchEffect(fn);
   };
 
-  return { rowHeight, bodyHeight, setStyles, $styleBox: store.$styleBox };
+  return {
+    rowHeight,
+    bodyHeight,
+    setStyles,
+    isDark,
+    $styleBox: store.$styleBox
+  };
 };

src/models/param/styles.ts

@@ -12,13 +12,13 @@ export default class StyleBox {
     return { border: `${this.__border}px solid` };
   }
 
-  private __borderColor: string = '#e5e5e5';
-  setBorderColor(bc: string) {
-    this.__borderColor = bc;
+  private _borderColor: string = '#e5e5e5';
+  public get borderColor(): string {
+    return this._borderColor;
   }
 
-  getBorderColor(): Style {
-    return { 'border-color': this.__borderColor };
+  public set borderColor(v: string) {
+    this._borderColor = v;
   }
 
   private __ganttColumnSize: GanttColumnSize = 'normal';

src/typings/common.d.ts

@@ -1,3 +1,10 @@
 declare type El = HTMLElement | SVGElement | null | undefined;
 
 declare type SliderAlignment = 'left' | 'center' | 'right';
+
+declare interface Rgba {
+  r: number;
+  g: number;
+  b: number;
+  a?: number;
+}

src/utils/colors.ts

@@ -1,12 +1,5 @@
 const reRGBA = /^rgb(a)?\((\d{1,3}),(\d{1,3}),(\d{1,3}),?([01]?\.?\d*?)?\)$/;
 
-interface Rgba {
-  r: number;
-  g: number;
-  b: number;
-  a?: number;
-}
-
 function hexToRgb(hex: string) {
   if (typeof hex !== 'string') {
     throw new TypeError('Expected a string');