perf: 优化内容容器暗色模式下 UI

pengzhanbo · Dec 26, 2023 · 4f02717 · 4f02717
1 parent a203932
commit 4f02717
Show file tree

Hide file tree

Showing 2 changed files with 155 additions and 74 deletions.
diff --git a/theme/src/client/styles/md-enhance.scss b/theme/src/client/styles/md-enhance.scss
@@ -1,90 +1,151 @@
-.plume-content .hint-container {
-  border-radius: 8px;
-  padding: 16px 16px 8px;
-  line-height: 24px;
-  font-size: var(--vp-custom-block-font-size);
-  color: var(--vp-c-text-2);
-}
+.plume-content {
+  .hint-container {
+    border-radius: 8px;
+    padding: 16px 16px 8px;
+    line-height: 24px;
+    font-size: var(--vp-custom-block-font-size);
+    color: var(--vp-c-text-2);
 
-.plume-content .hint-container .hint-container-title {
-  font-weight: 600;
-  margin-top: 0;
-}
+    .hint-container-title {
+      font-weight: 600;
+      margin-top: 0;
+    }
 
-.hint-container.note {
-  color: var(--vp-custom-block-info-text);
-}
+    &.note {
+      border-radius: 0;
+      color: var(--vp-c-text-3);
+    }
 
-.hint-container.tip {
-  color: var(--vp-custom-block-tip-text);
-}
+    &.info {
+      color: var(--vp-custom-block-info-text);
+    }
 
-.hint-container.warning {
-  color: var(--vp-custom-block-warning-text);
-}
+    &.tip {
+      color: var(--vp-custom-block-tip-text);
+    }
 
-.hint-container.caution {
-  color: var(--vp-custom-block-danger-text);
-}
+    &.warning {
+      color: var(--vp-custom-block-warning-text);
+    }
 
-.hint-container.detail {
-  color: var(--vp-custom-block-detail-text);
-}
+    &.caution {
+      color: var(--vp-custom-block-danger-text);
+    }
 
-.plume-content .hint-container.details summary {
-  margin: -1.5rem -1.5rem -1.1rem;
-  font-weight: 700;
-  cursor: pointer;
-  color: var(--vp-c-text-1);
-}
+    &.detail {
+      color: var(--vp-custom-block-detail-text);
 
-.plume-content .hint-container.details summary + p {
-  margin: 8px 0;
-}
+      summary {
+        margin: -1.5rem -1.5rem -1.1rem;
+        font-weight: 700;
+        cursor: pointer;
+        color: var(--vp-c-text-1);
+      }
 
-.plume-content .hint-container p + p {
-  margin: 8px 0;
-}
+      summary + p {
+        margin: 8px 0;
+      }
+    }
 
-.plume-content .hint-container code {
-  font-size: var(--vp-custom-block-code-font-size);
-}
+    p + p {
+      margin: 8px 0;
+    }
 
-.plume-content .hint-container {
-  &.note,
-  &.tip,
-  &.detail,
-  &.important {
-    a,
     code {
-      color: var(--vp-c-brand-1);
+      font-size: var(--vp-custom-block-code-font-size);
     }
-    a:hover {
-      color: var(--vp-c-brand-2);
+
+    &.note,
+    &.tip,
+    &.detail,
+    &.important {
+      a,
+      code {
+        color: var(--vp-c-brand-1);
+      }
+      a:hover {
+        color: var(--vp-c-brand-2);
+      }
     }
-  }
-  &.warning {
-    a,
-    code {
-      color: var(--vp-c-warning-1);
+    &.warning {
+      a,
+      code {
+        color: var(--vp-c-warning-1);
+      }
+      a:hover {
+        color: var(--vp-c-warning-2);
+      }
     }
-    a:hover {
-      color: var(--vp-c-warning-2);
+    &.caution {
+      a,
+      code {
+        color: var(--vp-c-danger-1);
+      }
+      a:hover {
+        color: var(--vp-c-danger-2);
+      }
+    }
+
+    th,
+    blockquote > p {
+      font-size: var(--vp-custom-block-font-size);
+      color: inherit;
     }
   }
-  &.caution {
-    a,
-    code {
-      color: var(--vp-c-danger-1);
+
+  .vp-code-demo {
+    border: solid 1px var(--vp-c-divider);
+    overflow: hidden;
+
+    &:hover {
+      box-shadow: none;
+    }
+
+    .vp-code-demo-header {
+      padding: 8px 12px;
     }
-    a:hover {
-      color: var(--vp-c-danger-2);
+
+    .vp-code-demo-code-wrapper {
+      margin-bottom: -0.9rem;
     }
-  }
 
-  th,
-  blockquote > p {
-    font-size: var(--vp-custom-block-font-size);
-    color: inherit;
+    .vp-code-demo-toggle-button {
+      margin: 0 12px 0 8px;
+      background-color: var(--vp-c-gray-2);
+
+      &:hover {
+        background-color: var(--vp-c-gray-1);
+      }
+    }
+
+    .vp-code-demo-title {
+      font-size: 1rem;
+      line-height: 1.75;
+    }
+
+    .vp-code-demo-display {
+      border-bottom: transparent;
+    }
+
+    .code-demo-jsfiddle .jsfiddle-button,
+    .code-demo-codepen .codepen-button {
+      background-color: transparent;
+    }
+
+    .vp-code-demo-codes div[class*='language-'] {
+      border-bottom: 2px dashed var(--vp-c-divider);
+
+      &:first-of-type {
+        border-top: 1px solid var(--vp-c-divider);
+      }
+      &:last-of-type {
+        border-bottom: none;
+      }
+    }
+
+    .vp-code-demo-codes div[class*='language-'] pre {
+      margin-bottom: 0;
+      border-radius: 0;
+    }
   }
 }
diff --git a/theme/src/client/styles/vars.scss b/theme/src/client/styles/vars.scss
@@ -69,6 +69,8 @@
   --vp-c-red-3: #e0575b;
   --vp-c-red-soft: rgba(244, 63, 94, 0.14);
 
+  --vp-c-purple: #f4eefe;
+
   --vp-c-sponsor: #db2777;
 }
 
@@ -93,6 +95,8 @@
   --vp-c-yellow-3: #a46a0a;
   --vp-c-yellow-soft: rgba(234, 179, 8, 0.16);
 
+  --vp-c-purple: #423655;
+
   --vp-c-red-1: #f66f81;
   --vp-c-red-2: #f14158;
   --vp-c-red-3: #b62a3c;
@@ -297,7 +301,7 @@
   --vp-code-bg: var(--vp-c-default-soft);
 
   --vp-code-block-color: var(--vp-c-text-2);
-  --vp-code-block-bg: var(--vp-c-bg-alt);
+  --vp-code-block-bg: var(--vp-c-bg-soft);
   --vp-code-block-divider-color: var(--vp-c-gutter);
 
   --vp-code-lang-color: var(--vp-c-text-3);
@@ -476,6 +480,15 @@
   --vp-c-text-hero-text: var(--vp-c-text-dark-1);
 }
 
+/**
+ * Component: Friends
+ * -------------------------------------------------------------------------- */
+:root {
+  --vp-friends-text-color: var(--vp-c-text-1);
+  --vp-friends-bg-color: var(--vp-c-bg);
+  --vp-friends-link-color: var(--vp-c-brand-1);
+  --vp-friends-border-color: var(--vp-c-border);
+}
 /**
  * Component: Badge
  * -------------------------------------------------------------------------- */
@@ -549,12 +562,14 @@
 }
 
 /* md enhance hints */
-:root {
-  // important
+:root,
+html.dark {
+  /* important */
   --important-title-color: var(--vp-c-text-1);
-  --important-bg-color: #f4eefe;
-  --important-border-color: #f4eefe;
+  --important-bg-color: var(--vp-c-purple);
+  --important-border-color: var(--vp-c-purple);
   --important-code-bg-color: rgb(163 113 247 / 10%);
+
   // info
   --info-title-color: var(--vp-c-text-1);
   --info-bg-color: var(--vp-custom-block-info-bg);
@@ -563,7 +578,7 @@
 
   // note
   --note-title-color: var(--vp-c-text-3);
-  --note-bg-color: var(--vp-c-bg-elv);
+  --note-bg-color: var(--vp-c-bg);
   --note-border-color: var(--vp-c-divider);
   --note-code-bg-color: var(--vp-c-default-soft);
 
@@ -591,6 +606,11 @@
   --detail-code-bg-color: var(--vp-custom-block-details-code-bg);
 }
 
+/* md enhance code-demo */
+:root {
+  --code-demo-header-bg-color: var(--vp-c-bg-soft);
+}
+
 :root {
   --t-color: 250ms ease;
   --code-bg-color: var(--vp-code-block-bg);