💄 完善昨天改的四个 common page

src/assets/index.css

@@ -42,6 +42,7 @@
   --tgc-dark-5: #161b22; /* Github web list nav */
   --tgc-dark-6: #21262d; /* Github web btn bg */
   --tgc-dark-7: #393b40; /* Genshin btn bg */
+  --tgc-dark-8: #121212; /* Github web bg */
 
   /* color other */
   --tgc-blue-1: #3572a5; /* Github web lang bar */
@@ -51,6 +52,9 @@
   --tgc-pink-1: #fb7299; /* Bilibili btn bg */
   --tgc-yellow-1: #ffcd0c; /* Genshin btn bg */
   --tgc-yellow-2: #f4d8a8; /* Genshin confirm text */
+
+  /* some css same in dark and default theme */
+  --tgc-btn-1: var(--tgc-dark-7); /* button bg */
 }
 
 /*

src/assets/themes/dark.css

@@ -8,31 +8,32 @@
 /* dark mode */
 html.dark {
   /* app container */
-  --app-page-bg: var(--tgc-dark-4);
+  --app-page-bg: var(--tgc-dark-8);
   --app-page-content: var(--tgc-white-3);
   --app-side-bg: var(--tgc-dark-3);
   --app-side-content: var(--tgc-white-4);
 
   /* content */
-  --box-bg-1: var(--tgc-dark-5);
+  --box-bg-1: var(--tgc-dark-4);
   --box-bg-2: var(--tgc-dark-6);
   --box-bg-3: var(--tgc-dark-7);
   --box-bg-4: var(--tgc-dark-7);
-  --box-bg-5: var(--tgc-dark-5);
 
   /* box bg transparent */
   --box-bg-t-1: var(--tgc-white-3);
-  --box-bg-t-4: var(--tgc-white-1);
 
   /* text */
   --box-text-1: var(--tgc-white-1);
   --box-text-2: var(--tgc-white-2);
   --box-text-3: var(--tgc-blue-1);
   --box-text-4: var(--tgc-white-8);
-  --box-text-5: var(--tgc-yellow-1);
-  --box-text-6: var(--tgc-yellow-1);
   --box-text-7: var(--tgc-white-9);
 
+  /* button */
+  --btn-text: var(--tgc-yellow-1);
+  --btn-bg-1: var(--tgc-dark-5);
+  --btn-text-1: var(--tgc-yellow-1);
+
   /* box-shadow */
   --common-shadow-1: rgb(255 255 255 / 10%);
   --common-shadow-2: rgb(255 255 255 / 20%);
@@ -49,18 +50,11 @@ html.dark {
   --common-bg-1: #3d424b; /* 一级背景色 */
   --common-bgt-1: #faf7e8; /* 一级背景色对应的文本色 */
 
-  /* button */
-  --common-btn-bg-1: #282c34; /* button 背景色 */
-  --common-btn-bgt-1: #fec90b; /* button 背景色对应的文本色 */
-  --common-btn-bg-2: #2a3442; /* button 背景色 */
-  --common-btn-bgt-2: #ece5d8; /* button 背景色对应的文本色 */
-
   /* text */
-  --common-text-title: #f9e9cd; /* title，米色 */
+  --common-text-title: var(--tgc-yellow-2); /* title，米色 */
   --common-text-content: var(--common-color-white); /* text */
-  --common-text-quote: var(--common-color-grey); /* quote */
+  --common-text-quote: var(--tgc-dark-7); /* quote */
 
-  --calendar-btn-bg: #1e1e1e;
   --back-top-shadow: #000000;
   --theme-switch-icon: #e1e1e1;
   --post-default-text: #faf7e8;
@@ -70,9 +64,4 @@ html.dark {
 
   --content-text-2: #faf7e8;
   --content-text-3: #e1e1e1;
-
-  --btn-bg-1: #3b3d3b;
-  --btn-bg-2: #e1e1e1;
-  --btn-bg-3: #1e1e1e;
-  --btn-text-1: #393b40;
 }

src/assets/themes/default.css

@@ -9,30 +9,32 @@
 html.default {
   /* app container */
   --app-page-bg: var(--tgc-white-1);
-  --app-page-content: var(--tgc-dark-5);
+  --app-page-content: var(--tgc-dark-7);
   --app-side-bg: var(--tgc-white-5);
-  --app-side-content: var(--tgc-dark-4);
+  --app-side-content: var(--tgc-dark-8);
 
   /* box container */
+  /* page-bg > box-bg-1 > box-bg-2 */
   --box-bg-1: var(--tgc-white-3); /* with box-text-1 */
-  --box-bg-2: var(--tgc-white-7);
+  --box-bg-2: var(--tgc-white-4);
   --box-bg-3: var(--tgc-white-9);
   --box-bg-4: var(--tgc-white-1);
-  --box-bg-5: var(--tgc-yellow-1); /* with box-text-6 */
 
   /* box bg transparent */
   --box-bg-t-1: var(--tgc-dark-5);
-  --box-bg-t-4: var(--tgc-dark-7); /* with box-text-5 */
 
   /* box text */
   --box-text-1: var(--tgc-dark-5); /* with box-bg-1 */
   --box-text-2: var(--tgc-dark-2);
   --box-text-3: var(--tgc-blue-2);
   --box-text-4: var(--tgc-blue-3); /* subtitle */
-  --box-text-5: var(--tgc-yellow-2); /* with box-bg-t-4 */
-  --box-text-6: var(--tgc-blue-1); /* with box-bg-5 */
   --box-text-7: var(--tgc-dark-7); /* quote */
 
+  /* button */
+  --btn-text: var(--tgc-yellow-2); /* with tgc-btn-1 */
+  --btn-bg-1: var(--tgc-yellow-1);
+  --btn-text-1: var(--tgc-blue-1);
+
   /* box-shadow */
   --common-shadow-1: rgb(0 0 0 / 10%);
   --common-shadow-2: rgb(0 0 0 / 20%);
@@ -45,17 +47,11 @@ html.default {
   --common-shadow-t-4: rgb(255 255 255 / 40%);
   --common-shadow-t-8: rgb(255 255 255 / 80%);
 
-  /* button */
-  --common-btn-bg-1: #fec90b; /* button 背景色 */
-  --common-btn-bgt-1: #5b738f; /* button 背景色对应的文本色 */
-  --common-btn-bg-2: #e1d8c6; /* button 背景色 */
-  --common-btn-bgt-2: #495366; /* button 背景色对应的文本色 */
+  /* common text color */
+  --common-text-title: var(--tgc-dark-8); /* title */
+  --common-text-content: var(--common-color-blue-2); /* text todo */
+  --common-text-quote: var(--common-color-blue-3); /* quote todo */
 
-  --common-text-title: #393b40; /* title */
-  --common-text-content: var(--common-color-blue-2); /* text */
-  --common-text-quote: var(--common-color-blue-3); /* quote */
-
-  --calendar-btn-bg: #393b40;
   --back-top-shadow: #546d8b;
   --theme-switch-icon: #393b40;
   --post-default-text: #1e1e1e;
@@ -65,9 +61,4 @@ html.default {
 
   --content-text-2: #393b40;
   --content-text-3: #546d8b;
-
-  --btn-bg-1: #fec90b;
-  --btn-bg-2: #4a5366;
-  --btn-bg-3: #546d8b;
-  --btn-text-1: #faf7e8;
 }