Merge pull request #55 from OVINC-CN/style_dark

style(theme): optimize for dark theme
OVINC-CN · Jan 2, 2025 · d98acf2 · d98acf2
2 parents 08f0849 + b4eac1f
commit d98acf2
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 18 deletions.
diff --git a/src/App.css b/src/App.css
@@ -4,15 +4,15 @@ body {
     --shadow2-center: 0 0 10px rgba(0, 0, 0, 0.1);
     --shadow3-center:0 0 20px rgba(0, 0, 0, 0.1);
     --message-content-right: var(--arcoblue-5);
-    --message-content-right-code: var(--arcoblue-1);
+    --message-content-right-code: rgb(var(--arcoblue-1));
 }
 body[arco-theme='dark'] {
     --shadow-special: 0 0 1px rgba(0, 0, 0, 0.3);
     --shadow1-center: 0 -2px 5px rgba(0, 0, 0, 0.1);
     --shadow2-center: 0 0 10px rgba(0, 0, 0, 0.1);
     --shadow3-center:0 0 20px rgba(0, 0, 0, 0.1);
     --message-content-right: var(--arcoblue-1);
-    --message-content-right-code: var(--arcoblue-2);
+    --message-content-right-code: var(--color-neutral-2);
 }
 
 html, body, #app {

diff --git a/src/components/MessageContent.vue b/src/components/MessageContent.vue
@@ -150,11 +150,6 @@ const onImageClick = (images, index) => emits('onImageClick', images[index]);
   border-radius: var(--border-radius-medium);
 }
 
-.v-md-preview :deep(.github-markdown-body) pre code,
-.v-md-preview :deep(.github-markdown-body) pre tt {
-  color: unset;
-}
-
 .v-md-preview :deep(.github-markdown-body) div[class*=v-md-pre-wrapper-] {
   background: var(--color-fill-3);
   border-radius: var(--border-radius-medium);
@@ -183,11 +178,6 @@ const onImageClick = (images, index) => emits('onImageClick', images[index]);
   background-color: rgb(var(--orange-1));
 }
 
-.v-md-preview-u :deep(.github-markdown-body) a {
-  color: white;
-  text-decoration: underline;
-}
-
 .v-md-preview-u :deep(.github-markdown-body) h6 {
   color: unset;
 }
@@ -203,7 +193,7 @@ const onImageClick = (images, index) => emits('onImageClick', images[index]);
 .v-md-preview-u :deep(.github-markdown-body) code,
 .v-md-preview-u :deep(.github-markdown-body) pre,
 .v-md-preview-u :deep(.github-markdown-body) div[class*=v-md-pre-wrapper-] {
-  background: rgb(var(--message-content-right-code));
+  background: var(--message-content-right-code);
 }
 
 .v-md-preview-u :deep(.github-markdown-body) code {
@@ -221,4 +211,16 @@ const onImageClick = (images, index) => emits('onImageClick', images[index]);
 .message-content-content-icon-refresh:hover {
   color: var(--color-neutral-10);
 }
+
+.v-md-preview :deep(.github-markdown-body) .hljs-keyword,
+.v-md-preview :deep(.github-markdown-body) .github-markdown-body .hljs-selector-tag,
+.v-md-preview :deep(.github-markdown-body) .github-markdown-body .hljs-subst {
+  color: var(--color-text-2)
+}
+
+.v-md-preview :deep(.github-markdown-body) pre code,
+.v-md-preview :deep(.github-markdown-body) pre tt {
+  color: var(--color-text-1);
+  font-family: Fira Code;
+}
 </style>
diff --git a/src/views/Chat.vue b/src/views/Chat.vue
@@ -355,8 +355,7 @@ const setPromptForm = (data) => promptForm.value = data;
             {{ $t('StartNewChat') }}
           </a-button>
           <a-button
-            :type="historySync ? 'primary' : 'secondary'"
-            :status="historySync ? 'success' : 'normal'"
+            :style="{backgroundColor: historySync ? 'rgb(var(--green-3))' : '', color: 'white'}"
             @click="showHistorySyncConfig"
           >
             <template #icon>
@@ -422,7 +421,7 @@ const setPromptForm = (data) => promptForm.value = data;
         direction="vertical"
         :size="10"
       >
-        <div style="font-size: 14px; color: rgb(var(--orange-6))">
+        <div style="font-size: 14px; color: rgb(var(--orange-4))">
           {{ $t('SyncHistoryTips') }}
         </div>
         <a-input
@@ -435,15 +434,13 @@ const setPromptForm = (data) => promptForm.value = data;
         <a-space class="sync-history-config-button-box">
           <a-button
             v-if="!historySync"
-            status="success"
             :disabled="historySync || !historySyncEncrypt"
             @click="enableHistorySync"
           >
             {{ $t('EnableSync') }}
           </a-button>
           <a-button
             v-else
-            status="warning"
             :disabled="!historySync"
             @click="disableHistorySync"
           >