vuejs · Akryum · Mar 17, 2023 · Mar 17, 2023 · Mar 17, 2023
diff --git a/src/client/theme-default/NotFound.vue b/src/client/theme-default/NotFound.vue
@@ -84,7 +84,7 @@ onMounted(() => {
 
 .link {
   display: inline-block;
-  border: 1px solid var(--vp-c-brand);
+  border: 1px solid currentColor;
   border-radius: 16px;
   padding: 3px 16px;
   font-size: 14px;
@@ -94,7 +94,10 @@ onMounted(() => {
 }
 
 .link:hover {
-  border-color: var(--vp-c-brand-dark);
-  color: var(--vp-c-brand-dark);
+  color: var(--vp-c-brand-darker);
+}
+
+.dark .link:hover {
+  color: var(--vp-c-brand-lighter);
 }
 </style>
diff --git a/src/client/theme-default/components/VPDocAsideOutline.vue b/src/client/theme-default/components/VPDocAsideOutline.vue
@@ -27,11 +27,11 @@ useActiveAnchor(container, marker)
 </script>
 
 <template>
-  <div class="VPDocAsideOutline" :class="{ 'has-outline': headers.length > 0 }" ref="container">
+  <div class="VPDocAsideOutline" :class="{ 'has-outline': headers.length > 0 }" role="navigation" ref="container">
     <div class="content">
       <div class="outline-marker" ref="marker" />
 
-      <div class="outline-title">{{ resolveTitle(theme) }}</div>
+      <div class="outline-title" role="heading">{{ resolveTitle(theme) }}</div>
 
       <nav aria-labelledby="doc-outline-aria-label">
         <span class="visually-hidden" id="doc-outline-aria-label">
@@ -66,7 +66,7 @@ useActiveAnchor(container, marker)
   left: -1px;
   z-index: 0;
   opacity: 0;
-  width: 1px;
+  width: 2px;
   height: 18px;
   background-color: var(--vp-c-brand);
   transition: top 0.25s cubic-bezier(0, 1, 0.5, 1), background-color 0.5s, opacity 0.25s;

diff --git a/src/client/theme-default/components/VPDocFooter.vue b/src/client/theme-default/components/VPDocFooter.vue
@@ -83,12 +83,16 @@ const showFooter = computed(() => {
   line-height: 32px;
   font-size: 14px;
   font-weight: 500;
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-darker);
   transition: color 0.25s;
 }
 
 .edit-link-button:hover {
-  color: var(--vp-c-brand-dark);
+  text-decoration: underline;
+}
+
+.dark .edit-link-button {
+  color: var(--vp-c-brand-lighter);
 }
 
 .edit-link-icon {
@@ -159,7 +163,11 @@ const showFooter = computed(() => {
   line-height: 20px;
   font-size: 14px;
   font-weight: 500;
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-darker);
   transition: color 0.25s;
 }
+
+.dark .title {
+  color: var(--vp-c-brand-lighter);
+}
 </style>
diff --git a/src/client/theme-default/components/VPFlyout.vue b/src/client/theme-default/components/VPFlyout.vue
@@ -65,7 +65,11 @@ function onBlur() {
 }
 
 .VPFlyout:hover .text {
-  color: var(--vp-c-text-2);
+  color: var(--vp-c-brand-darker);
+}
+
+.dark .VPFlyout:hover .text {
+  color: var(--vp-c-brand-lighter);
 }
 
 .VPFlyout:hover .icon {

diff --git a/src/client/theme-default/components/VPMenuLink.vue b/src/client/theme-default/components/VPMenuLink.vue
@@ -44,11 +44,16 @@ const { page } = useData()
 }
 
 .link:hover {
-  color: var(--vp-c-brand);
   background-color: var(--vp-c-bg-elv-mute);
 }
 
+.link:hover,
 .link.active {
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-darker);
+}
+
+.dark .link:hover,
+.dark .link.active {
+  color: var(--vp-c-brand-lighter);
 }
 </style>
diff --git a/src/client/theme-default/components/VPNavBarMenuLink.vue b/src/client/theme-default/components/VPNavBarMenuLink.vue
@@ -40,13 +40,26 @@ const { page } = useData()
   font-weight: 500;
   color: var(--vp-c-text-1);
   transition: color 0.25s;
+  position: relative;
 }
 
-.VPNavBarMenuLink.active {
-  color: var(--vp-c-brand);
+.VPNavBarMenuLink.active::after {
+  content: '';
+  position: absolute;
+  inset: 16px 0;
+  border-radius: 8px;
+  background-color: var(--vp-c-brand);
+  opacity: 0.2;
+  z-index: 0;
 }
 
+.VPNavBarMenuLink.active,
 .VPNavBarMenuLink:hover {
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-darker);
+}
+
+.dark .VPNavBarMenuLink:hover,
+.dark .VPNavBarMenuLink.active {
+  color: var(--vp-c-brand-lighter);
 }
 </style>
diff --git a/src/client/theme-default/components/VPSidebarItem.vue b/src/client/theme-default/components/VPSidebarItem.vue
@@ -57,16 +57,15 @@ function onCaretClick() {
   <component :is="sectionTag" class="VPSidebarItem" :class="classes">
     <div v-if="item.text"
       class="item"
-      :role="itemRole"
       v-on="item.items ? { click: onItemInteraction, keydown: onItemInteraction } : {}"
       :tabindex="item.items && 0"
     >
       <div class="indicator" />
 
-      <VPLink v-if="item.link" :tag="linkTag" class="link" :href="item.link">
+      <VPLink v-if="item.link" :tag="linkTag" class="link" :href="item.link" :role="itemRole">
         <component :is="textTag" class="text" v-html="item.text" />
       </VPLink>
-      <component v-else :is="textTag" class="text" v-html="item.text" />
+      <component v-else :is="textTag" class="text" :role="itemRole" v-html="item.text" />
 
       <div v-if="item.collapsed != null"
         class="caret"
@@ -94,6 +93,10 @@ function onCaretClick() {
 </template>
 
 <style scoped>
+.VPSidebarItem {
+  position: relative;
+}
+
 .VPSidebarItem.level-0 {
   padding-bottom: 24px;
 }
@@ -117,10 +120,21 @@ function onCaretClick() {
   top: 6px;
   bottom: 6px;
   left: -17px;
-  width: 1px;
+  width: 2px;
   transition: background-color 0.25s;
 }
 
+.VPSidebarItem.is-active::after {
+  content: '';
+  position: absolute;
+  inset: 0 -8px;
+  border-radius: 8px;
+  background-color: var(--vp-c-brand);
+  opacity: 0.2;
+  z-index: 0;
+}
+
+/* .VPSidebarItem.level-1.is-active > .item > .indicator, */
 .VPSidebarItem.level-2.is-active > .item > .indicator,
 .VPSidebarItem.level-3.is-active > .item > .indicator,
 .VPSidebarItem.level-4.is-active > .item > .indicator,
@@ -180,9 +194,19 @@ function onCaretClick() {
 .VPSidebarItem.level-3.is-active > .item .link > .text,
 .VPSidebarItem.level-4.is-active > .item .link > .text,
 .VPSidebarItem.level-5.is-active > .item .link > .text {
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-darker);
 }
 
+.dark .VPSidebarItem.level-0.is-active > .item .link > .text,
+.dark .VPSidebarItem.level-1.is-active > .item .link > .text,
+.dark .VPSidebarItem.level-2.is-active > .item .link > .text,
+.dark .VPSidebarItem.level-3.is-active > .item .link > .text,
+.dark .VPSidebarItem.level-4.is-active > .item .link > .text,
+.dark .VPSidebarItem.level-5.is-active > .item .link > .text {
+  color: var(--vp-c-brand-lighter);
+}
+
+
 .caret {
   display: flex;
   justify-content: center;

diff --git a/src/client/theme-default/components/VPSwitchAppearance.vue b/src/client/theme-default/components/VPSwitchAppearance.vue
@@ -75,16 +75,15 @@ watch(checked, (newIsDark) => {
 </script>
 
 <template>
-  <label title="toggle dark mode">
-    <VPSwitch
-      class="VPSwitchAppearance"
-      :aria-checked="checked"
-      @click="toggle"
-    >
-      <VPIconSun class="sun" />
-      <VPIconMoon class="moon" />
-    </VPSwitch>
-  </label>
+  <VPSwitch
+    class="VPSwitchAppearance"
+    :aria-checked="checked"
+    aria-label="toggle dark mode"
+    @click="toggle"
+  >
+    <VPIconSun class="sun" />
+    <VPIconMoon class="moon" />
+  </VPSwitch>
 </template>
 
 <style scoped>

diff --git a/src/client/theme-default/styles/components/custom-block.css b/src/client/theme-default/styles/components/custom-block.css
@@ -59,6 +59,9 @@
 
 .custom-block-title {
   font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
 .custom-block p + p {
@@ -78,6 +81,7 @@
 .custom-block a {
   color: inherit;
   font-weight: 600;
+  transition: color 0.25s;
 }
 
 .custom-block a:hover {
@@ -87,3 +91,42 @@
 .custom-block code {
   font-size: var(--vp-custom-block-code-font-size);
 }
+
+/* Icons for a11y */
+
+.custom-block.info .custom-block-title::before,
+.custom-block.tip .custom-block-title::before,
+.custom-block.warning .custom-block-title::before,
+.custom-block.danger .custom-block-title::before {
+  content: '';
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+  background-color: currentColor;
+  mask-size: contain;
+  opacity: 0.8;
+}
+
+.custom-block.info .custom-block-title::before {
+  /* lucide:info */
+  -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg4ODg4OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+PHBhdGggZD0iTTEyIDE2di00bTAtNGguMDEiLz48L2c+PC9zdmc+);
+  mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg4ODg4OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+PHBhdGggZD0iTTEyIDE2di00bTAtNGguMDEiLz48L2c+PC9zdmc+);
+}
+
+.custom-block.tip .custom-block-title::before {
+  /* lucide:lightbulb */
+  -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg4ODg4OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik05IDE4aDZtLTUgNGg0bTEuMDktOGMuMTgtLjk4LjY1LTEuNzQgMS40MS0yLjVBNC42NSA0LjY1IDAgMCAwIDE4IDhBNiA2IDAgMCAwIDYgOGMwIDEgLjIzIDIuMjMgMS41IDMuNUE0LjYxIDQuNjEgMCAwIDEgOC45MSAxNCIvPjwvc3ZnPg==);
+  mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg4ODg4OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik05IDE4aDZtLTUgNGg0bTEuMDktOGMuMTgtLjk4LjY1LTEuNzQgMS40MS0yLjVBNC42NSA0LjY1IDAgMCAwIDE4IDhBNiA2IDAgMCAwIDYgOGMwIDEgLjIzIDIuMjMgMS41IDMuNUE0LjYxIDQuNjEgMCAwIDEgOC45MSAxNCIvPjwvc3ZnPg==);
+}
+
+.custom-block.warning .custom-block-title::before {
+  /* lucide:alert-circle */
+  -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg4ODg4OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+PHBhdGggZD0iTTEyIDh2NG0wIDRoLjAxIi8+PC9nPjwvc3ZnPg==);
+  mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg4ODg4OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+PHBhdGggZD0iTTEyIDh2NG0wIDRoLjAxIi8+PC9nPjwvc3ZnPg==);
+}
+
+.custom-block.danger .custom-block-title::before {
+  /* lucide:alert-octagon */
+  -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg4ODg4OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik03Ljg2IDJoOC4yOEwyMiA3Ljg2djguMjhMMTYuMTQgMjJINy44NkwyIDE2LjE0VjcuODZMNy44NiAyek0xMiA4djRtMCA0aC4wMSIvPjwvc3ZnPg==);
+  mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg4ODg4OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik03Ljg2IDJoOC4yOEwyMiA3Ljg2djguMjhMMTYuMTQgMjJINy44NkwyIDE2LjE0VjcuODZMNy44NiAyek0xMiA4djRtMCA0aC4wMSIvPjwvc3ZnPg==);
+}
diff --git a/src/client/theme-default/styles/components/vp-code-group.css b/src/client/theme-default/styles/components/vp-code-group.css
@@ -58,7 +58,7 @@
   bottom: -1px;
   left: 8px;
   z-index: 10;
-  height: 1px;
+  height: 2px;
   content: '';
   background-color: transparent;
   transition: background-color 0.25s;

diff --git a/src/client/theme-default/styles/components/vp-doc.css b/src/client/theme-default/styles/components/vp-doc.css
@@ -101,11 +101,15 @@
 
 .vp-doc a {
   font-weight: 500;
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-darker);
   text-decoration-style: dotted;
   transition: color 0.25s;
 }
 
+.dark .vp-doc a {
+  color: var(--vp-c-brand-lighter);
+}
+
 .vp-doc a:hover {
   /* color: var(--vp-c-brand-dark); */
   text-decoration: underline;
@@ -255,12 +259,20 @@
 }
 
 .vp-doc a > code {
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-darker);
   transition: color 0.25s;
 }
 
 .vp-doc a:hover > code {
-  color: var(--vp-c-brand-dark);
+  color: var(--vp-c-brand-darkest);
+}
+
+.dark .vp-doc a > code {
+  color: var(--vp-c-brand-lighter);
+}
+
+.dark .vp-doc a:hover > code {
+  color: var(--vp-c-brand-lightest);
 }
 
 .vp-doc div[class*='language-'] {
@@ -494,7 +506,7 @@
   z-index: 2;
   font-size: 12px;
   font-weight: 500;
-  color: var(--vp-c-text-dark-3);
+  color: var(--vp-c-text-dark-2);
   transition: color 0.4s, opacity 0.4s;
 }