WIP

Signed-off-by: James Zuccon <zuccon@gmail.com>

docs/.vitepress/theme/Layout.vue

@@ -0,0 +1,14 @@
+<!--.vitepress/theme/MyLayout.vue-->
+<script setup>
+import DefaultTheme from 'vitepress/theme'
+
+const { Layout } = DefaultTheme
+</script>
+
+<template>
+  <Layout>
+    <template #aside-outline-before>
+      My custom sidebar top content
+    </template>
+  </Layout>
+</template>

docs/.vitepress/theme/index.ts

@@ -1,17 +1,13 @@
 // https://vitepress.dev/guide/custom-theme
-import { h } from 'vue'
-import type { Theme } from 'vitepress'
-import DefaultTheme from 'vitepress/theme'
-import './style.css'
+import type { Theme } from 'vitepress';
+import DefaultTheme from 'vitepress/theme';
+import Layout from './Layout.vue';
+import './style.css';
 
 export default {
   extends: DefaultTheme,
-  Layout: () => {
-    return h(DefaultTheme.Layout, null, {
-      // https://vitepress.dev/guide/extending-default-theme#layout-slots
-    })
-  },
+  Layout,
   enhanceApp({ app, router, siteData }) {
     // ...
-  }
-} satisfies Theme
+  },
+} satisfies Theme;

docs/.vitepress/theme/style.css

@@ -70,6 +70,22 @@
   --vp-c-danger-soft: var(--vp-c-red-soft);
 }
 
+.VPSidebarItem.level-2.is-active > .item > .indicator,
+.VPSidebarItem.level-3.is-active > .item > .indicator,
+.VPSidebarItem.level-4.is-active > .item > .indicator,
+.VPSidebarItem.level-5.is-active > .item > .indicator {
+  background-color: #b2fb54 !important;
+}
+
+.VPSidebarItem.level-0.is-active > .item .link > .text,
+.VPSidebarItem.level-1.is-active > .item .link > .text,
+.VPSidebarItem.level-2.is-active > .item .link > .text,
+.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: #b2fb54 !important;
+}
+
 /**
  * Component: Button
  * -------------------------------------------------------------------------- */