fix: dark mode color issues

README-en.md

@@ -65,8 +65,6 @@ With only one domain, you can create multiple different email addresses, similar
 
 - **🤖 CAPTCHA**: Integrated with Turnstile CAPTCHA to prevent automated registration.
 
-- **🔑 OAuth2 Login**: Support LinuxDo / GitHub / Google third-party login.
-
 - **📜 More Features**: Under development...
 
 ## Tech Stack

README.md

@@ -70,8 +70,6 @@
 
 - **🤖 人机验证**：集成Turnstile人机验证，防止人机批量注册
 
-- **🔑 OAuth2 登录**：支持 LinuxDo / GitHub / Google 第三方登录
-
 - **📜 更多功能**：正在开发中...
 
 

mail-vue/src/components/email-scroll/index.vue

@@ -38,13 +38,12 @@
                         :key="keyCount"
         >
           <template #default="{ data: item, index }" >
-            <div :class="'email-row ' + props.type"
+            <div :class="['email-row', props.type, { 'right-checked': item.rightChecked }]"
                  :data-checked="item.checked"
                  @click="jumpDetails(item)"
                  v-if="!item.expand"
                  :key="item.emailId"
                  @contextmenu="handleContextmenu($event, item)"
-                 :style="item.rightChecked ? 'background: #FDF6EC' : ''"
             >
               <el-checkbox :class=" props.type === 'all-email' ? 'all-email-checkbox' : 'checkbox'"
                            v-model="item.checked"
@@ -1254,6 +1253,11 @@ function loadData() {
     z-index: 0;
   }
 
+  &.right-checked,
+  &.right-checked:hover {
+    background-color: var(--email-right-click-background);
+  }
+
   /*&[data-checked="true"] {
     background-color: #c2dbff;
   }*/

mail-vue/src/style.css

@@ -128,6 +128,7 @@ button, input, select, textarea {
     --el-text-color-regular: var(--el-text-color-primary);
     --email-scroll-content-color: rgba(25, 41, 59, 0.4);
     --email-hover-background: #F2F6FC;
+    --email-right-click-background: #FDF6EC;
     --login-border: none;
     --form-desc-color: #71717a;
     --login-switch-color: #006be6;
@@ -157,6 +158,7 @@ button, input, select, textarea {
     --choose-account-background: #39393A;
     --email-scroll-content-color: rgba(255, 255, 255, 0.3);
     --email-hover-background: #1D1E1F;
+    --email-right-click-background: var(--email-hover-background);
     --login-border: none;
     --form-desc-color: #8D9095;
     --login-switch-color: rgb(102, 177, 255);

mail-vue/src/views/login/index.vue

@@ -192,9 +192,9 @@ const oauthProvider = computed(() => {
 
 const oauthProviders = computed(() => {
   const allProviders = [
-    { key: 'linuxdo', label: 'LinuxDo', icon: '/image/linuxdo.webp', iconType: 'image' },
-    { key: 'github', label: 'GitHub', icon: 'devicon:github', iconType: 'iconify' },
     { key: 'google', label: 'Google', icon: 'devicon:google', iconType: 'iconify' },
+    { key: 'github', label: 'GitHub', icon: 'codicon:github-inverted', iconType: 'iconify' },
+    { key: 'linuxdo', label: 'LinuxDo', icon: '/image/linuxdo.webp', iconType: 'image' },
   ]
   return allProviders.filter(p => settingStore.settings[p.key + 'Switch'] === 0)
 })

mail-vue/src/views/sys-setting/index.vue

@@ -922,9 +922,9 @@ const turnstileForm = reactive({
 })
 
 const oauthPlatforms = [
-  { key: 'linuxdo', label: 'LinuxDo', icon: '/image/linuxdo.webp', iconType: 'image' },
-  { key: 'github', label: 'GitHub', icon: 'devicon:github', iconType: 'iconify' },
   { key: 'google', label: 'Google', icon: 'devicon:google', iconType: 'iconify' },
+  { key: 'github', label: 'GitHub', icon: 'codicon:github-inverted', iconType: 'iconify' },
+  { key: 'linuxdo', label: 'LinuxDo', icon: '/image/linuxdo.webp', iconType: 'image' },
 ]
 const oauthSettingShow = ref(false)
 const oauthForm = reactive({