feat: 优化主题样式

coolpace · Sep 30, 2024 · e19d0b4 · e19d0b4
1 parent 4c0457c
commit e19d0b4
Show file tree

Hide file tree

Showing 9 changed files with 69 additions and 34 deletions.
diff --git a/src/pages/options.ts b/src/pages/options.ts
@@ -190,6 +190,10 @@ void (async function init() {
   {
     const $contentTags = $('[data-content-key="tags"]')
 
+    const renderEmptyTagsContent = () => {
+      $contentTags.append($('#tags-empty').html())
+    }
+
     const renderTagsContent = async () => {
       const storage = await getStorage(false)
       const tagData = storage[StorageKey.MemberTag]
@@ -361,9 +365,11 @@ void (async function init() {
           $contentTags.append($tagList)
 
           loadIcons()
+        } else {
+          renderEmptyTagsContent()
         }
       } else {
-        $contentTags.append($('#tags-empty').html())
+        renderEmptyTagsContent()
       }
     }
 

diff --git a/src/pages/popup.ts b/src/pages/popup.ts
@@ -109,7 +109,6 @@ const $tabMsg = $('.tabs > li[data-target="tab-message"]')
 function loadSettings() {
   const storage = getStorageSync()
   const api = storage[StorageKey.API]
-  const options = storage[StorageKey.Options]
 
   const $patInput = $('#pat')
 

diff --git a/src/styles/options.scss b/src/styles/options.scss
@@ -88,7 +88,8 @@ body {
 .backup-tip {
   margin-bottom: 20px;
   padding: 10px;
-  background-color: var(--v2p-color-button-background);
+  font-size: 14px;
+  background-color: var(--v2p-color-bg-block);
   border-radius: 5px;
 }
 
@@ -393,7 +394,7 @@ fieldset {
         > img {
           width: 30px;
           height: 30px;
-          background-color: var(--v2p-color-main-100);
+          background-color: var(--v2p-color-bg-block);
           border-radius: 5px;
         }
       }
@@ -414,7 +415,7 @@ fieldset {
       align-items: center;
       justify-content: center;
       padding: 2px 6px;
-      background-color: var(--v2p-color-main-100);
+      background-color: var(--v2p-color-bg-block);
       border-radius: 4px;
 
       &.tag-item-tag-add {
@@ -476,7 +477,7 @@ fieldset {
     gap: 10px;
     justify-content: center;
     padding: 20px;
-    background-color: var(--v2p-color-main-100);
+    background-color: var(--v2p-color-bg-block);
     border-radius: 8px;
   }
 

diff --git a/src/styles/popup.scss b/src/styles/popup.scss
@@ -82,12 +82,12 @@ button {
   padding: 5px 8px;
   color: var(--v2p-color-foreground);
   text-decoration: none;
-  background-color: var(--v2p-color-main-200);
+  background-color: var(--v2p-color-button-background);
   border-radius: 5px;
 
   &:hover {
     text-decoration: none;
-    background-color: var(--v2p-color-main-300);
+    background-color: var(--v2p-color-button-background-hover);
   }
 
   .action-icon {
@@ -104,10 +104,10 @@ button {
   width: 100%;
   padding: 4px 6px;
   font-size: 14px;
-  background-color: var(--v2p-color-main-100);
+  background-color: var(--v2p-color-bg-tabs);
   border-radius: 5px;
 
-  > li[data-target] {
+  li[data-target] {
     cursor: pointer;
     user-select: none;
     display: flex;
@@ -119,11 +119,11 @@ button {
     border-radius: 3px;
 
     &:hover {
-      background-color: var(--v2p-color-main-200);
+      background-color: var(--v2p-color-button-background-hover);
     }
 
     &.active {
-      color: var(--v2p-color-main-100);
+      color: var(--v2p-color-background);
       background-color: var(--v2p-color-foreground);
     }
   }
@@ -180,7 +180,7 @@ button {
       text-decoration: none;
 
       &:hover {
-        background-color: var(--v2p-color-main-100);
+        background-color: var(--v2p-color-bg-link);
       }
 
       .title {
@@ -332,8 +332,8 @@ button {
       gap: 0 10px;
       align-items: center;
       padding: 0 5px 0 0;
-      background-color: var(--v2p-color-main-100);
-      border: 1px solid var(--v2p-color-main-300);
+      background-color: var(--v2p-color-bg-block);
+      border: 1px solid var(--v2p-color-border);
       border-radius: 6px;
 
       &:has(.has-value) {
@@ -421,14 +421,14 @@ hr {
   margin-top: 10px;
   padding: 5px 8px;
   color: var(--v2p-color-foreground);
-  background-color: var(--v2p-color-main-100);
+  background-color: var(--v2p-color-bg-block);
   border-radius: 5px;
 
   @at-root {
     #clear-storage,
     #sync-settings {
       padding: 0 5px;
-      background-color: var(--v2p-color-main-200);
+      background-color: var(--v2p-color-button-background-hover);
       border-radius: 3px;
       transition:
         background-color 0.2s,
@@ -503,7 +503,7 @@ a {
 
     &:hover {
       text-decoration: underline;
-      background-color: var(--v2p-color-main-100);
+      background-color: var(--v2p-color-bg-link-hover);
     }
   }
 }

diff --git a/src/styles/v2ex-effect.scss b/src/styles/v2ex-effect.scss
@@ -412,7 +412,7 @@ a.v2p-topic-preview-title-link {
         border-radius: 4px;
 
         &:hover {
-          background-color: var(--v2p-color-main-200);
+          background-color: var(--v2p-color-button-background-hover);
         }
 
         &.v2p-tab-active {
@@ -425,7 +425,7 @@ a.v2p-topic-preview-title-link {
 }
 
 .v2p-no-pat {
-  padding: 30px 10px;
+  padding: 30px 20px;
   font-size: 15px;
   text-align: center;
 
@@ -446,7 +446,7 @@ a.v2p-topic-preview-title-link {
     align-items: center;
     margin: 0 5px;
     padding: 2px 10px;
-    background-color: var(--v2p-color-button-background);
+    background-color: var(--v2p-color-bg-block);
     border-radius: 2px;
   }
 
@@ -457,7 +457,7 @@ a.v2p-topic-preview-title-link {
     max-width: 800px;
     margin-top: 20px;
     padding: 20px;
-    background-color: var(--v2p-color-button-background);
+    background-color: var(--v2p-color-bg-block);
     border-radius: 10px;
   }
 

diff --git a/src/styles/v2ex-theme-dark.scss b/src/styles/v2ex-theme-dark.scss
@@ -46,6 +46,7 @@
     --v2p-color-bg-reply: var(--v2p-color-main-100);
     --v2p-color-bg-tooltip: var(--v2p-color-main-100);
     --v2p-color-bg-avatar: var(--v2p-color-main-300);
+    --v2p-color-bg-block: #373e47;
     // ---- 背景 ----
 
     --v2p-color-heart: #ef4444;

diff --git a/src/styles/v2ex-theme-dawn.scss b/src/styles/v2ex-theme-dawn.scss
@@ -22,6 +22,9 @@ body.v2p-theme-dawn,
   --v2p-color-accent-400: hsl(var(--v2p-color-foam) / 50%);
   --v2p-color-accent-500: hsl(var(--v2p-color-foam) / 65%);
   --v2p-color-accent-600: hsl(var(--v2p-color-foam) / 80%);
+  --v2p-color-orange-50: hsl(var(--v2p-color-gold) / 10%);
+  --v2p-color-orange-100: hsl(var(--v2p-color-gold) / 20%);
+  --v2p-color-orange-400: hsl(var(--v2p-color-gold));
 
   // ====
   --v2p-color-background: hsl(var(--v2p-color-base));
@@ -52,6 +55,9 @@ body.v2p-theme-dawn,
   --v2p-color-bg-tabs: hsl(var(--v2p-color-pine) / 10%);
   --v2p-color-bg-tpr: hsl(var(--v2p-color-text) / 10%);
   --v2p-color-bg-avatar: hsl(var(--v2p-color-overlay));
+  --v2p-color-bg-block: hsl(var(--v2p-color-text) / 10%);
+  --v2p-color-bg-link: hsl(var(--v2p-color-text) / 10%);
+  --v2p-color-bg-link-hover: hsl(var(--v2p-color-text) / 15%);
   // ---- 背景 ----
 
   --v2p-color-tabs: hsl(var(--v2p-color-pine));
@@ -74,6 +80,14 @@ body.v2p-theme-dawn,
     0 9px 28px 8px rgb(0 0 0 / 5%);
   // ---- 阴影 ----
 
+  // V2EX 原有的 CSS 变量：
+  --link-color: var(--v2p-color-foreground);
+  --box-background-alt-color: var(--v2p-color-bg-block);
+  --box-background-hover-color: var(--v2p-color-bg-link-hover);
+  --button-hover-color: var(--v2p-color-button-background-hover);
+  --button-border-color: var(--v2p-color-border);
+  --button-border-hover-color: var(--v2p-color-border-darker);
+
   visibility: visible;
 
   .button {

diff --git a/src/styles/v2ex-theme-default.scss b/src/styles/v2ex-theme-default.scss
@@ -274,7 +274,7 @@ body {
     padding: 5px 6px;
     font-size: 13px;
     color: var(--v2p-color-font-secondary);
-    background-color: var(--v2p-color-button-background);
+    background-color: var(--v2p-color-bg-block);
     border-radius: 4px;
 
     &:hover {
@@ -323,7 +323,7 @@ body {
 
   .dock_area {
     margin: 12px 0;
-    background: var(--v2p-color-main-100);
+    background: var(--v2p-color-bg-block);
   }
 
   .member-activity-bar {
@@ -474,10 +474,10 @@ body {
       @include share.link;
 
       color: currentColor;
-      background-color: var(--v2p-color-main-100);
+      background-color: var(--v2p-color-bg-link);
 
       &:hover {
-        background-color: var(--v2p-color-main-200);
+        background-color: var(--v2p-color-bg-link-hover);
       }
 
       &:has(> .embedded_image) {
@@ -625,12 +625,12 @@ body {
 
   // 个人页的链接。
   .social_label:is(:link, :visited, :active) {
-    background-color: var(--v2p-color-main-100);
+    background-color: var(--v2p-color-button-background);
     border-radius: var(--box-border-radius);
     box-shadow: none;
 
     &:hover {
-      background-color: var(--v2p-color-main-200);
+      background-color: var(--v2p-color-button-background-hover);
     }
   }
 
@@ -676,8 +676,8 @@ body {
   }
 
   .onoffswitch label .frame::after {
-    color: var(--v2p-color-main-100);
-    background-color: var(--v2p-color-main-400);
+    color: var(--v2p-color-font-secondary);
+    background-color: var(--v2p-color-bg-search);
   }
 
   select {
@@ -692,7 +692,7 @@ body {
 .box {
   .tag {
     &::before {
-      color: var(--v2p-color-main-500);
+      color: var(--v2p-color-font-secondary);
     }
 
     &:link,
@@ -742,7 +742,7 @@ body {
       }
 
       &:not(.v2p-hover-btn):hover {
-        background-color: var(--v2p-color-main-100);
+        background-color: var(--v2p-color-button-background-hover);
       }
     }
 
@@ -913,7 +913,7 @@ body {
       @include count;
 
       color: var(--v2p-color-button-foreground);
-      background-color: var(--v2p-color-button-background-hover);
+      background-color: var(--v2p-color-bg-block);
     }
 
     .count_orange {
@@ -1280,7 +1280,19 @@ body {
   }
 }
 
+// 广告：
 .wwads-cn {
   border: none !important;
   box-shadow: none !important;
 }
+
+// 广告：
+.box:has(a[href^='/advertise']) {
+  overflow: hidden;
+  border: none !important;
+  box-shadow: none !important;
+
+  .sidebar_compliance {
+    background-color: var(--v2p-color-bg-block);
+  }
+}
diff --git a/src/styles/v2ex-theme-var.scss b/src/styles/v2ex-theme-var.scss
@@ -70,8 +70,10 @@
     --v2p-color-bg-tooltip: var(--v2p-color-bg-content);
     --v2p-color-bg-tabs: var(--v2p-color-main-100);
     --v2p-color-bg-tpr: var(--v2p-color-main-100);
-    --v2p-color-bg-block: var(--v2p-color-main-100);
     --v2p-color-bg-avatar: var(--v2p-color-main-300);
+    --v2p-color-bg-block: var(--v2p-color-main-100);
+    --v2p-color-bg-link: var(--v2p-color-main-100);
+    --v2p-color-bg-link-hover: var(--v2p-color-main-200);
     // ---- 背景 ----
 
     --v2p-color-tabs: var(--v2p-color-foreground);