feat: night mode

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

@@ -16,6 +16,7 @@
   --text-color: black;
   --menu-width: 200px;
   --page-max-width: 1200px;
+  --article-info-background-color: #f0f0f0;
 }
 
 [data-theme='dark'] {
@@ -23,12 +24,13 @@
   --header-border-color: #555;
   --header-text-color: white;
   --menu-background-color: #333;
-  --background-color: #121212;
+  --background-color: #333;
   --menu-border-color: #555;
   --menu-selected-background-color: rgba(255, 255, 255, 0.1);
   --menu-text-color: white;
   --normal-background-color: #121212;
   --text-color: #eee;
+  --article-info-background-color: #747373;
 }
 
 body {

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

@@ -33,5 +33,21 @@ export default {
   gap: 10px;
 }
 
+
+.article-info-item {
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+  align-items: center;
+  font-size: 14px;
+  padding: 2px 4px;
+  background-color: var(--article-info-background-color);
+  border-radius: 4px;
+}
+
+.article-info-item-img {
+  width: 16px;
+  height: 16px;
+}
 </style>
 

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

@@ -76,5 +76,7 @@ export default {
   width: 100%;
   font-size: 16px;
   resize: none; 
+  background-color: transparent;
+  color: var(--text-color);
 }
 </style>

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

@@ -46,7 +46,10 @@
         class="reply-toggle"
         @click="toggleReplies"
       >
-        {{ showReplies ? '收起' : '展开' }}{{ comment.reply.length }}条回复
+        <i v-if="showReplies" class="fas fa-chevron-up reply-toggle-icon"></i> 
+        <i v-else class="fas fa-chevron-down reply-toggle-icon"></i> 
+        
+        {{ comment.reply.length }}条回复
       </div>
       <div v-if="showReplies" class="reply-list">
         <BaseTimeline :items="comment.reply" >
@@ -191,6 +194,10 @@ export default CommentItem
   animation: highlight 2s;
 }
 
+.reply-toggle-icon {
+  margin-right: 5px;
+}
+
 @keyframes highlight {
   from { background-color: yellow; }
   to { background-color: transparent; }

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

@@ -32,7 +32,7 @@
         <i class="fas fa-caret-down dropdown-caret"></i>
       </slot>
     </div>
-    <div v-if="open && (loading || filteredOptions.length > 0)" :class="['dropdown-menu', menuClass]">
+    <div v-if="open && (loading || filteredOptions.length > 0 || showSearch)" :class="['dropdown-menu', menuClass]">
       <div v-if="showSearch" class="dropdown-search">
         <i class="fas fa-search search-icon"></i>
         <input type="text" v-model="search" placeholder="搜索" />
@@ -221,7 +221,7 @@ export default {
   top: 100%;
   left: 0;
   right: 0;
-  background: white;
+  background: var(--background-color);
   border: 1px solid #ccc;
   z-index: 10;
   max-height: 200px;
@@ -247,6 +247,8 @@ export default {
   border: none;
   outline: none;
   margin-left: 5px;
+  background-color: var(--menu-background-color);
+  color: var(--text-color);
 }
 
 .dropdown-option {

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

@@ -198,6 +198,7 @@ export default {
   width: 32px;
   height: 32px;
   border-radius: 50%;
+  background-color: lightgray;
 }
 
 .dropdown-icon {
@@ -208,7 +209,7 @@ export default {
   position: absolute;
   top: 40px;
   right: 0;
-  background-color: white;
+  background-color: var(--menu-background-color);
   border: 1px solid #ddd;
   border-radius: 4px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
@@ -221,7 +222,7 @@ export default {
 }
 
 .dropdown-item:hover {
-  background-color: #f2f2f2;
+  background-color: var(--menu-selected-background-color);
 }
 
 </style>

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

@@ -149,6 +149,7 @@ export default {
 .menu-footer-btn {
   width: 30px;
   height: 30px;
+  margin-right: 5px;
   display: flex;
   align-items: center;
   justify-content: center;

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

@@ -5,7 +5,7 @@
       <template #display="{ toggle, setSearch }">
         <div class="search-input" @click="toggle">
           <i class="search-input-icon fas fa-search"></i>
-          <input type="text" v-model="keyword" placeholder="Search" @focus="toggle" @input="setSearch(keyword)" />
+          <input class="text-input" v-model="keyword" placeholder="Search" @focus="toggle" @input="setSearch(keyword)" />
         </div>
       </template>
       <template #option="{ option }">
@@ -103,7 +103,9 @@ export default {
   width: 100%;
 }
 
-.search-input input {
+.text-input {
+  background-color: var(--menu-background-color);
+  color: var(--text-color);
   border: none;
   outline: none;
   width: 100%;

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

@@ -53,11 +53,7 @@
           </router-link>
           <div class="article-item-description main-item">{{ sanitizeDescription(article.description) }}</div>
           <div class="article-info-container main-item">
-            <div class="article-info-item">
-              <img class="article-info-item-img" :src="article.category.smallIcon" alt="category">
-              <div class="article-info-item-text">{{ article.category.name }}</div>
-            </div>
-
+            <ArticleTags :tags="[article.category]" />
             <ArticleTags :tags="article.tags" />
           </div>
         </div>
@@ -292,13 +288,7 @@ export default {
   flex-direction: row;
   align-items: center;
   gap: 10px;
-}
-
-.article-info-item {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 10px;
+  margin-bottom: 10px;
 }
 
 .article-tags-container {

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

@@ -7,11 +7,7 @@
       <div class="article-title-container">
         <div class="article-title">{{ title }}</div>
         <div class="article-info-container">
-          <div class="article-info-item">
-            <img class="article-info-item-img" :src="category.smallIcon" alt="category">
-            <div class="article-info-item-text">{{ category.name }}</div>
-          </div>
-
+          <ArticleTags :tags="[category]" />
           <ArticleTags :tags="tags" />
         </div>
       </div>
@@ -447,28 +443,6 @@ export default {
   align-items: center;
 }
 
-.article-info-item {
-  display: flex;
-  flex-direction: row;
-  gap: 5px;
-  align-items: center;
-}
-
-.article-info-item {
-  display: flex;
-  flex-direction: row;
-  gap: 5px;
-  align-items: center;
-  font-size: 14px;
-  padding: 2px 4px;
-  background-color: #f0f0f0;
-}
-
-.article-info-item-img {
-  width: 16px;
-  height: 16px;
-}
-
 .info-content-container {
   display: flex;
   flex-direction: row;

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

@@ -266,6 +266,8 @@ export default {
   position: relative;
   display: inline-block;
   cursor: pointer;
+  background-color: lightgray;
+  border-radius: 50%;
 }
 
 /* 隐藏默认文件选择按钮 */