add theme

Sjj1024 · Nov 10, 2024 · d3251a6 · d3251a6
1 parent 85d5de7
commit d3251a6
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 69 deletions.
diff --git a/index.html b/index.html
@@ -1,14 +1,21 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Tauri + Vue + Typescript App</title>
-  </head>
+    <head>
+        <meta charset="UTF-8" />
+        <script>
+            // 立即执行函数 (IIFE) 用于在页面加载时应用主题
+            ;(function () {
+                const savedTheme = localStorage.getItem('theme') || 'light' // 默认使用浅色主题
+                document.documentElement.setAttribute('data-theme', savedTheme)
+            })()
+        </script>
+        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Tauri + Vue + Typescript App</title>
+    </head>
 
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
+    <body>
+        <div id="app"></div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
 </html>
diff --git a/src-tauri/src/command/pake.rs b/src-tauri/src/command/pake.rs
@@ -37,7 +37,7 @@ pub async fn open_window(
     }
     println!("Opening docs in external window: {}, {}", app_url, platform);
     if !resize {
-        let docs_window = tauri::WindowBuilder::new(
+        let _window = tauri::WindowBuilder::new(
             &handle,
             "previewWeb", /* the unique window label */
             tauri::WindowUrl::External(app_url.parse().unwrap()),
@@ -49,8 +49,6 @@ pub async fn open_window(
         .initialization_script(include_str!("../extension/custom.js"))
         .build()
         .unwrap();
-        let theme = docs_window.theme().expect("failed to get theme");
-        println!("Theme: {}", theme);
     }
 }
 

diff --git a/src/App.vue b/src/App.vue
@@ -41,6 +41,19 @@ const disableRightClick = () => {
     }
 }
 
+const chageTheme = (theme: string) => {
+    if (theme === 'light') {
+        document.documentElement.setAttribute('theme', 'light')
+        document.querySelector('html')?.classList.remove('dark')
+        document.querySelector('html')?.classList.add('light')
+    } else {
+        document.documentElement.setAttribute('theme', 'dark')
+        document.querySelector('html')?.classList.remove('light')
+        document.querySelector('html')?.classList.add('dark')
+    }
+    localStorage.setItem('theme', theme)
+}
+
 const initEnv = async () => {
     const language = await os.locale()
     let lang = 'en' // Default to English
@@ -58,6 +71,8 @@ const initEnv = async () => {
     const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
     const currentTheme = mediaQuery.matches ? 'dark' : 'light'
     console.log(`当前系统主题: ${currentTheme}`)
+    const localTheme = localStorage.getItem('theme')
+    chageTheme(localTheme || currentTheme)
     await createDir('assets', { dir: BaseDirectory.AppData, recursive: true })
     console.log('App data dir exists:', import.meta.env.DEV)
     // if env is dev
@@ -66,20 +81,16 @@ const initEnv = async () => {
     }
 }
 
+window
+    .matchMedia('(prefers-color-scheme: dark)')
+    .addEventListener('change', (e) => {
+        const newTheme = e.matches ? 'dark' : 'light'
+        console.log('theme change', newTheme)
+        chageTheme(newTheme)
+    })
+
 onMounted(() => {
     initEnv()
-    let theme = localStorage.getItem('theme') || 'dark'
-    if (theme !== 'dark') {
-        document.documentElement.setAttribute('theme', 'light')
-        document.querySelector('html')?.classList.remove('dark')
-        document.querySelector('html')?.classList.add('light')
-        // userStore.setTheme('light')
-    } else {
-        document.documentElement.setAttribute('theme', 'dark')
-        document.querySelector('html')?.classList.remove('light')
-        document.querySelector('html')?.classList.add('dark')
-        // userStore.setTheme('dark')
-    }
 })
 </script>
 

diff --git a/src/assets/global.scss b/src/assets/global.scss
@@ -7,12 +7,17 @@ html,
 body {
     width: 100%;
     height: 100%;
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    transition: background-color 0.5s, color 0.5s;
 }
 
 #app,
 .container {
     width: 100%;
     height: 100%;
+    background-color: var(--bg-color);
+    transition: background-color 0.5s, color 0.5s;
 }
 
 :focus-visible {

diff --git a/src/assets/theme.css b/src/assets/theme.css
@@ -1,45 +1,29 @@
 /* 默认dark主题 */
 :root[theme='dark'] {
-    --bg-color: #0d1117;
+    --bg-color: #292a2b;
+    --project-bg: #383838;
+    --hover-color: #0d1117;
     --text-color: #f0f6fc;
-    --box-shadow: unset;
+    --box-shadow: #626262;
     --input-color: black;
     --menu-ative-bg: rgba(201, 211, 225, 0.08);
     --scroll-thumb: rgba(255, 255, 255, 0.2);
     --scroll-track: rgba(251, 249, 249, 0.1);
     --api-process: #363637;
     --filt-item: rgba(201, 211, 225, 0.08);
-    --selected-item: rgba(218, 223, 231, 0.247);
-    --file-menu-color: #181818;
-    --file-menu-hover: rgb(145, 145, 145);
-    --file-loading-mask: #0d1117ba;
-    --file-loading-hover: rgba(201, 211, 225, 0);
-    --img-pre-btn-bg: rgb(31 45 61 / 11%);
-    --img-pre-btn-bg-hover: rgb(31 45 61 / 33%);
-    --gpt-message-bg-hover: rgba(201, 211, 225, 0.2);
-    --gpt-me-message-bg: rgb(123, 194, 87);
-    --gpt-me-message-bg-hover: rgb(134, 212, 95);
 }
 
 /* light主题 */
 :root[theme='light'] {
     --bg-color: #fff;
+    --project-bg: #f7f7f7;
+    --hover-color: #ccc;
     --text-color: #181818;
-    --box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #f9f9f9;
+    --box-shadow: #ccc;
     --input-color: #181818;
     --menu-ative-bg: rgba(9, 30, 66, 0.08);
     --scroll-thumb: rgba(0, 0, 0, 0.2);
     --scroll-track: rgba(0, 0, 0, 0.1);
     --api-process: #cdcdcd;
     --filt-item: #ecf5ff;
-    --selected-item: #d4e7fd;
-    --file-menu-color: #181818;
-    --file-menu-hover: rgb(200, 200, 200);
-    --file-loading-mask: #ecf5ff6a;
-    --file-loading-hover: #ecf5ff3a;
-    --img-pre-btn-bg: rgba(31, 45, 61, 0.11);
-    --img-pre-btn-bg-hover: rgba(31, 45, 61, 0.53);
-    --gpt-message-bg-hover: rgba(9, 30, 66, 0.15);
-    --gpt-me-message-bg: rgb(149, 236, 105);
-    --gpt-me-message-bg-hover: rgb(137, 217, 97);
 }
diff --git a/src/main.ts b/src/main.ts
@@ -6,6 +6,7 @@ import ElementPlus from 'element-plus'
 import i18n from './lang/index'
 import '@/assets/fonts/iconfont.css'
 import 'element-plus/dist/index.css'
+import 'element-plus/theme-chalk/dark/css-vars.css'
 import '@/assets/theme.css'
 import '@/assets/global.scss'
 import 'vue-cropper/dist/index.css'

diff --git a/src/pages/about.vue b/src/pages/about.vue
@@ -160,7 +160,7 @@ const goBack = () => {
             .pakeplus {
                 font-size: 26px;
                 font-weight: 600;
-                color: #000000;
+                color: var(--text-color);
             }
         }
 

diff --git a/src/pages/home.vue b/src/pages/home.vue
@@ -19,24 +19,24 @@
             </div>
             <!-- set button -->
             <div class="toolBox">
-                <!-- TODO theme change -->
-                <!-- <div class="theme">
+                <!-- theme change -->
+                <div class="theme">
                     <el-dropdown>
                         <span class="dropdownLink">
                             <span class="iconfont themeIcon">&#xe635;</span>
                         </span>
                         <template #dropdown>
                             <el-dropdown-menu>
-                                <el-dropdown-item>{{
-                                    t('darkMode')
-                                }}</el-dropdown-item>
-                                <el-dropdown-item>{{
-                                    t('lightMode')
-                                }}</el-dropdown-item>
+                                <el-dropdown-item @click="chageTheme('dark')">
+                                    {{ t('darkMode') }}
+                                </el-dropdown-item>
+                                <el-dropdown-item @click="chageTheme('light')">
+                                    {{ t('lightMode') }}
+                                </el-dropdown-item>
                             </el-dropdown-menu>
                         </template>
                     </el-dropdown>
-                </div> -->
+                </div>
                 <div class="language">
                     <el-dropdown>
                         <span class="dropdownLink">
@@ -191,6 +191,19 @@ const branchDialog = ref(false)
 const branchName = ref('')
 const testLoading = ref(false)
 
+const chageTheme = (theme: string) => {
+    if (theme === 'light') {
+        document.documentElement.setAttribute('theme', 'light')
+        document.querySelector('html')?.classList.remove('dark')
+        document.querySelector('html')?.classList.add('light')
+    } else {
+        document.documentElement.setAttribute('theme', 'dark')
+        document.querySelector('html')?.classList.remove('light')
+        document.querySelector('html')?.classList.add('dark')
+    }
+    localStorage.setItem('theme', theme)
+}
+
 // go project detail
 const goProject = (pro: Project) => {
     store.setCurrentProject(pro)
@@ -451,6 +464,9 @@ onMounted(() => {
 .homeBox {
     padding: 10px 20px;
     position: relative;
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    transition: background-color 0.5s, color 0.5s;
 
     .homeHeader {
         display: flex;
@@ -535,7 +551,7 @@ onMounted(() => {
                     color: gray;
                     user-select: none;
                     &:hover {
-                        color: black;
+                        color: var(--text-color);
                     }
                 }
             }
@@ -555,7 +571,7 @@ onMounted(() => {
                     color: gray;
                     cursor: pointer;
                     &:hover {
-                        color: black;
+                        color: var(--text-color);
                     }
                 }
             }
@@ -583,21 +599,26 @@ onMounted(() => {
         .project {
             height: 200px;
             border-radius: 5px;
-            border: 1px solid #ccc;
+            border: 1px solid var(--box-shadow);
             margin-bottom: 10px;
-            background-color: #f7f7f7;
+            background-color: var(--project-bg);
             overflow: hidden;
+            transition: background-color 0.5s, color 0.5s;
 
             &:hover {
-                box-shadow: #ccc 0px 0px 10px;
+                box-shadow: var(--box-shadow) 0px 0px 10px;
+                transform: scale(1.01);
             }
 
             .appIcon {
+                z-index: 1;
                 width: 100%;
                 height: 66%;
                 object-fit: cover;
                 border-radius: 2px 2px 0 0;
-                background-color: white;
+                background-color: var(--project-bg);
+                transition: transform 0.3s ease;
+                transition: background-color 0.5s, color 0.5s;
             }
 
             .appPreview {
@@ -606,6 +627,7 @@ onMounted(() => {
             }
 
             .infoBox {
+                z-index: 2;
                 padding: 5px;
                 -webkit-user-select: none; /* Safari */
                 -moz-user-select: none; /* Firefox */
@@ -640,14 +662,19 @@ onMounted(() => {
             align-items: center;
             &:hover {
                 color: black;
-                border: 1px solid #ccc;
+                border: 1px solid var(--box-shadow);
+                transition: background-color 0.5s, color 0.5s;
+
                 .addIcon {
-                    color: rgb(90, 90, 90);
+                    color: var(--box-shadow);
+                    font-size: 40px !important;
+                    font-weight: bold;
                 }
             }
 
             .addIcon {
-                color: gray;
+                color: var(--box-shadow);
+                transition: font-size 0.1s, font-weight 0.5s;
             }
         }
     }
@@ -660,7 +687,7 @@ onMounted(() => {
         cursor: pointer;
 
         &:hover {
-            color: black;
+            color: var(--text-color);
         }
     }
 }