feat: 夜间模式精修

open-isle-cli/src/assets/global.css

@@ -9,10 +9,13 @@
   --menu-background-color: white;
   --background-color: white;
   --menu-border-color: lightgray;
+  --normal-border-color: lightgray;
   --menu-selected-background-color: rgba(208, 250, 255, 0.659);
   --menu-text-color: black;
   --scroller-background-color: rgba(130, 175, 180, 0.5);
   --normal-background-color: rgb(241, 241, 241);
+  --login-background-color: rgb(241, 241, 241);
+  --login-background-color-hover: #e0e0e0;
   --text-color: black;
   --menu-width: 200px;
   --page-max-width: 1200px;
@@ -22,13 +25,18 @@
 [data-theme='dark'] {
   --header-background-color: #2b2b2b;
   --header-border-color: #555;
+  --primary-color: rgb(17, 182, 197);
+  --primary-color-hover: rgb(13, 137, 151);
   --header-text-color: white;
   --menu-background-color: #333;
   --background-color: #333;
   --menu-border-color: #555;
+  --normal-border-color: #555;
   --menu-selected-background-color: rgba(255, 255, 255, 0.1);
   --menu-text-color: white;
-  --normal-background-color: #121212;
+  --normal-background-color: #000000;
+  --login-background-color: #575757;
+  --login-background-color-hover: #717171;
   --text-color: #eee;
   --article-info-background-color: #747373;
 }
@@ -46,19 +54,22 @@ body {
 /*************************
  * Vditor 自定义皮肤覆写
  *************************/
-.vditor {
-  /* 去掉整体背景与边框，让它融入父容器 */
+ 
+/* .vditor {
   --textarea-background-color: transparent;
   border: none !important;
   box-shadow: none !important;
 }
 
-/* 工具栏彻底无边框、透明背景 */
+.vditor-reset {
+  color: var(--text-color);
+}
+
 .vditor-toolbar {
   background: transparent !important;
   border: none !important;
   box-shadow: none !important;
-}
+} */
 
 /*************************
  * Markdown 渲染样式

open-isle-cli/src/components/BaseInput.vue

@@ -57,7 +57,7 @@ export default {
   width: calc(100% - 40px);
   padding: 15px 20px;
   border-radius: 10px;
-  border: 1px solid #ccc;
+  border: 1px solid var(--normal-border-color);
   gap: 10px;
 }
 

open-isle-cli/src/components/Dropdown.vue

@@ -213,7 +213,7 @@ export default {
 }
 
 .dropdown-display {
-  border: 1px solid #ccc;
+  border: 1px solid var(--normal-border-color);
   border-radius: 5px;
   padding: 5px 10px;
   cursor: pointer;
@@ -233,7 +233,7 @@ export default {
   left: 0;
   right: 0;
   background: var(--background-color);
-  border: 1px solid #ccc;
+  border: 1px solid var(--normal-border-color);
   z-index: 10;
   max-height: 200px;
   min-width: 350px;
@@ -251,7 +251,7 @@ export default {
   display: flex;
   align-items: center;
   padding: 5px;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid var(--normal-border-color);
 }
 
 .dropdown-search input {
@@ -272,11 +272,11 @@ export default {
 }
 
 .dropdown-option.selected {
-  background-color: #f5f5f5;
+  background-color: var(--menu-selected-background-color);
 }
 
 .dropdown-option:hover {
-  background-color: #f5f5f5;
+  background-color: var(--menu-selected-background-color);
 }
 
 .option-icon {

open-isle-cli/src/components/DropdownMenu.vue

@@ -72,7 +72,7 @@ export default {
   top: 100%;
   right: 0;
   background-color: var(--menu-background-color);
-  border: 1px solid #ddd;
+  border: 1px solid var(--normal-border-color);
   border-radius: 4px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
   z-index: 10;

open-isle-cli/src/components/PostEditor.vue

@@ -77,12 +77,6 @@ export default {
       vditorInstance.value = new Vditor(props.editorId, {
         placeholder: '请输入正文...',
         height: 450,
-        theme: 'classic',
-        preview: {
-          theme: { current: 'light' },
-          actions: [],
-          markdown: { toc: false }
-        },
         toolbar: [
           'emoji',
           'bold',
@@ -148,7 +142,7 @@ export default {
 
 <style scoped>
 .post-editor-container {
-  border: 1px solid #e2e2e2;
+  border: 1px solid var(--normal-border-color);
   position: relative;
 }
 
@@ -158,7 +152,7 @@ export default {
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgba(255, 255, 255, 0.6);
+  background: var(--menu-selected-background-color);
   display: flex;
   align-items: center;
   justify-content: center;

open-isle-cli/src/views/AboutPageView.vue

@@ -70,7 +70,7 @@ export default {
 .about-tabs {
   display: flex;
   flex-direction: row;
-  border-bottom: 1px solid #e0e0e0;
+  border-bottom: 1px solid var(--normal-border-color);
   margin-bottom: 20px;
 }
 

open-isle-cli/src/views/HomePageView.vue

@@ -420,7 +420,7 @@ export default {
   align-items: center;
   width: 100%;
   color: gray;
-  border-bottom: 1px solid lightgray;
+  border-bottom: 1px solid var(--normal-border-color);
   padding-bottom: 10px;
 }
 
@@ -429,7 +429,7 @@ export default {
   grid-template-columns: var(--main-width) var(--avatars-width) var(--comments-width) var(--views-width) var(--activity-width);
   align-items: center;
   width: 100%;
-  border-bottom: 1px solid lightgray;
+  border-bottom: 1px solid var(--normal-border-color);
 }
 
 .header-item.avatars {

open-isle-cli/src/views/LoginPageView.vue

@@ -139,7 +139,7 @@ export default {
   align-items: center;
   justify-content: center;
   width: calc(40% - 120px);
-  border-right: 1px solid #ccc;
+  border-right: 1px solid var(--normal-border-color);
   padding-right: 120px;
 }
 
@@ -238,15 +238,15 @@ export default {
   justify-content: center;
   padding: 10px 20px;
   min-width: 150px;
-  background-color: var(--normal-background-color);
-  border: 1px solid #ccc;
+  background-color: var(--login-background-color);
+  border: 1px solid var(--normal-border-color);
   border-radius: 10px;
   cursor: pointer;
   gap: 10px;
 }
 
 .login-page-button:hover {
-  background-color: #e0e0e0;
+  background-color: var(--login-background-color-hover);
 }
 
 .login-page-button-icon {

open-isle-cli/src/views/MessagePageView.vue

@@ -647,7 +647,7 @@ export default {
 .message-tabs {
   display: flex;
   flex-direction: row;
-  border-bottom: 1px solid #e0e0e0;
+  border-bottom: 1px solid var(--normal-border-color);
 }
 
 .message-tab-item {

open-isle-cli/src/views/ProfileView.vue

@@ -476,7 +476,6 @@ export default {
   width: 200px;
   height: 200px;
   border-radius: 50%;
-  background-color: lightblue;
   object-fit: cover;
 }
 
@@ -534,8 +533,8 @@ export default {
   flex-direction: row;
   padding: 0 20px;
   gap: 20px;
-  border-top: 1px solid #e0e0e0;
-  border-bottom: 1px solid #e0e0e0;
+  border-top: 1px solid var(--normal-border-color);
+  border-bottom: 1px solid var(--normal-border-color);
 }
 
 .profile-info-item {
@@ -559,7 +558,7 @@ export default {
   display: flex;
   flex-direction: row;
   padding: 0 20px;
-  border-bottom: 1px solid #e0e0e0;
+  border-bottom: 1px solid var(--normal-border-color);
 }
 
 .profile-tabs-item {
@@ -681,7 +680,7 @@ export default {
 .follow-tabs {
   display: flex;
   flex-direction: row;
-  border-bottom: 1px solid #e0e0e0;
+  border-bottom: 1px solid var(--normal-border-color);
   margin-bottom: 10px;
 }
 

open-isle-cli/src/views/SignupPageView.vue

@@ -238,7 +238,7 @@ export default {
   align-items: center;
   justify-content: center;
   width: calc(40% - 120px);
-  border-right: 1px solid #ccc;
+  border-right: 1px solid var(--normal-border-color);
   padding-right: 120px;
 }
 
@@ -274,7 +274,7 @@ export default {
   width: calc(100% - 40px);
   padding: 15px 20px;
   border-radius: 10px;
-  border: 1px solid #ccc;
+  border: 1px solid var(--normal-border-color);
   gap: 10px;
   margin-bottom: 20px;
 }
@@ -336,8 +336,8 @@ export default {
   align-items: center;
   justify-content: center;
   padding: 10px 20px;
-  background-color: var(--normal-background-color);
-  border: 1px solid #ccc;
+  background-color: var(--login-background-color);
+  border: 1px solid var(--normal-border-color);
   border-radius: 10px;
   cursor: pointer;
   min-width: 150px;
@@ -345,7 +345,7 @@ export default {
 }
 
 .signup-page-button:hover {
-  background-color: #e0e0e0;
+  background-color: var(--login-background-color-hover);
 }
 
 .signup-page-button-icon {