From 737e3f444da1b879285f2079ba7cbe12c0900c59 Mon Sep 17 00:00:00 2001
From: GreatZP <greatzp@greatzp.cn>
Date: Fri, 25 Aug 2023 15:48:30 +0800
Subject: [PATCH 1/3] =?UTF-8?q?refactor(theme):=20=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=92=8Cdemo=E9=80=82=E9=85=8D=E4=B8=BB=E9=A2=98=EF=BC=8C?=
 =?UTF-8?q?=E6=8F=90=E5=8F=96=E4=BD=BF=E7=94=A8theme=E7=9A=84=E5=85=AC?=
 =?UTF-8?q?=E5=85=B1=E6=96=B9=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/code-review/src/code-review.scss    | 144 +++++++++++++++++-
 .../devui/code-review/src/code-review.tsx     |   5 +-
 .../src/components/color-edit/color-edit.scss |   7 +-
 .../src/components/panel/index.scss           |  17 +--
 .../devui/date-picker/src/date-picker.scss    |   8 +-
 .../devui/editor-md/src/editor-md.scss        |   5 +
 .../devui/editor-md/src/editor-md.tsx         |   7 +-
 packages/devui-vue/devui/gantt/src/gantt.scss |   4 +
 .../devui/input-icon/src/input-icon.scss      |   1 -
 .../devui-vue/devui/shared/utils/useTheme.ts  |  32 ++++
 .../devui/tag-input/src/tag-input.scss        |  10 +-
 .../devui/tree-select/src/tree-select.scss    |  23 +++
 .../.vitepress/devui-theme/styles/code.scss   |   2 +-
 .../docs/components/action-timeline/index.md  |   2 +-
 .../docs/components/input-icon/index.md       |  10 +-
 .../devui-vue/docs/components/layout/index.md |  97 ++++++------
 .../docs/components/time-picker/index.md      |   6 +
 17 files changed, 294 insertions(+), 86 deletions(-)
 create mode 100644 packages/devui-vue/devui/shared/utils/useTheme.ts

diff --git a/packages/devui-vue/devui/code-review/src/code-review.scss b/packages/devui-vue/devui/code-review/src/code-review.scss
index 38fb97d37f..81c602ad8e 100644
--- a/packages/devui-vue/devui/code-review/src/code-review.scss
+++ b/packages/devui-vue/devui/code-review/src/code-review.scss
@@ -16,13 +16,17 @@
     padding-right: 20px;
     border-bottom: 1px solid $devui-dividing-line;
     border-radius: $devui-border-radius-card;
-    background-color: $devui-global-bg-normal;
+    background-color: $devui-base-bg;
     cursor: pointer;
 
     &--unfold {
       border-radius: $devui-border-radius-card $devui-border-radius-card 0 0;
-      border-bottom: 1px solid #d8d8d8;
-      box-shadow: inset 0 -1px 0 0 $devui-brand-foil;
+      border-bottom: 1px solid $devui-dividing-line;
+      box-shadow: inset 0 -1px 0 0 $devui-shadow;
+    }
+
+    .d2h-files-diff {
+      background-color: #f8fafd;
     }
 
     .file-info {
@@ -138,6 +142,41 @@
       border: none;
     }
 
+    .d2h-emptyplaceholder.d2h-cntx.d2h-code-side-linenumber,
+    .d2h-emptyplaceholder.d2h-cntx {
+      background-color: #fafafa;
+    }
+
+    .d2h-code-side-linenumber,
+    .d2h-emptyplaceholder {
+      border-left: 1px solid;
+      border-right: 1px solid;
+      padding: 0;
+    }
+
+    .d2h-info.d2h-code-side-linenumber {
+      background-color: #f8fafd;
+    }
+
+    .d2h-code-side-line,
+    .d2h-code-side-linenumber {
+      background-color: transparent;
+    }
+
+    .d2h-code-side-linenumber {
+      border-color: #eee;
+      color: rgba(0, 0, 0, 0.3);
+      height: 100%;
+
+      &.d2h-cntx {
+        background-color: #fff;
+      }
+    }
+
+    .d2h-code-side-linenumber.d2h-ins {
+      background-color: #dfd;
+    }
+
     .d2h-code-linenumber::after,
     .d2h-code-side-linenumber::after {
       content: '';
@@ -193,9 +232,106 @@
     width: 22px;
     height: 22px;
     border-radius: 50%;
-    background-color: $devui-base-bg;
+    background-color: $devui-brand-foil;
     transform: translateX(-50%);
     box-shadow: 0 0 1px 1px rgba(37, 43, 58, 0.16);
     cursor: pointer;
   }
+
+  &.dp-md-dark {
+    color: #e8e8e8;
+    background-color: #2e303c;
+
+    .d2h-files-diff {
+      background-color: #262831;
+    }
+
+    .file-info .invert {
+      fill: #e8e8e8;
+    }
+
+    &__content {
+      background-color: #2e303c;
+    }
+
+    tr {
+      td.comment-icon-hover {
+        background-color: rgba(94, 124, 224, 0.2) !important;
+      }
+      &:hover .d2h-info {
+        background-color: rgba(94, 124, 224, 0.2);
+      }
+    }
+
+    .d2h-info {
+      background-color: #262831;
+      color: #909090;
+
+      .d2h-code-line-prefix {
+        color: #e8e8e8;
+      }
+    }
+
+    .d2h-code-side-linenumber {
+      border-color: #262933;
+      color: #646464;
+
+      &.d2h-cntx {
+        background-color: #262933;
+      }
+    }
+
+    .d2h-cntx {
+      background-color: #2e303c;
+    }
+
+    .d2h-del {
+      background-color: #4b3a39;
+      border-color: #985c5a;
+    }
+
+    .d2h-ins {
+      background-color: #1f5231;
+    }
+
+    .d2h-ins.d2h-code-side-linenumber {
+      border-color: #29a17c;
+    }
+
+    .d2h-emptyplaceholder {
+      border-color: #262933;
+    }
+
+    .d2h-code-side-linenumber.d2h-emptyplaceholder.d2h-cntx.d2h-emptyplaceholder {
+      background-color: #363946;
+    }
+
+    .d2h-emptyplaceholder.d2h-cntx {
+      background-color: #363946;
+    }
+
+    .d2h-code-line-prefix {
+      color: #e8e8e8;
+    }
+
+    .hljs {
+      color: #abb2bf;
+    }
+
+    .hljs-keyword {
+      color: #c678dd;
+    }
+
+    .hljs-title.class_ {
+      color: #e6c07b;
+    }
+
+    .hljs-built_in {
+      color: #e6c07b;
+    }
+
+    .hljs-string {
+      color: #98c379;
+    }
+  }
 }
diff --git a/packages/devui-vue/devui/code-review/src/code-review.tsx b/packages/devui-vue/devui/code-review/src/code-review.tsx
index fd8d1afdfe..29c3f9fae5 100644
--- a/packages/devui-vue/devui/code-review/src/code-review.tsx
+++ b/packages/devui-vue/devui/code-review/src/code-review.tsx
@@ -9,6 +9,7 @@ import { useCodeReview } from './composables/use-code-review';
 import { useCodeReviewFold } from './composables/use-code-review-fold';
 import { useCodeReviewComment } from './composables/use-code-review-comment';
 import './code-review.scss';
+import { useTheme } from '@devui/shared/utils/useTheme';
 
 export default defineComponent({
   name: 'DCodeReview',
@@ -20,7 +21,7 @@ export default defineComponent({
     const { isFold, toggleFold } = useCodeReviewFold(props, ctx);
     const { commentLeft, commentTop, mouseEvent, onCommentMouseLeave, onCommentIconClick, insertComment, removeComment } =
       useCodeReviewComment(reviewContentRef, props, ctx);
-
+    const { isDarkMode } = useTheme(() => {});
     onMounted(() => {
       ctx.emit('afterViewInit', { toggleFold, insertComment, removeComment });
     });
@@ -28,7 +29,7 @@ export default defineComponent({
     provide(CodeReviewInjectionKey, { reviewContentRef, diffInfo: diffFile.value[0], isFold, rootCtx: ctx });
 
     return () => (
-      <div class={ns.b()}>
+      <div class={[ns.b(), { 'dp-md-dark': isDarkMode.value }]}>
         <CodeReviewHeader onClick={() => (isFold.value = !isFold.value)} />
         <div v-show={!isFold.value}>
           {props.showBlob ? (
diff --git a/packages/devui-vue/devui/color-picker/src/components/color-edit/color-edit.scss b/packages/devui-vue/devui/color-picker/src/components/color-edit/color-edit.scss
index 68937294b4..0ef033e95a 100644
--- a/packages/devui-vue/devui/color-picker/src/components/color-edit/color-edit.scss
+++ b/packages/devui-vue/devui/color-picker/src/components/color-edit/color-edit.scss
@@ -30,7 +30,6 @@
     padding: 0 5px;
 
     input {
-      border: none;
       outline: none;
       width: 100%;
       text-align: center;
@@ -63,5 +62,11 @@
         border-bottom-right-radius: 5px;
       }
     }
+
+    &-value {
+      background-color: $devui-base-bg;
+      border: 1px solid $devui-line;
+      color: $devui-text;
+    }
   }
 }
diff --git a/packages/devui-vue/devui/date-picker/src/components/panel/index.scss b/packages/devui-vue/devui/date-picker/src/components/panel/index.scss
index 85325f71f1..f000a295fc 100644
--- a/packages/devui-vue/devui/date-picker/src/components/panel/index.scss
+++ b/packages/devui-vue/devui/date-picker/src/components/panel/index.scss
@@ -4,12 +4,12 @@ $panel-width: 230px;
 $panel-height: 210px;
 $panel-padding: 5px;
 $panel-row-height: 24px;
-$panel-cell-bg: #ffffff;
-$panel-cell-color: #000000;
-$panel-cell-active-bg: #0066cc;
-$panel-cell-active-color: #f1f1f1;
-$panel-cell-active-hover-bg: #0088dd;
-$panel-cell-active-hover-color: #ffffff;
+$panel-cell-bg: transparent;
+$panel-cell-color: $devui-text;
+$panel-cell-active-bg: $devui-list-item-active-bg;
+$panel-cell-active-color: $devui-list-item-active-text;
+$panel-cell-active-hover-bg: $devui-list-item-active-bg;
+$panel-cell-active-hover-color: $devui-list-item-active-text;
 
 .#{$devui-prefix}-calendar-panel {
   width: $panel-width;
@@ -37,7 +37,7 @@ $panel-cell-active-hover-color: #ffffff;
       color: $panel-cell-color;
 
       &:hover {
-        background-color: $devui-disabled-bg;
+        background-color: $devui-range-item-hover-bg;
       }
 
       &.selected {
@@ -88,16 +88,15 @@ $panel-cell-active-hover-color: #ffffff;
 
     &.disabled {
       .today-button {
-        border: 1px solid #cccccc;
         cursor: not-allowed;
       }
     }
 
     .today-button {
-      border: 1px solid #0066cc;
       border-radius: 3px;
       padding: 2px 20px;
       font-size: 12px;
+      color: $devui-brand-active;
     }
   }
 }
diff --git a/packages/devui-vue/devui/date-picker/src/date-picker.scss b/packages/devui-vue/devui/date-picker/src/date-picker.scss
index 9578872273..d2b381e502 100644
--- a/packages/devui-vue/devui/date-picker/src/date-picker.scss
+++ b/packages/devui-vue/devui/date-picker/src/date-picker.scss
@@ -4,11 +4,10 @@ $cell-font-size: 13px;
 $border-width: 1px;
 $border-style: solid;
 $border-color: #dddddd;
-$input-border-color: #0066cc;
+$input-border-color: $devui-form-control-line;
 
 .#{$devui-prefix}-datepicker-container {
   .input-container {
-    border: 1px solid $input-border-color;
     border-radius: $devui-border-radius;
     display: flex;
     flex-direction: row;
@@ -24,7 +23,6 @@ $input-border-color: #0066cc;
     width: 100%;
 
     input {
-      border: 0 solid #000000;
       outline: none;
       margin-right: 20px;
     }
@@ -37,13 +35,9 @@ $input-border-color: #0066cc;
   }
 
   .#{$devui-prefix}-datepicker-panel {
-    border: 1px solid #000000;
     margin: 0;
     padding: 0;
     display: inline-block;
-    border-width: $border-width;
-    border-style: $border-style;
-    border-color: $border-color;
     border-radius: $devui-border-radius-card;
     box-shadow: $devui-shadow-length-base $devui-shadow;
     background-color: $devui-base-bg;
diff --git a/packages/devui-vue/devui/editor-md/src/editor-md.scss b/packages/devui-vue/devui/editor-md/src/editor-md.scss
index ddb43ab579..82ac7c681b 100644
--- a/packages/devui-vue/devui/editor-md/src/editor-md.scss
+++ b/packages/devui-vue/devui/editor-md/src/editor-md.scss
@@ -16,6 +16,11 @@ $font-family: helvetica, arial, 'PingFang', 'Microsoft YaHei', 'Hiragino Sans GB
     padding: 20px 0;
   }
 
+  .CodeMirror {
+    background: $devui-base-bg;
+    color: $devui-light-text;
+  }
+
   .CodeMirror pre {
     padding: 0 20px;
   }
diff --git a/packages/devui-vue/devui/editor-md/src/editor-md.tsx b/packages/devui-vue/devui/editor-md/src/editor-md.tsx
index 9e839f2044..f917b33f2a 100644
--- a/packages/devui-vue/devui/editor-md/src/editor-md.tsx
+++ b/packages/devui-vue/devui/editor-md/src/editor-md.tsx
@@ -1,7 +1,7 @@
 import { defineComponent, toRefs, provide, ref, SetupContext } from 'vue';
 import { Fullscreen } from '../../fullscreen';
 import { useEditorMd } from './composables/use-editor-md';
-import { useEditorMdTheme } from './composables/use-editor-md-theme';
+import { useTheme } from '@devui/shared/utils/useTheme';
 import { EditorMdInjectionKey, EditorMdProps, editorMdProps } from './editor-md-types';
 import Toolbar from './components/toolbar';
 import MdRender from './components/md-render';
@@ -48,7 +48,7 @@ export default defineComponent({
       onPreviewMouseover,
     } = useEditorMd(props, ctx);
 
-    const { isDarkMode } = useEditorMdTheme(() => {});
+    const { isDarkMode } = useTheme(() => {});
 
     provide(EditorMdInjectionKey, {
       showFullscreen,
@@ -64,7 +64,8 @@ export default defineComponent({
           class={[
             'dp-md-container',
             { 'dp-md-readonly': mode.value === 'readonly', 'dp-md-editonly': mode.value === 'editonly', 'dp-md-dark': isDarkMode.value },
-          ]} onPaste={onPaste}>
+          ]}
+          onPaste={onPaste}>
           <div class="dp-md-toolbar-container">
             <Toolbar />
           </div>
diff --git a/packages/devui-vue/devui/gantt/src/gantt.scss b/packages/devui-vue/devui/gantt/src/gantt.scss
index 4cc90984a0..df048c02ec 100644
--- a/packages/devui-vue/devui/gantt/src/gantt.scss
+++ b/packages/devui-vue/devui/gantt/src/gantt.scss
@@ -18,6 +18,10 @@
       padding-top: 8px;
     }
   }
+
+  button {
+    color: $devui-text;
+  }
 }
 
 .tool {
diff --git a/packages/devui-vue/devui/input-icon/src/input-icon.scss b/packages/devui-vue/devui/input-icon/src/input-icon.scss
index 4cd0479acd..bf83aedba8 100644
--- a/packages/devui-vue/devui/input-icon/src/input-icon.scss
+++ b/packages/devui-vue/devui/input-icon/src/input-icon.scss
@@ -10,7 +10,6 @@ $icon-left: 2px;
 
   label {
     flex: 1;
-    background-color: #cccccc;
 
     input {
       padding-right: $icon-size + $icon-offset + $icon-left;
diff --git a/packages/devui-vue/devui/shared/utils/useTheme.ts b/packages/devui-vue/devui/shared/utils/useTheme.ts
new file mode 100644
index 0000000000..02c6cf196e
--- /dev/null
+++ b/packages/devui-vue/devui/shared/utils/useTheme.ts
@@ -0,0 +1,32 @@
+import { onBeforeMount, onBeforeUnmount, onMounted, ref } from 'vue';
+
+export function useTheme(callback: () => void) {
+  const isDarkMode = ref(false);
+  let themeService: any;
+
+  const themeChange = () => {
+    if (themeService) {
+      isDarkMode.value = themeService.currentTheme.isDark;
+      callback();
+    }
+  };
+
+  onBeforeMount(() => {
+    themeService = window['devuiThemeService'];
+  });
+
+  onMounted(() => {
+    themeChange();
+    if (themeService && themeService.eventBus) {
+      themeService.eventBus.add('themeChanged', themeChange);
+    }
+  });
+
+  onBeforeUnmount(() => {
+    if (themeService && themeService.eventBus) {
+      themeService.eventBus.remove('themeChanged', themeChange);
+    }
+  });
+
+  return { isDarkMode };
+}
diff --git a/packages/devui-vue/devui/tag-input/src/tag-input.scss b/packages/devui-vue/devui/tag-input/src/tag-input.scss
index 7f3f1443d1..ffd2dc82eb 100644
--- a/packages/devui-vue/devui/tag-input/src/tag-input.scss
+++ b/packages/devui-vue/devui/tag-input/src/tag-input.scss
@@ -98,7 +98,7 @@
         vertical-align: top;
         font-size: $devui-font-size-page-title;
         border-radius: 50%;
-        background-color: $devui-line;
+        background-color: $devui-icon-fill;
         width: 12px;
         height: 12px;
         display: inline-block;
@@ -123,13 +123,13 @@
 
         span {
           &:hover {
-            color: $devui-list-item-hover-text;
+            color: $devui-icon-fill;
           }
         }
 
         .remove-button {
           &:hover {
-            background-color: $devui-list-item-hover-text;
+            background-color: $devui-icon-fill;
           }
         }
       }
@@ -144,6 +144,7 @@
     height: 22px;
     font-size: $devui-font-size;
     padding-left: 5px;
+    background-color: transparent;
 
     &::-ms-clear {
       display: none;
@@ -176,7 +177,8 @@
       font-size: $devui-font-size;
       line-height: 20px;
       border-radius: $devui-border-radius;
-      transition: color $devui-animation-duration-fast $devui-animation-ease-in-smooth, background-color $devui-animation-duration-fast $devui-animation-ease-in-smooth;
+      transition: color $devui-animation-duration-fast $devui-animation-ease-in-smooth,
+        background-color $devui-animation-duration-fast $devui-animation-ease-in-smooth;
       cursor: pointer;
 
       &:hover {
diff --git a/packages/devui-vue/devui/tree-select/src/tree-select.scss b/packages/devui-vue/devui/tree-select/src/tree-select.scss
index c1ea171f80..241dedb25d 100644
--- a/packages/devui-vue/devui/tree-select/src/tree-select.scss
+++ b/packages/devui-vue/devui/tree-select/src/tree-select.scss
@@ -8,6 +8,29 @@ $tree-select-item-font-size: 16px;
 .#{$devui-prefix}-tree-select {
   position: relative;
   width: 100%;
+
+  svg.svg-icon path {
+    fill: $devui-icon-text;
+  }
+
+  svg.svg-icon rect {
+    stroke: $devui-icon-text;
+  }
+
+  &.#{$devui-prefix}-tree__node--open:not(.#{$devui-prefix}-tree-node__customIcon) {
+    & > .#{$devui-prefix}-tree__node-content svg.svg-icon path {
+      fill: $devui-icon-fill-active;
+    }
+
+    & > .#{$devui-prefix}-tree__node-content svg.svg-icon rect {
+      stroke: $devui-icon-fill-active;
+    }
+
+    & > .#{$devui-prefix}-tree__node-content svg.svg-icon.svg-icon-close rect:last-child {
+      stroke: none;
+      fill: $devui-icon-fill-active;
+    }
+  }
 }
 
 .#{$devui-prefix}-tree-select-disabled {
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/styles/code.scss b/packages/devui-vue/docs/.vitepress/devui-theme/styles/code.scss
index caf9ad04f0..9b442aa192 100644
--- a/packages/devui-vue/docs/.vitepress/devui-theme/styles/code.scss
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/styles/code.scss
@@ -6,7 +6,7 @@ code {
   padding: 0.25rem 0.5rem;
   font-family: var(--code-font-family);
   font-size: 0.85em;
-  color: var(--devui-text,#252b3a) !important;
+  color: var(--devui-text, #252b3a);
   background-color: $devui-area !important;
 }
 
diff --git a/packages/devui-vue/docs/components/action-timeline/index.md b/packages/devui-vue/docs/components/action-timeline/index.md
index 72610019f7..b1add1b011 100644
--- a/packages/devui-vue/docs/components/action-timeline/index.md
+++ b/packages/devui-vue/docs/components/action-timeline/index.md
@@ -168,7 +168,7 @@ export default defineComponent({
 
 <style scoped>
 .custom-content {
-  background: #fff;
+  background: var(--devui-base-bg, #ffffff);
   box-shadow: var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-feedback-overlay-shadow, rgba(37, 43, 58, 0.16));
   border-radius: 4px;
   margin-left: 32px;
diff --git a/packages/devui-vue/docs/components/input-icon/index.md b/packages/devui-vue/docs/components/input-icon/index.md
index 2fed9a738d..e986a9a56c 100644
--- a/packages/devui-vue/docs/components/input-icon/index.md
+++ b/packages/devui-vue/docs/components/input-icon/index.md
@@ -16,7 +16,7 @@ export default defineComponent({
         console.log(eventValue.value = val)
         alert('AHHHH~!! InputIcon!!!!')
     }
-    
+
     return {
       eventValue,
       handleIconClick,
@@ -33,7 +33,7 @@ export default defineComponent({
 <d-input-icon name="calendar" />
 ```
 
-<div style="max-width:300px;border:1px dashed #ccc;padding:20px;display:flex;flex-direction:column;justify-content:space-around;height:300px;">
+<div style="max-width: 300px; padding: 20px; display:flex; flex-direction: column; justify-content: space-around; height: 300px;">
 <d-input-icon modelValue="calendar" name="calendar" />
 <d-input-icon modelValue="code" name="code" />
 <d-input-icon modelValue="close" name="close" />
@@ -54,7 +54,7 @@ export default defineComponent({
 <d-input-icon name="letter-a" icon-bg-color="#afa" icon-color="#33a" />
 ```
 
-<div style="max-width:300px;border:1px dashed #ccc;padding:20px;display:flex;flex-direction:column;justify-content:space-around;height:300px;">
+<div style="max-width: 300px; padding: 20px; display: flex; flex-direction: column; justify-content: space-around; height: 300px;">
 <d-input-icon modelValue="calendar" name="calendar" icon-bg-color="#afa" icon-color="#33a"/>
 <d-input-icon modelValue="code" name="code" icon-bg-color="#afa" icon-color="#33a" />
 <d-input-icon modelValue="close" name="close" icon-bg-color="#afa" icon-color="#33a" />
@@ -71,7 +71,7 @@ export default defineComponent({
 <d-input-icon name="calendar" @iconclick="handleIconClick" />
 ```
 
-<div style="max-width:300px;border:1px dashed #ccc;padding:20px;display:flex;flex-direction:column;justify-content:space-around;">
+<div style="max-width: 300px; padding: 20px; display: flex; flex-direction: column; justify-content: space-around;">
 <d-input-icon name="calendar" modelValue="click the icon --->" @iconclick="handleIconClick" />
 </div>
 
@@ -130,4 +130,4 @@ setup(props, ctx) {
 },
 ```
 
-其中`onInputChange`的二次封装，是为了从`Input`组件中同步状态到本地。
\ No newline at end of file
+其中`onInputChange`的二次封装，是为了从`Input`组件中同步状态到本地。
diff --git a/packages/devui-vue/docs/components/layout/index.md b/packages/devui-vue/docs/components/layout/index.md
index 4427cc5f44..58291d1884 100644
--- a/packages/devui-vue/docs/components/layout/index.md
+++ b/packages/devui-vue/docs/components/layout/index.md
@@ -11,7 +11,6 @@
 ::: demo
 
 ```vue
-
 <template>
   <d-layout>
     <d-header class="dheader">Header</d-header>
@@ -21,9 +20,10 @@
 </template>
 
 <style>
-.dheader, .dfooter {
-  background: #333854;
-  color: #fff;
+.dheader,
+.dfooter {
+  background: var(--devui-base-bg-dark, #333854);
+  color: var(--devui-light-text, #ffffff);
   text-align: center;
   line-height: 40px;
 }
@@ -32,6 +32,7 @@
   height: 200px;
   line-height: 200px;
   text-align: center;
+  background-color: var(--devui-global-bg-normal, #ffffff);
 }
 </style>
 ```
@@ -41,7 +42,6 @@
 :::demo
 
 ```vue
-
 <template>
   <d-layout>
     <d-header class="dheader">Header</d-header>
@@ -54,15 +54,16 @@
 </template>
 
 <style>
-.dheader, .dfooter {
-  background: #333854;
-  color: #fff;
+.dheader,
+.dfooter {
+  background: var(--devui-base-bg-dark, #333854);
+  color: var(--devui-light-text, #ffffff);
   text-align: center;
   line-height: 40px;
 }
 
 .daside {
-  background: #f8f8f8;
+  background: var(--devui-area, #f8f8f8);
   width: 100px;
   min-height: 200px;
   display: flex;
@@ -77,7 +78,6 @@
 :::demo
 
 ```vue
-
 <template>
   <d-layout>
     <d-header class="dheader">Header</d-header>
@@ -90,9 +90,10 @@
 </template>
 
 <style>
-.dheader, .dfooter {
-  background: #333854;
-  color: #fff;
+.dheader,
+.dfooter {
+  background: var(--devui-base-bg-dark, #333854);
+  color: var(--devui-light-text, #ffffff);
   text-align: center;
   line-height: 40px;
 }
@@ -104,7 +105,6 @@
 :::demo
 
 ```vue
-
 <template>
   <d-layout>
     <d-aside class="daside">Aside</d-aside>
@@ -118,7 +118,7 @@
 
 <style>
 .daside {
-  background: #f8f8f8;
+  background: var(--devui-area, #f8f8f8);
   width: 100px;
   min-height: 200px;
   display: flex;
@@ -126,9 +126,10 @@
   justify-content: center;
 }
 
-.dheader, .dfooter {
-  background: #333854;
-  color: #fff;
+.dheader,
+.dfooter {
+  background: var(--devui-base-bg-dark, #333854);
+  color: var(--devui-light-text, #ffffff);
   text-align: center;
   line-height: 40px;
   min-height: 40px;
@@ -137,20 +138,20 @@
 .main-content {
   line-height: 200px;
   text-align: center;
+  background-color: var(--devui-global-bg-normal, #ffffff);
 }
 </style>
 ```
 
 :::
 
-### 应用场景1
+### 应用场景 1
 
 常用上中下布局。
 
 :::demo
 
 ```vue
-
 <template>
   <d-layout>
     <d-header class="dheader-1">
@@ -177,8 +178,8 @@
   text-align: left;
   position: relative;
   height: 40px;
-  background-color: #333854;
-  color: #fff;
+  background: var(--devui-base-bg-dark, #333854);
+  color: var(--devui-light-text, #ffffff);
 }
 
 .dheader-1 {
@@ -186,7 +187,6 @@
   height: 40px;
   display: flex;
   align-items: center;
-  background-color: #333854;
 
   .logo-devui {
     width: 26px;
@@ -203,39 +203,37 @@
 .dcontent-1 {
   padding: 0 40px;
   height: 300px;
-  background-color: #f3f6f8;
+  background-color: var(--devui-global-bg-normal, #ffffff);
 
   .dbreadcrumb {
     margin: 8px 0;
   }
 
   .inner-content {
-    background-color: #fff;
+    background-color: var(--devui-global-bg-normal, #ffffff);
     height: 100%;
   }
 }
 
 .dfooter-1 {
-  background: #333854;
-  color: #fff;
+  background: var(--devui-base-bg-dark, #333854);
+  color: var(--devui-light-text, #ffffff);
   text-align: center;
   line-height: 40px;
   min-height: 40px;
 }
 </style>
-
 ```
 
 :::
 
-### 应用场景2
+### 应用场景 2
 
 常用上中下布局及侧边栏布局。
 
 :::demo
 
 ```vue
-
 <template>
   <d-layout>
     <d-header class="dheader-2">
@@ -263,7 +261,7 @@
 </template>
 
 <script>
-import { defineComponent, ref } from 'vue'
+import { defineComponent, ref } from 'vue';
 
 export default defineComponent({
   setup() {
@@ -280,23 +278,27 @@ export default defineComponent({
       {
         title: '内容三（默认展开）',
         open: true,
-        children: [{ title: '子内容1(禁用)', disabled: true }, {
-          title: '子内容2(默认激活)',
-          active: true
-        }, { title: '子内容3' }],
+        children: [
+          { title: '子内容1(禁用)', disabled: true },
+          {
+            title: '子内容2(默认激活)',
+            active: true,
+          },
+          { title: '子内容3' },
+        ],
       },
-    ])
+    ]);
     return {
-      menu
-    }
-  }
-})
-
+      menu,
+    };
+  },
+});
 </script>
 
 <style lang="scss" scoped>
 .daside-2 {
   border-left: 1px solid transparent;
+  background: var(--devui-area, #f8f8f8);
 }
 
 .dheader-2 {
@@ -304,7 +306,8 @@ export default defineComponent({
   height: 40px;
   display: flex;
   align-items: center;
-  background-color: #333854;
+  background: var(--devui-base-bg-dark, #333854);
+  color: var(--devui-light-text, #ffffff);
 
   .logo-devui {
     width: 26px;
@@ -320,10 +323,10 @@ export default defineComponent({
 
 .dcontent-2 {
   padding: 0 40px;
-  background-color: #f3f6f8;
+  background-color: var(--devui-global-bg-normal, #ffffff);
 
   .inner-content {
-    background-color: #fff;
+    background-color: var(--devui-global-bg-normal, #ffffff);
     padding: 16px;
     height: 100%;
   }
@@ -334,13 +337,11 @@ export default defineComponent({
 }
 
 .dfooter-2 {
-  color: #fff;
-  background-color: #333854;
+  background: var(--devui-base-bg-dark, #333854);
+  color: var(--devui-light-text, #ffffff);
   padding: 8px 24px;
 }
-
 </style>
-
 ```
 
 :::
diff --git a/packages/devui-vue/docs/components/time-picker/index.md b/packages/devui-vue/docs/components/time-picker/index.md
index 1c03b531d9..e2d5629414 100644
--- a/packages/devui-vue/docs/components/time-picker/index.md
+++ b/packages/devui-vue/docs/components/time-picker/index.md
@@ -125,6 +125,12 @@ export default defineComponent({
   },
 });
 </script>
+<style>
+.mb-2 button {
+  color: var(--devui-text, #ced1db);
+  background-color: var(--devui-btn-common-bg, #393a3e);
+}
+</style>
 ```
 
 :::

From c4e88e22f967ff2a0695c9e6055658891d10d567 Mon Sep 17 00:00:00 2001
From: GreatZP <greatzp@greatzp.cn>
Date: Mon, 4 Sep 2023 22:04:14 +0800
Subject: [PATCH 2/3] =?UTF-8?q?refactor(theme):=20=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=92=8Cdemo=E9=80=82=E9=85=8D=E4=B8=BB=E9=A2=98,=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8Dmarkdown=EF=BC=8Ccodeview=E4=B8=BB=E9=A2=98=EF=BC=8C?=
 =?UTF-8?q?=E5=8E=BB=E9=99=A4gitgraph=E5=86=97=E4=BD=99=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/code-review/src/code-review.scss    | 19 +++-
 .../devui/code-review/src/code-review.tsx     |  2 +-
 .../devui/editor-md/src/editor-md.scss        | 36 ++++++++
 .../devui/editor-md/src/editor-md.tsx         |  2 +-
 .../devui/git-graph/src/git-graph.tsx         | 30 +++---
 .../devui/git-graph/src/use-git-graph.ts      | 35 -------
 .../devui-vue/devui/shared/utils/useTheme.ts  |  4 +-
 .../devui-theme/components/NavBar.vue         | 91 ++++++++++---------
 .../docs/components/code-review/index.md      |  4 +
 9 files changed, 124 insertions(+), 99 deletions(-)
 delete mode 100644 packages/devui-vue/devui/git-graph/src/use-git-graph.ts

diff --git a/packages/devui-vue/devui/code-review/src/code-review.scss b/packages/devui-vue/devui/code-review/src/code-review.scss
index 81c602ad8e..f964260a24 100644
--- a/packages/devui-vue/devui/code-review/src/code-review.scss
+++ b/packages/devui-vue/devui/code-review/src/code-review.scss
@@ -148,6 +148,7 @@
     }
 
     .d2h-code-side-linenumber,
+    .d2h-code-linenumber,
     .d2h-emptyplaceholder {
       border-left: 1px solid;
       border-right: 1px solid;
@@ -159,11 +160,13 @@
     }
 
     .d2h-code-side-line,
-    .d2h-code-side-linenumber {
+    .d2h-code-side-linenumber,
+    .d2h-code-linenumber {
       background-color: transparent;
     }
 
-    .d2h-code-side-linenumber {
+    .d2h-code-side-linenumber,
+    .d2h-code-linenumber {
       border-color: #eee;
       color: rgba(0, 0, 0, 0.3);
       height: 100%;
@@ -216,7 +219,8 @@
         width: 100%;
       }
 
-      .d2h-code-side-linenumber {
+      .d2h-code-side-linenumber,
+      .d2h-code-linenumber {
         position: static;
         display: table-cell;
       }
@@ -258,6 +262,7 @@
       td.comment-icon-hover {
         background-color: rgba(94, 124, 224, 0.2) !important;
       }
+
       &:hover .d2h-info {
         background-color: rgba(94, 124, 224, 0.2);
       }
@@ -272,7 +277,10 @@
       }
     }
 
-    .d2h-code-side-linenumber {
+    .d2h-code-side-linenumber,
+    .d2h-code-linenumber,
+    .devui-code-review__content.side-by-side tr.comment-block td:last-child,
+    .devui-code-review__content.side-by-side tr td:nth-of-type(3) {
       border-color: #262933;
       color: #646464;
 
@@ -294,7 +302,8 @@
       background-color: #1f5231;
     }
 
-    .d2h-ins.d2h-code-side-linenumber {
+    .d2h-ins.d2h-code-side-linenumber,
+    .devui-code-review__content.side-by-side tr td:nth-of-type(3).d2h-ins.d2h-code-side-linenumber {
       border-color: #29a17c;
     }
 
diff --git a/packages/devui-vue/devui/code-review/src/code-review.tsx b/packages/devui-vue/devui/code-review/src/code-review.tsx
index 29c3f9fae5..8554514655 100644
--- a/packages/devui-vue/devui/code-review/src/code-review.tsx
+++ b/packages/devui-vue/devui/code-review/src/code-review.tsx
@@ -21,7 +21,7 @@ export default defineComponent({
     const { isFold, toggleFold } = useCodeReviewFold(props, ctx);
     const { commentLeft, commentTop, mouseEvent, onCommentMouseLeave, onCommentIconClick, insertComment, removeComment } =
       useCodeReviewComment(reviewContentRef, props, ctx);
-    const { isDarkMode } = useTheme(() => {});
+    const { isDarkMode } = useTheme();
     onMounted(() => {
       ctx.emit('afterViewInit', { toggleFold, insertComment, removeComment });
     });
diff --git a/packages/devui-vue/devui/editor-md/src/editor-md.scss b/packages/devui-vue/devui/editor-md/src/editor-md.scss
index 82ac7c681b..5055a152cc 100644
--- a/packages/devui-vue/devui/editor-md/src/editor-md.scss
+++ b/packages/devui-vue/devui/editor-md/src/editor-md.scss
@@ -111,6 +111,42 @@ $font-family: helvetica, arial, 'PingFang', 'Microsoft YaHei', 'Hiragino Sans GB
     }
   }
 
+  &.dp-md-dark {
+    span.cm-comment {
+      color: #428bdd;
+    }
+
+    span.cm-link {
+      color: #ae81ff;
+    }
+
+    span.cm-string {
+      color: #1dc116;
+    }
+
+    code {
+      color: #c7254e;
+    }
+
+    a {
+      color: #526ecc;
+      text-decoration: underline;
+      cursor: pointer;
+    }
+
+    .CodeMirror-cursor {
+      border-left: 1px solid rgb(231, 225, 225);
+    }
+
+    div.CodeMirror-selected {
+      background-color: $devui-list-item-selected-bg;
+    }
+
+    span.cm-header {
+      color: #e0e0e0;
+    }
+  }
+
   .CodeMirror-empty pre.CodeMirror-placeholder.CodeMirror-line-like {
     color: $devui-line;
   }
diff --git a/packages/devui-vue/devui/editor-md/src/editor-md.tsx b/packages/devui-vue/devui/editor-md/src/editor-md.tsx
index f917b33f2a..07c75186ae 100644
--- a/packages/devui-vue/devui/editor-md/src/editor-md.tsx
+++ b/packages/devui-vue/devui/editor-md/src/editor-md.tsx
@@ -48,7 +48,7 @@ export default defineComponent({
       onPreviewMouseover,
     } = useEditorMd(props, ctx);
 
-    const { isDarkMode } = useTheme(() => {});
+    const { isDarkMode } = useTheme();
 
     provide(EditorMdInjectionKey, {
       showFullscreen,
diff --git a/packages/devui-vue/devui/git-graph/src/git-graph.tsx b/packages/devui-vue/devui/git-graph/src/git-graph.tsx
index 95614bb715..0f0f9d0e91 100644
--- a/packages/devui-vue/devui/git-graph/src/git-graph.tsx
+++ b/packages/devui-vue/devui/git-graph/src/git-graph.tsx
@@ -1,25 +1,31 @@
-import { defineComponent, onMounted, ref, SetupContext, nextTick } from "vue";
-import { GitGraphProps, gitGraphProps } from "./git-graph-types";
-import useGitGraph from "./use-git-graph";
-
+import { defineComponent, onMounted, reactive, SetupContext, nextTick } from 'vue';
+import { GitGraphProps, gitGraphProps, GitGraphData } from './git-graph-types';
+import { GitGraph } from './git-graph-class';
+import { useTheme } from '@devui/shared/utils/useTheme';
 
 export default defineComponent({
   name: 'DGitGraph',
   props: gitGraphProps,
   emits: ['scrollToBottom'],
   setup(props: GitGraphProps, ctx: SetupContext) {
-    const isDark = ref(false);
-    const {initTheme, initGraph} = useGitGraph(props, ctx, isDark);
+    const graph = new GitGraph();
+    const initGraph = (element: HTMLElement, options: GitGraphData) => {
+      if (element && options) {
+        graph.load(element, options, isDarkMode.value);
+      }
+    };
+    let paramsArr = reactive([]);
+    const { isDarkMode } = useTheme(() => {
+      initGraph(...paramsArr);
+    });
     onMounted(() => {
       nextTick(() => {
         const graphEle = document.getElementsByClassName('d-graph-wrapper')[0] as HTMLElement;
-        initTheme();
-        initGraph(graphEle, props.option, isDark.value);
+        initGraph(graphEle, props.option);
+        paramsArr = [graphEle, props.option];
       });
     });
 
-    return () => (
-      <div class="d-graph-wrapper"></div>
-    );
-  }
+    return () => <div class="d-graph-wrapper"></div>;
+  },
 });
diff --git a/packages/devui-vue/devui/git-graph/src/use-git-graph.ts b/packages/devui-vue/devui/git-graph/src/use-git-graph.ts
deleted file mode 100644
index 64ff169814..0000000000
--- a/packages/devui-vue/devui/git-graph/src/use-git-graph.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Ref, SetupContext } from "vue";
-import { GitGraphData, GitGraphProps } from "./git-graph-types";
-import { GitGraph } from "./git-graph-class";
-
-export default function useGitGraph(
-  props: GitGraphProps,
-  ctx: SetupContext,
-  isDark: Ref<boolean>
-) {
-  let themeService: any;
-  const graph = new GitGraph();
-
-  const themeChange = () => {
-    isDark.value = !!themeService?.currentTheme?.isDark;
-  };
-
-  const initTheme = () => {
-    themeService = (window as any)['devuiThemeService'];
-    isDark.value = !!themeService?.currentTheme?.isDark;
-
-    if(themeService) {
-      themeService.eventBus.add('themeChanged', themeChange);
-    }
-  };
-
-  const initGraph = (element: HTMLElement, options: GitGraphData, isDarkMode: boolean) => {
-    graph.load(element, options, isDarkMode);
-  };
-
-  return {
-    initTheme,
-    initGraph
-  };
-
-}
diff --git a/packages/devui-vue/devui/shared/utils/useTheme.ts b/packages/devui-vue/devui/shared/utils/useTheme.ts
index 02c6cf196e..35e5ef2bdc 100644
--- a/packages/devui-vue/devui/shared/utils/useTheme.ts
+++ b/packages/devui-vue/devui/shared/utils/useTheme.ts
@@ -1,13 +1,13 @@
 import { onBeforeMount, onBeforeUnmount, onMounted, ref } from 'vue';
 
-export function useTheme(callback: () => void) {
+export function useTheme(callback?: () => void) {
   const isDarkMode = ref(false);
   let themeService: any;
 
   const themeChange = () => {
     if (themeService) {
       isDarkMode.value = themeService.currentTheme.isDark;
-      callback();
+      callback && callback();
     }
   };
 
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/components/NavBar.vue b/packages/devui-vue/docs/.vitepress/devui-theme/components/NavBar.vue
index 73ad72e15d..c1d72b31fc 100644
--- a/packages/devui-vue/docs/.vitepress/devui-theme/components/NavBar.vue
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/components/NavBar.vue
@@ -1,19 +1,16 @@
 <script setup lang="ts">
-import { ref, watch, getCurrentInstance, onMounted, nextTick } from 'vue'
-import {
-  ThemeServiceInit,
-  infinityTheme, provenceTheme, sweetTheme, deepTheme, galaxyTheme
-} from 'devui-theme'
-import NavBarTitle from './NavBarTitle.vue'
-import NavLinks from './NavLinks.vue'
-import ToggleSideBarButton from './ToggleSideBarButton.vue'
-import ZhLang from './icons/ZhLang.vue'
-import EnLang from './icons/EnLang.vue'
-import ThemePicker from './ThemePicker.vue'
-import { Locale } from '@devui/locale'
-import enUS from '@devui/locale/lang/en-us'
-import zhCN from '@devui/locale/lang/zh-cn'
-import { LANG_KEY, CURRENT_LANG, ZH_CN, EN_US } from '../const'
+import { ref, watch, getCurrentInstance, onBeforeMount } from 'vue';
+import { ThemeServiceInit, infinityTheme, provenceTheme, sweetTheme, deepTheme, galaxyTheme } from 'devui-theme';
+import NavBarTitle from './NavBarTitle.vue';
+import NavLinks from './NavLinks.vue';
+import ToggleSideBarButton from './ToggleSideBarButton.vue';
+import ZhLang from './icons/ZhLang.vue';
+import EnLang from './icons/EnLang.vue';
+import ThemePicker from './ThemePicker.vue';
+import { Locale } from '@devui/locale';
+import enUS from '@devui/locale/lang/en-us';
+import zhCN from '@devui/locale/lang/zh-cn';
+import { LANG_KEY, CURRENT_LANG, ZH_CN, EN_US } from '../const';
 
 // 主题切换
 const THEME_MAP = {
@@ -22,48 +19,47 @@ const THEME_MAP = {
   'sweet-theme': sweetTheme,
   'provence-theme': provenceTheme,
   'deep-theme': deepTheme,
-}
-
-const themes = Object.keys(THEME_MAP)
-
+};
 
+const themes = Object.keys(THEME_MAP);
 
 let themeService: any = null;
 
-const currentTheme = ref(themes[0])
+const currentTheme = ref(themes[0]);
 
 watch(currentTheme, (newVal) => {
-  THEME_MAP[newVal] && themeService?.applyTheme?.(THEME_MAP[newVal])
-})
+  THEME_MAP[newVal] && themeService?.applyTheme?.(THEME_MAP[newVal]);
+});
 
-onMounted(() => {
+onBeforeMount(() => {
   const userCustomTheme = localStorage.getItem('user-custom-theme') || themes[0];
-  nextTick(() => {
-    themeService = ThemeServiceInit({
-      ...THEME_MAP
-    }, userCustomTheme)
-    currentTheme.value = themeService.currentTheme.id
-  })
-})
+  themeService = ThemeServiceInit(
+    {
+      ...THEME_MAP,
+    },
+    userCustomTheme
+  );
+  currentTheme.value = themeService.currentTheme.id;
+});
 
 // 国际化
-const defaultLanguage = ref(CURRENT_LANG)
+const defaultLanguage = ref(CURRENT_LANG);
 function useTranslation(target) {
-  defaultLanguage.value = target
-  localStorage.setItem(LANG_KEY, target)
+  defaultLanguage.value = target;
+  localStorage.setItem(LANG_KEY, target);
   if (target === EN_US) {
-    location.pathname = `/${EN_US}${location.pathname}`
+    location.pathname = `/${EN_US}${location.pathname}`;
   } else if (target === ZH_CN) {
     location.pathname = location.pathname.split(`/${EN_US}`)[1];
   }
 }
 
-defineEmits(['toggle'])
+defineEmits(['toggle']);
 
 const LANG_MAP = {
   [ZH_CN]: '中文',
   [EN_US]: 'English',
-}
+};
 
 const currentLang = ref(CURRENT_LANG);
 const app = getCurrentInstance();
@@ -96,8 +92,12 @@ const switchLang = () => {
         </div>
 
         <div class="custom-nav flex items-center ml-l">
-          <div class="custom-nav-item ml-m" style="font-size: 0"
-            @click="() => useTranslation(defaultLanguage === ZH_CN ? EN_US : ZH_CN)" v-if="false">
+          <div
+            class="custom-nav-item ml-m"
+            style="font-size: 0"
+            @click="() => useTranslation(defaultLanguage === ZH_CN ? EN_US : ZH_CN)"
+            v-if="false"
+          >
             <ZhLang v-if="defaultLanguage === ZH_CN"></ZhLang>
             <EnLang v-else></EnLang>
           </div>
@@ -107,12 +107,17 @@ const switchLang = () => {
           <div class="custom-nav-item flex items-center ml-m">
             <ThemePicker v-model="currentTheme"></ThemePicker>
           </div>
-          <a class="custom-nav-item ml-m" style="font-size: 0;user-select:none"
-            href="https://github.com/DevCloudFE/vue-devui" target="_blank">
+          <a
+            class="custom-nav-item ml-m"
+            style="font-size: 0; user-select: none"
+            href="https://github.com/DevCloudFE/vue-devui"
+            target="_blank"
+          >
             <svg viewBox="0 0 20 20" width="18" height="18">
-              <path fill="var(--devui-text, #252b3a)"
-                d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0">
-              </path>
+              <path
+                fill="var(--devui-text, #252b3a)"
+                d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0"
+              ></path>
             </svg>
           </a>
         </div>
diff --git a/packages/devui-vue/docs/components/code-review/index.md b/packages/devui-vue/docs/components/code-review/index.md
index f25dc9b4c5..35701a17cf 100644
--- a/packages/devui-vue/docs/components/code-review/index.md
+++ b/packages/devui-vue/docs/components/code-review/index.md
@@ -263,6 +263,10 @@ export default defineComponent({
   color: var(--devui-light-text, #252b3a);
   background-color: var(--devui-primary);
 }
+.edit-comment-container div button:last-of-type {
+  color: var(--devui-text);
+  background-color: var(--devui-btn-common-bg);
+}
 .blob-box {
   padding: 12px 16px;
   text-align: center;

From db01759a594204f4417d9d74c354de795680f179 Mon Sep 17 00:00:00 2001
From: GreatZP <greatzp@greatzp.cn>
Date: Tue, 5 Sep 2023 19:37:06 +0800
Subject: [PATCH 3/3] =?UTF-8?q?refactor(theme):=20gitgraph=E4=B8=BB?=
 =?UTF-8?q?=E9=A2=98=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/git-graph/src/git-graph-class.ts    | 42 +++++++++++--------
 .../devui/git-graph/src/git-graph.tsx         |  1 +
 2 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/packages/devui-vue/devui/git-graph/src/git-graph-class.ts b/packages/devui-vue/devui/git-graph/src/git-graph-class.ts
index c620811109..64d57568ae 100644
--- a/packages/devui-vue/devui/git-graph/src/git-graph-class.ts
+++ b/packages/devui-vue/devui/git-graph/src/git-graph-class.ts
@@ -1,5 +1,5 @@
-import { cloneDeep } from "lodash";
-import { CommitInfo, GitGraphData } from "./git-graph-types";
+import { cloneDeep } from 'lodash';
+import { CommitInfo, GitGraphData } from './git-graph-types';
 
 export class GitGraph {
   element?: HTMLElement;
@@ -46,7 +46,7 @@ export class GitGraph {
     '#69DBB9',
     '#76DBEF',
     '#B1CE4F',
-    '#5DA4DC'
+    '#5DA4DC',
   ];
   toolTipList: any;
 
@@ -59,8 +59,12 @@ export class GitGraph {
     this.minutesAgo = options.params.minutesAgo || this.minutesAgo;
     this.aMinutesAgo = options.params.aMinutesAgo || this.aMinutesAgo;
     this.maxNameLength = options.params.maxNameLength || 25;
+    this.preStart = 1;
+    const commits = cloneDeep(this.options.data.commits).map((commit) => {
+      commit.hasDrawn = false;
+      return commit;
+    });
 
-    const commits = cloneDeep(this.options.data.commits);
     this.prepareData(commits);
     return this.buildGraph('refName');
   }
@@ -139,8 +143,8 @@ export class GitGraph {
           x: this.offsetX + this.unitSpace * this.mspace + 56,
           y: this.offsetY + this.unitTime * mm - 22,
           'font-size': '12px',
-          fill: '#999',
-          'text-anchor': 'start'
+          fill: this.isDark ? '#8f93a3' : '#717580',
+          'text-anchor': 'start',
         };
         this.setNodeAttr(text, attrs);
         const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
@@ -154,7 +158,7 @@ export class GitGraph {
   }
 
   setNodeAttr(node: Element, attrs: any) {
-    Object.keys(attrs).forEach(key => {
+    Object.keys(attrs).forEach((key) => {
       node.setAttribute(key, attrs[key]);
     });
   }
@@ -238,7 +242,7 @@ export class GitGraph {
       fill: '#fff',
       strokeWidth: 1,
       stroke: this.colors[commit.space],
-      style: 'cursor: pointer;'
+      style: 'cursor: pointer;',
     };
     this.setNodeAttr(circle, attrs);
     this.svg.appendChild(circle);
@@ -254,7 +258,7 @@ export class GitGraph {
       href: commit.author.avatar_url,
       x: avatar_box_x,
       y: avatar_box_y,
-      style: 'clip-path: circle(50%)'
+      style: 'clip-path: circle(50%)',
     };
     this.setNodeAttr(img, imgAttrs);
 
@@ -274,7 +278,7 @@ export class GitGraph {
       d: route.join(' '),
       stroke: '#ccc',
       fill: 'none',
-      'stroke-width': 2
+      'stroke-width': 2,
     };
     this.setNodeAttr(line1, lineAttrs1);
     this.svg.appendChild(line1);
@@ -283,7 +287,7 @@ export class GitGraph {
     const lineAttrs2 = {
       d: route.join(' '),
       stroke: '#ccc',
-      'stroke-width': 2
+      'stroke-width': 2,
     };
     this.setNodeAttr(line2, lineAttrs2);
     this.svg.appendChild(line2);
@@ -394,7 +398,7 @@ export class GitGraph {
       y: y + 4,
       'text-anchor': 'start',
       fill: 'none',
-      style: 'font-size: 10px;'
+      style: 'font-size: 10px;',
     };
 
     this.setNodeAttr(text, textAttrs);
@@ -488,7 +492,7 @@ export class GitGraph {
     this.setNodeAttr(resText, {
       x,
       y,
-      ...attrs
+      ...attrs,
     });
     const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
     tspan.appendChild(document.createTextNode(text));
@@ -521,10 +525,12 @@ export class GitGraph {
       'text-anchor': 'start',
     });
 
-    const branchText = commit.branch ? this.getText(x + 70, y + 35, commit.branch, {
-      font: '12px Arial',
-      fill: isDark ? '#73788a' : '#71757f',
-    }) : null;
+    const branchText = commit.branch
+      ? this.getText(x + 70, y + 35, commit.branch, {
+          font: '12px Arial',
+          fill: isDark ? '#73788a' : '#71757f',
+        })
+      : null;
 
     const strList = commit.message.split('\n');
     if (strList.length > 10) {
@@ -576,7 +582,7 @@ export class GitGraph {
     });
     textArr.unshift(rectShadow);
 
-    textArr.forEach(t => {
+    textArr.forEach((t) => {
       this.svg.appendChild(t);
     });
     boxWidth = messageText.getBBox().width + 20 > boxWidth ? messageText.getBBox().width + 20 : boxWidth;
diff --git a/packages/devui-vue/devui/git-graph/src/git-graph.tsx b/packages/devui-vue/devui/git-graph/src/git-graph.tsx
index 0f0f9d0e91..f6b0ead566 100644
--- a/packages/devui-vue/devui/git-graph/src/git-graph.tsx
+++ b/packages/devui-vue/devui/git-graph/src/git-graph.tsx
@@ -11,6 +11,7 @@ export default defineComponent({
     const graph = new GitGraph();
     const initGraph = (element: HTMLElement, options: GitGraphData) => {
       if (element && options) {
+        element.innerHTML = '';
         graph.load(element, options, isDarkMode.value);
       }
     };