Add dark mode support (#16)

AceDataCloud · Apr 4, 2024 · b8970e1 · b8970e1
1 parent ddef4ce
commit b8970e1
Show file tree

Hide file tree

Showing 46 changed files with 247 additions and 166 deletions.
diff --git a/change/@acedatacloud-hub-18e67d97-6a7d-45c1-9c09-eabcb36e2b20.json b/change/@acedatacloud-hub-18e67d97-6a7d-45c1-9c09-eabcb36e2b20.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "add dark mode support",
+  "packageName": "@acedatacloud/hub",
+  "email": "cqc@cuiqingcai.com",
+  "dependentChangeType": "patch"
+}
diff --git a/package.json b/package.json
@@ -52,6 +52,7 @@
     "uuid": "^8.3.2",
     "vue": "^3.2.6",
     "vue-codemirror": "^6.1.1",
+    "vue-dark-switch": "^1.0.6",
     "vue-i18n": "^9.1.7",
     "vue-qrcode": "^2.2.0",
     "vue-router": "^4.0.11",

diff --git a/src/assets/scss/_common.scss b/src/assets/scss/_common.scss
@@ -7,6 +7,18 @@ body {
   overflow: hidden;
 }
 
+html,
+html.dark,
+:root {
+  --el-color-primary: #277186;
+  --el-color-primary-light-3: #689caa;
+  --el-color-primary-light-5: #93b8c3;
+  --el-color-primary-light-7: #bed4db;
+  --el-color-primary-light-8: #d4e3e7;
+  --el-color-primary-light-9: #e9f1f3;
+  --el-color-primary-dark-2: #1f5a6b;
+}
+
 * {
   box-sizing: border-box;
 }

diff --git a/src/assets/scss/_element.scss b/src/assets/scss/_element.scss
@@ -1,14 +1,4 @@
-@forward 'element-plus/theme-chalk/src/common/var.scss' with (
-  $colors: (
-    'primary': (
-      'base': #277186
-    ),
-    'danger': (
-      'base': #ec4450
-    )
-  )
-);
-
 $--font-path: 'element-plus/theme-chalk/src/fonts';
 
 @import 'element-plus/theme-chalk/src/index.scss';
+@import 'element-plus/theme-chalk/dark/css-vars.css';
diff --git a/src/components/application/Status.vue b/src/components/application/Status.vue
@@ -144,7 +144,6 @@ export default defineComponent({
 .info {
   font-size: 14px;
   color: var(--el-text-color-regular);
-  // display: inline-block;
   text-align: center;
 }
 .actions {

diff --git a/src/components/chat/AnsweringMark.vue b/src/components/chat/AnsweringMark.vue
@@ -34,7 +34,7 @@ export default defineComponent({
   width: 2px;
   height: 16px;
   margin-top: 3px;
-  background-color: var(--el-color-black);
+  background-color: var(--el-text-color-primary);
   animation: blink 1s infinite;
 }
 </style>
diff --git a/src/components/chat/InputBox.vue b/src/components/chat/InputBox.vue
@@ -34,7 +34,6 @@
     </span>
     <el-input
       v-model="questionValue"
-      :rows="3"
       :disabled="disabled"
       class="input"
       type="textarea"
@@ -143,6 +142,8 @@ export default defineComponent({
   position: relative;
   .input {
     textarea {
+      height: auto;
+      max-height: 100px;
       border: none;
       background: none;
       box-shadow: none;
@@ -165,7 +166,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .input-box {
   width: 100%;
-  border: 1px solid #eee;
+  border: 1px solid var(--el-border-color);
   border-radius: 10px;
   background: none;
   box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
@@ -175,7 +176,7 @@ export default defineComponent({
       .btn-upload {
         cursor: not-allowed;
         .icon-attachment {
-          color: #eee;
+          color: var(--el-text-color-disabled);
         }
       }
     }
@@ -195,20 +196,20 @@ export default defineComponent({
       left: 10px;
       .icon-attachment {
         font-size: 14px;
-        color: #666;
+        color: var(--el-text-color-primary);
       }
     }
     &.btn-send {
       right: 15px;
       &.disabled {
         .icon-send {
-          color: #eee;
+          color: var(--el-text-color-disabled);
         }
         cursor: not-allowed;
       }
       .icon-send {
         font-size: 16px;
-        color: #666;
+        color: var(--el-text-color-primary);
       }
     }
   }

diff --git a/src/components/chat/IntroductionItem.vue b/src/components/chat/IntroductionItem.vue
@@ -25,8 +25,9 @@ export default defineComponent({
 <style lang="scss" scoped>
 .introduction-item {
   font-size: 14px;
-  background-color: #eee;
-  color: #333;
+  background-color: var(--el-fill-color-extra-light);
+  color: var(--el-text-color-primary);
+  border: 1px solid var(--el-border-color-lighter);
   padding: 10px 20px;
   border-radius: 20px;
 }

diff --git a/src/components/chat/Message.vue b/src/components/chat/Message.vue
@@ -158,7 +158,7 @@ export default defineComponent({
     align-items: start;
     .content {
       background-color: var(--el-bg-color-page);
-      color: var(--el-color-black);
+      color: var(--el-text-color-primary);
       border-bottom-left-radius: 0;
     }
   }

diff --git a/src/components/chat/ModelSelector.vue b/src/components/chat/ModelSelector.vue
@@ -130,23 +130,21 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .model-selector {
-  background-color: #ececf1;
+  background-color: var(--el-bg-color-page);
   padding: 7px 6px;
   border-radius: 15px;
   margin-bottom: 5px;
   .group {
     padding: 20px 30px;
-    color: black;
+    color: var(--el-text-color-primary);
     border: none;
     border-radius: 10px;
     margin: 0 3px;
     background-color: inherit;
     &:hover,
-    &:focus {
-      background-color: inherit;
-    }
+    &:focus,
     &.active {
-      background-color: white;
+      background-color: var(--el-fill-color-extra-light);
     }
     .icon {
       display: inline-block;
@@ -161,7 +159,7 @@ export default defineComponent({
     .fa-chevron-down {
       margin-left: 5px;
       font-weight: 100;
-      color: #999;
+      color: var(--el-text-color-primary);
       transform: scale(0.8);
     }
   }
@@ -171,6 +169,7 @@ export default defineComponent({
     .item {
       display: flex;
       flex-direction: row;
+
       .icon {
         width: 15px;
         display: flex;
@@ -190,12 +189,12 @@ export default defineComponent({
         .name {
           font-size: 14px;
           font-weight: bold;
-          color: #333;
+          color: var(--el-text-color-primary);
           margin: 0;
         }
         .description {
           font-size: 12px;
-          color: #999;
+          color: var(--el-text-color-secondary);
           margin: 0;
         }
       }

diff --git a/src/components/chat/SidePanel.vue b/src/components/chat/SidePanel.vue
@@ -149,7 +149,7 @@ export default defineComponent({
   padding: 15px;
   width: 300px;
   height: 100%;
-  border-right: 1px solid #eee;
+  border-right: 1px solid var(--el-border-color);
   overflow-y: scroll;
 
   .conversations {
@@ -164,15 +164,15 @@ export default defineComponent({
       flex-direction: row;
       padding: 10px;
       margin-bottom: 5px;
-      border: 1px dashed hsl(0, 0%, 93%);
+      border: 1px dashed var(--el-border-color);
       line-height: 30px;
       border-radius: 10px;
-      color: #666;
+      color: var(--el-text-color-primary);
       cursor: pointer;
 
       &.active,
       &:hover {
-        background-color: #eee;
+        background-color: var(--el-fill-color-extra-light);
       }
 
       .icons {
@@ -189,10 +189,11 @@ export default defineComponent({
         overflow: hidden;
         text-overflow: ellipsis;
         padding-right: 8px;
-        color: #666;
+        color: var(--el-text-color-primary);
       }
       .operations {
         width: 40px;
+        color: var(--el-text-color-regular);
         .icon {
           cursor: pointer;
           font-size: 14px;

diff --git a/src/components/chatdoc/AnsweringMark.vue b/src/components/chatdoc/AnsweringMark.vue
@@ -34,7 +34,7 @@ export default defineComponent({
   width: 2px;
   height: 16px;
   margin-top: 3px;
-  background-color: var(--el-color-black);
+  background-color: var(--el-text-color-primary);
   animation: blink 1s infinite;
 }
 </style>
diff --git a/src/components/chatdoc/Conversations.vue b/src/components/chatdoc/Conversations.vue
@@ -143,7 +143,7 @@ export default defineComponent({
   padding: 15px;
   width: 300px;
   height: 100%;
-  border-right: 1px solid #eee;
+  border-right: 1px solid var(--el-border-color);
   overflow-y: scroll;
 
   .conversations {
@@ -158,15 +158,15 @@ export default defineComponent({
       flex-direction: row;
       padding: 10px;
       margin-bottom: 5px;
-      border: 1px dashed hsl(0, 0%, 93%);
+      border: 1px dashed var(--el-border-color);
       line-height: 30px;
       border-radius: 10px;
-      color: #666;
+      color: var(--el-text-color-primary);
       cursor: pointer;
 
       &.active,
       &:hover {
-        background-color: #eee;
+        background-color: var(--el-fill-color-extra-light);
       }
 
       .icons {
@@ -183,10 +183,11 @@ export default defineComponent({
         overflow: hidden;
         text-overflow: ellipsis;
         padding-right: 8px;
-        color: #666;
+        color: var(--el-text-color-primary);
       }
       .operations {
         width: 40px;
+        color: var(--el-text-color-regular);
         .icon {
           cursor: pointer;
           font-size: 14px;

diff --git a/src/components/chatdoc/CreateRepository.vue b/src/components/chatdoc/CreateRepository.vue
@@ -88,7 +88,7 @@ export default defineComponent({
   height: 50px;
   border-radius: 50%;
   margin-top: 5px;
-  background-color: #eee;
+  background-color: var(--el-bg-color-page);
   margin-bottom: 0;
 }
 

diff --git a/src/components/chatdoc/InputBox.vue b/src/components/chatdoc/InputBox.vue
@@ -12,7 +12,6 @@
     </span>
     <el-input
       v-model="questionValue"
-      :rows="3"
       :disabled="disabled"
       class="input"
       type="textarea"
@@ -89,6 +88,8 @@ export default defineComponent({
 .input-box {
   .input {
     textarea {
+      height: auto;
+      max-height: 100px;
       border: none;
       background: none;
       box-shadow: none;
@@ -112,7 +113,7 @@ export default defineComponent({
 .input-box {
   position: relative;
   width: 100%;
-  border: 1px solid #eee;
+  border: 1px solid var(--el-border-color);
   border-radius: 10px;
   background: none;
   box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
@@ -132,13 +133,13 @@ export default defineComponent({
       right: 15px;
       &.disabled {
         .icon-send {
-          color: #eee;
+          color: var(--el-text-color-disabled);
         }
         cursor: not-allowed;
       }
       .icon-send {
         font-size: 16px;
-        color: #666;
+        color: var(--el-text-color-primary);
       }
     }
   }
@@ -147,7 +148,7 @@ export default defineComponent({
 .info {
   display: block;
   font-size: 12px;
-  color: #666;
+  color: var(--el-text-color-regular);
   margin-top: 5px;
   margin-left: 3px;
   margin-bottom: 0;

diff --git a/src/components/chatdoc/Message.vue b/src/components/chatdoc/Message.vue
@@ -140,7 +140,7 @@ export default defineComponent({
     align-items: start;
     .content {
       background-color: var(--el-bg-color-page);
-      color: var(--el-color-black);
+      color: var(--el-text-color-primary);
       border-bottom-left-radius: 0;
     }
   }

diff --git a/src/components/common/Chevron.vue b/src/components/common/Chevron.vue
@@ -32,7 +32,7 @@ export default defineComponent({
   border-radius: 50%;
   padding: 5px 6px;
   cursor: pointer;
-  color: var(--el-color-black);
-  background: var(--el-color-white);
+  background-color: inherit;
+  color: var(--el-text-color-primary);
 }
 </style>