添加提示

src/lang/en-us.json

@@ -429,6 +429,7 @@
   "theme_selector_modal__dark_title": "dark theme",
   "theme_selector_modal__light_title": "Bright theme",
   "theme_selector_modal__title": "Follow system theme settings",
+  "theme_selector_modal__title_tip": "Note: You can set a light theme and a dark theme in advance, and then it will automatically switch to the corresponding theme you set in advance according to the light and dark theme colors of the system.",
   "theme_yellow": "Yellow",
   "user_api__allow_show_update_alert": "Allow update popup to show",
   "user_api__btn_export": "Export",

src/lang/zh-cn.json

@@ -429,6 +429,7 @@
   "theme_selector_modal__dark_title": "暗色主题",
   "theme_selector_modal__light_title": "亮色主题",
   "theme_selector_modal__title": "跟随系统主题设置",
+  "theme_selector_modal__title_tip": "注：你可以预先设置一个亮色主题及暗色主题，此后将根据系统的亮、暗主题色自动切换为你预先设置的相应主题。",
   "theme_yellow": "信口雌黄",
   "user_api__allow_show_update_alert": "允许显示更新弹窗",
   "user_api__btn_export": "导出",

src/lang/zh-tw.json

@@ -429,6 +429,7 @@
   "theme_selector_modal__dark_title": "暗色主題",
   "theme_selector_modal__light_title": "亮色主題",
   "theme_selector_modal__title": "跟隨系統主題設置",
+  "theme_selector_modal__title_tip": "注：你可以預先設置一個亮色主題及暗色主題，此後將根據系統的亮、暗主題色自動切換為你預先設置的相應主題。",
   "theme_yellow": "信口雌黃",
   "user_api__allow_show_update_alert": "允許顯示更新彈窗",
   "user_api__btn_export": "導出",

src/renderer/views/setting/components/ThemeSelectorModal.vue

@@ -15,6 +15,8 @@ material-modal(:show="modelValue" bg-close @close="$emit('update:modelValue', fa
           li(v-for="theme in themeDarks" :key="theme.id" :tips="$t('theme_' + theme.className)" @click="currentStting.theme.darkId = theme.id" :class="[theme.className, {[$style.active]: darkId == theme.id}]")
             span
             label {{$t('theme_' + theme.className)}}
+    div(:class="$style.note")
+      p {{$t('theme_selector_modal__title_tip')}}
 </template>
 
 <script>
@@ -57,6 +59,10 @@ export default {
   min-height: 0;
   // max-height: 100%;
   // overflow: hidden;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  min-height: 0;
   h2 {
     flex: none;
     font-size: 16px;
@@ -142,6 +148,18 @@ export default {
   }
 }
 
+.note {
+  padding: 8px 15px;
+  font-size: 13px;
+  line-height: 1.25;
+  color: @color-theme_2-font;
+  // p {
+  //   + p {
+  //     margin-top: 5px;
+  //   }
+  // }
+}
+
 each(@themes, {
   .theme {
     li {
@@ -155,6 +173,9 @@ each(@themes, {
       }
     }
   }
+  .note {
+    color: ~'@{color-@{value}-theme_2-font}';
+  }
 })
 
 </style>

src/renderer/views/setting/components/UserApiModal.vue

@@ -247,6 +247,10 @@ each(@themes, {
     .noitem {
       color: ~'@{color-@{value}-theme_2-font-label}';
     }
+
+    .note {
+      color: ~'@{color-@{value}-theme_2-font}';
+    }
   }
 })