feat(theme): improve <mark> styles

theme/src/client/styles/content.css

@@ -13,9 +13,9 @@
 .vp-doc h6 {
   position: relative;
   font-weight: 600;
+  color: var(--vp-c-text-1);
   overflow-wrap: break-word;
   outline: none;
-  transition: color var(--t-color);
 }
 
 .vp-doc h1 {
@@ -62,7 +62,7 @@
 
 .vp-doc .header-anchor {
   position: relative;
-  color: inherit;
+  color: currentcolor;
   text-decoration: none;
 }
 
@@ -277,6 +277,41 @@
   color: var(--vp-code-link-hover-color);
 }
 
+.vp-doc mark {
+  padding: 2px;
+  color: currentcolor;
+  background-color: transparent;
+  background-image:
+    linear-gradient(
+      to bottom,
+      transparent 25%,
+      var(--vp-mark-color-soft) 30%,
+      var(--vp-mark-color-soft) 50%,
+      var(--vp-mark-color) 75%,
+      var(--vp-mark-color) 90%,
+      var(--vp-mark-color-soft) 100%
+    );
+  background-repeat: no-repeat;
+  background-position: 0 1em;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+  animation: mark-highlight 1.5s 0.5s forwards;
+}
+
+.vp-doc :not(h1,h2,h3,h4,h5,h6) mark {
+  font-weight: bold;
+}
+
+@keyframes mark-highlight {
+  0% {
+    background-position: 0 1em;
+  }
+
+  100% {
+    background-position: 0 0;
+  }
+}
+
 /**
  * External links
  * -------------------------------------------------------------------------- */

theme/src/client/styles/vars.css

@@ -632,3 +632,16 @@ html.dark {
   --photo-swipe-bullet: var(--vp-c-bg);
   --photo-swipe-bullet-active: var(--vp-c-brand-1);
 }
+
+/**
+ * mark
+ * -------------------------------------------------------------------------- */
+:root {
+  --vp-mark-color: var(--vp-c-brand-3);
+  --vp-mark-color-soft: var(--vp-c-brand-soft);
+}
+
+.dark {
+  --vp-mark-color: var(--vp-c-brand-3);
+  --vp-mark-color-soft: var(--vp-c-brand-soft);
+}