refactor(theme): 组件和demo适配主题，提取使用theme的公共方法

packages/devui-vue/devui/code-review/src/code-review.scss

@@ -17,13 +17,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;
     }
 
     .diff-type {
@@ -178,6 +182,44 @@
       border: none;
     }
 
+    .d2h-emptyplaceholder.d2h-cntx.d2h-code-side-linenumber,
+    .d2h-emptyplaceholder.d2h-cntx {
+      background-color: #fafafa;
+    }
+
+    .d2h-code-side-linenumber,
+    .d2h-code-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,
+    .d2h-code-linenumber {
+      background-color: transparent;
+    }
+
+    .d2h-code-side-linenumber,
+    .d2h-code-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: '';
@@ -218,7 +260,8 @@
         overflow: hidden;
       }
 
-      .d2h-code-side-linenumber {
+      .d2h-code-side-linenumber,
+      .d2h-code-linenumber {
         position: static;
         display: table-cell;
       }
@@ -234,9 +277,111 @@
     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,
+    .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;
+
+      &.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,
+    .devui-code-review__content.side-by-side tr td:nth-of-type(3).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;
+    }
+  }
 }

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',
@@ -21,15 +22,15 @@ 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 });
     });
 
     provide(CodeReviewInjectionKey, { diffType, 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 ? (

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;
+    }
   }
 }

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;
     }
   }
 }

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;

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;
   }
@@ -106,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;
   }

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';
@@ -52,7 +52,7 @@ export default defineComponent({
       onPreviewMouseover,
     } = useEditorMd(props, ctx);
 
-    const { isDarkMode } = useEditorMdTheme(() => {});
+    const { isDarkMode } = useTheme();
 
     provide(EditorMdInjectionKey, {
       showFullscreen,

packages/devui-vue/devui/gantt/src/gantt.scss

@@ -18,6 +18,10 @@
       padding-top: 8px;
     }
   }
+
+  button {
+    color: $devui-text;
+  }
 }
 
 .tool {