♻️ 改了一些组件

src/assets/css/post-parser.css

@@ -2,25 +2,24 @@
  * @file assets css post-parser.css
  * @description 米游社解析 css
  * @author BTMuli <[email protected]>
- * @since Alpha v0.2.0
+ * @since Beta v0.3.0
  */
 
 .mys-post-body {
   width: 800px;
   margin: 0 auto;
-  color: var(--post-default-text);
   font-family: var(--font-text);
 }
 
 .mys-post-title {
   color: var(--common-text-title);
   font-family: var(--font-title);
-  font-size: 24px;
+  font-size: 20px;
 }
 
 .mys-post-subtitle {
-  color: var(--common-text-quote);
   font-size: 16px;
+  opacity: 0.6;
 }
 
 .mys-post-content {

src/assets/themes/dark.css

@@ -56,7 +56,6 @@ html.dark {
   --common-text-quote: var(--tgc-dark-7); /* quote */
 
   --back-top-shadow: #000000;
-  --theme-switch-icon: #e1e1e1;
   --post-default-text: #faf7e8;
 
   --content-bg-2: #393b40;

src/assets/themes/default.css

@@ -52,7 +52,6 @@ html.default {
   --common-text-quote: var(--common-color-blue-3); /* quote todo */
 
   --back-top-shadow: #546d8b;
-  --theme-switch-icon: #393b40;
   --post-default-text: #1e1e1e;
 
   --content-bg-2: #faf7e8;

src/components/app/t-switchTheme.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="switch-box">
     <div class="switch-btn" @click="switchTheme()">
-      <v-icon style="color: var(--theme-switch-icon)">
+      <v-icon>
         {{ themeGet === "default" ? "mdi-weather-night" : "mdi-weather-sunny" }}
       </v-icon>
     </div>
@@ -48,7 +48,7 @@ async function listenOnTheme(): Promise<void> {
   position: absolute;
   top: 20px;
   left: 20px;
-  border: var(--theme-switch-icon) 2px solid;
+  border: 2px solid var(--common-shadow-8);
   border-radius: 50%;
   cursor: pointer;
 }

src/components/main/t-shareBtn.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="share-box">
     <div class="share-btn" @click="shareContent()">
-      <v-icon style="color: var(--theme-switch-icon)"> mdi-share-variant </v-icon>
+      <v-icon> mdi-share-variant </v-icon>
     </div>
   </div>
 </template>
@@ -31,7 +31,7 @@ async function shareContent(): Promise<void> {
   position: absolute;
   top: 20px;
   right: 20px;
-  border: var(--theme-switch-icon) 2px solid;
+  border: 2px solid var(--common-shadow-8);
   border-radius: 50%;
   cursor: pointer;
 }

src/components/overlay/to-channel.vue

@@ -114,11 +114,11 @@ async function toChannel(link: string): Promise<void> {
 .toc-top {
   padding: 10px;
   border-radius: 5px;
-  background: rgb(255 255 255 / 30%);
+  background: var(--app-page-bg);
 }
 
 .toc-title {
-  color: var(--common-color-blue);
+  color: var(--common-text-title);
   font-family: var(--font-title);
   font-size: 20px;
 }
@@ -134,18 +134,14 @@ async function toChannel(link: string): Promise<void> {
   display: flex;
   align-items: center;
   justify-content: start;
+  border: 1px solid var(--common-shadow-2);
   border-radius: 5px;
-  background: rgb(0 0 0 / 20%);
-  color: var(--common-color-black);
+  background: var(--box-bg-1);
+  color: var(--box-text-2);
   cursor: pointer;
   transition: all 0.5s linear;
 }
 
-.toc-list-item:hover {
-  background: rgb(0 0 0 / 50%);
-  color: var(--common-color-white);
-}
-
 .toc-list-item img {
   width: 45px;
   height: 45px;
@@ -175,8 +171,8 @@ async function toChannel(link: string): Promise<void> {
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  background: rgb(255 255 255 / 30%);
-  color: #faf7e8;
+  background: var(--app-page-bg);
+  color: var(--app-page-content);
   cursor: pointer;
 }
 </style>

src/plugins/Mys/utils/parsePost.ts

@@ -25,7 +25,7 @@ function hexToRgb(hex: string): { r: number; g: number; b: number } {
 
 /**
  * @description 给定两个16进制颜色值，确认两者是否相近
- * @since Alpha v0.1.3
+ * @since Beta v0.3.0
  * @param {string} colorBg 背景颜色
  * @param {string} colorFg 前景颜色
  * @returns {boolean} 是否相近
@@ -44,7 +44,8 @@ function isColorSimilar(colorBg: string, colorFg: string): boolean {
   const contrast =
     (Math.max(colorBgLumFinal, colorFgLumFinal) + 0.05) /
     (Math.min(colorBgLumFinal, colorFgLumFinal) + 0.05);
-  return contrast <= 2.5;
+  // console.log(colorBg, colorFg, contrast);
+  return contrast > 1.5 && contrast < 4;
 }
 
 /**
@@ -206,8 +207,8 @@ function parseText(data: TGApp.Plugins.Mys.Post.StructuredContent): HTMLSpanElem
     if (data.attributes.color) {
       let colorGet = data.attributes.color;
       // 如果 colorGet 在 darkColorList 中，就设置为对应的颜色
-      if (isColorSimilar("#ffffff", colorGet) || isColorSimilar("#000000", colorGet)) {
-        colorGet = "var(--post-default-text)";
+      if (isColorSimilar("#000000", colorGet)) {
+        colorGet = "var(--app-page-content)";
       }
       text.style.color = colorGet;
     }