优化 前端深色模式样式

tonecn/src/components/Console/FileOnline.vue

@@ -15,7 +15,8 @@ import 'ace-builds/src-noconflict/mode-typescript'
 import 'ace-builds/src-noconflict/mode-html'
 import 'ace-builds/src-noconflict/mode-css'
 import 'ace-builds/src-noconflict/mode-vue'
-import 'ace-builds/src-noconflict/theme-chrome';
+import 'ace-builds/src-noconflict/theme-github';
+import 'ace-builds/src-noconflict/theme-github_dark'
 import modeJsonUrl from 'ace-builds/src-noconflict/mode-json?url';
 ace.config.setModuleUrl('ace/mode/json', modeJsonUrl);
 import themeChromeUrl from 'ace-builds/src-noconflict/theme-chrome?url';
@@ -56,6 +57,24 @@ onMounted(async () => {
 
     await loadFullFileList();
     loadFileListShow();
+
+    // aceEditor 深色模式监听
+    // 监听主题变化
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', checkTheme);
+    // 初始检查
+    checkTheme();
+})
+
+const checkTheme = () => {
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        aceEditorTheme.value = 'github_dark'
+    } else {
+        aceEditorTheme.value = 'github'
+    }
+};
+
+onMounted(() => {
+    window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', checkTheme);
 })
 
 // 当前目录
@@ -340,6 +359,7 @@ const saveAceEditorContent = async () => {
         saveAceEditorContentLoading.value = false;
     }
 }
+const aceEditorTheme = ref('github');
 </script>
 <template>
     <div class="container w-full">
@@ -358,9 +378,10 @@ const saveAceEditorContent = async () => {
             <el-icon @click="Dirto(0)" class="cursor-pointer hover:text-[#222] mr-[5px]">
                 <House />
             </el-icon>
-            <span v-for="i, key of prefix.split('/')" class="text-[#666]">
+            <span v-for="i, key of prefix.split('/')" class="text-[#666] dark:text-[#bbb]">
                 <span v-if="i != ''" class="mx-[3px]">/</span>
-                <span @click="Dirto(key + 1)" class="cursor-pointer hover:text-[#222]">{{ i }}</span>
+                <span @click="Dirto(key + 1)" class="cursor-pointer hover:text-[#222] dark:hover:text-[#fff]">{{ i
+                    }}</span>
             </span>
             <span class="mx-[3px] text-[#666]">/</span>
         </div>
@@ -420,10 +441,11 @@ const saveAceEditorContent = async () => {
         <el-button @click="uploadFile" :loading="isUploading" class="mt-[10px]">开始上传</el-button>
     </el-dialog>
     <!-- 在线文本编辑 -->
+    <transition name="el-fade-in-linear">
         <div v-if="aceEditorShow"
             class="fixed w-full h-full inset-0 z-[2000] bg-[#00000066] flex justify-center items-center"
             @click="closeAceEditor">
-        <div class="w-3/4 h-3/4 bg-white p-[15px] rounded-[5px] flex flex-col" @click.stop>
+            <div class="w-3/4 h-3/4 bg-white dark:bg-[#141414] p-[15px] rounded-[5px] flex flex-col" @click.stop>
                 <div class="w-full flex items-center justify-between">
                     <span>正在编辑 - /{{ aceEditorFileInfo.name }}</span>
                     <el-button circle text @click="closeAceEditor">
@@ -440,13 +462,14 @@ const saveAceEditorContent = async () => {
                         </el-select>
                     </span>
                 </div>
-            <v-ace-editor v-model:value="aceEditorContent.text" :lang="aceEditorConfig.lang" theme="chrome"
+                <v-ace-editor v-model:value="aceEditorContent.text" :lang="aceEditorConfig.lang" :theme="aceEditorTheme"
                     class="w-full flex-1" />
-            <div class="flex justify-end">
+                <div class="flex justify-end mt-[10px]">
                     <el-button @click="resetAceEditorContent">重置</el-button>
                     <el-button @click="saveAceEditorContent" :loading="saveAceEditorContentLoading"
                         type="primary">保存</el-button>
                 </div>
             </div>
         </div>
+    </transition>
 </template>

tonecn/src/views/Console/Login.vue

@@ -62,12 +62,12 @@ onMounted(async () => {
     <div class="bg-default-bg fixed inset-0 w-full h-full -z-10 dark:bg-[#222]"></div>
     <div
         class="flex flex-col items-center justify-center mx-auto sm:h-[calc(100vh-90px)] h-[calc(100vh-77px)] px-[20px] max-w-[280px] min-h-[400px]">
-        <h1 class="text-center text-[36px] font-medium cursor-default dark:text-white">登录到控制台</h1>
+        <h1 class="text-center text-[36px] font-medium cursor-default text-black dark:text-white">登录到控制台</h1>
         <el-popover placement="bottom" :width="300" trigger="click">
             <p>控制台是特恩(TONE)网页中的一个控制器界面，如果您是管理员，可通过登录后编辑本网页中的内容（资源、工具、日记等），详情请见<strong style="cursor: pointer;"
                     @click="">《特恩(TONE)控制台使用协议》</strong></p>
             <template #reference>
-                <h3 class="text-center cursor-pointer font-semibold mt-[10px] dark:text-[#ccc]">控制台是什么？</h3>
+                <h3 class="text-center cursor-pointer font-semibold mt-[10px] text-[#333] dark:text-[#ccc]">控制台是什么？</h3>
             </template>
         </el-popover>
         <div class="w-full flex flex-col items-center">