feat: night mode

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%;