style: optimize the color scheme

src/components/CodemirrorEditor/CssEditor.vue

@@ -104,7 +104,7 @@ function tabChanged(tabName: string | number) {
 
 <template>
   <transition enter-active-class="bounceInRight">
-    <div v-show="displayStore.isShowCssEditor" class="cssEditor-wrapper h-full flex flex-col border-l-1">
+    <div v-show="displayStore.isShowCssEditor" class="cssEditor-wrapper h-full flex flex-col border-l-2 border-gray/50">
       <Tabs
         v-model="store.cssContentConfig.active"
         @update:model-value="tabChanged"

src/components/CodemirrorEditor/EditorHeader/index.vue

@@ -102,7 +102,7 @@ function copy() {
 </script>
 
 <template>
-  <header class="header-container h-15 flex items-center justify-between px-5">
+  <header class="header-container h-15 flex items-center justify-between px-5 dark:bg-[#191c20]">
     <div class="space-x-2 flex">
       <Menubar class="menubar">
         <FileDropdown />

src/components/CodemirrorEditor/PostSlider.vue

@@ -57,14 +57,14 @@ function delPost() {
 
 <template>
   <div
-    class="overflow-hidden bg-gray/20 transition-width duration-300 dark:bg-gray/40"
+    class="overflow-hidden bg-gray/20 transition-width duration-300 dark:bg-[#191c20]"
     :class="{
       'w-0': !store.isOpenPostSlider,
       'w-50': store.isOpenPostSlider,
     }"
   >
     <nav
-      class="space-y-1 h-full overflow-auto p-2 transition-transform"
+      class="space-y-1 h-full overflow-auto border-r-2 border-gray/20 p-2 transition-transform"
       :class="{
         'translate-x-100': store.isOpenPostSlider,
         '-translate-x-full': !store.isOpenPostSlider,
@@ -93,10 +93,10 @@ function delPost() {
       </Dialog>
       <a
         v-for="(post, index) in store.posts" :key="post.title" href="#" :class="{
-          'bg-primary text-primary-foreground shadow-lg border-2 border-primary': store.currentPostIndex === index,
-          'dark:bg-primary-dark dark:text-primary-foreground-dark dark:border-primary-dark': store.currentPostIndex === index,
+          'bg-primary text-primary-foreground shadow-lg dark:border-1 border-primary': store.currentPostIndex === index,
+          'dark:bg-gray/30 dark:text-primary-foreground-dark dark:border-primary-dark': store.currentPostIndex === index,
         }"
-        class="hover:bg-primary/90 hover:text-primary-foreground dark:bg-muted dark:hover:bg-muted dark:hover:border-primary-dark h-8 w-full inline-flex items-center justify-start gap-2 whitespace-nowrap rounded px-2 text-sm transition-colors dark:text-white dark:hover:text-white"
+        class="hover:bg-primary/90 hover:text-primary-foreground dark:hover:border-primary-dark h-8 w-full inline-flex items-center justify-start gap-2 whitespace-nowrap rounded px-2 text-sm transition-colors dark:text-white dark:hover:bg-gray/20 dark:hover:text-white"
         @click="store.currentPostIndex = index"
       >
         <span class="line-clamp-1">{{ post.title }}</span>

src/components/CodemirrorEditor/RightSlider.vue

@@ -40,9 +40,9 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
 
 <template>
   <div
-    class="overflow-hidden bg-gray/20 transition-width duration-300 dark:bg-gray/40"
+    class="overflow-hidden border-l-2 border-gray/20 bg-gray/20 transition-width duration-300 dark:bg-[#191c20]"
     :class="{
-      'w-0': !store.isOpenRightSlider,
+      'w-0 border-l-0': !store.isOpenRightSlider,
       'w-100': store.isOpenRightSlider,
     }"
   >

src/views/CodemirrorEditor.vue

@@ -436,7 +436,7 @@ onMounted(() => {
         <CssEditor class="order-2 flex-1" />
         <RightSlider class="order-2" />
       </div>
-      <footer class="h-[30px] flex select-none items-center justify-end text-[12px]">
+      <footer class="h-[30px] flex select-none items-center justify-end px-4 text-[12px]">
         字数 {{ readingTime?.words }}， 阅读大约需 {{ Math.ceil(readingTime?.minutes ?? 0) }} 分钟
       </footer>
 
@@ -479,7 +479,6 @@ onMounted(() => {
 
 .container-main {
   overflow: hidden;
-  padding: 0 20px;
 }
 
 #output-wrapper {