@voidzero-dev/vitepress-theme 4.0.1 → 4.0.3

package/README.md

@@ -1,16 +1,44 @@
 # @voidzero-dev/vitepress-theme
 
-Shared VitePress theme for VoidZero projects, including Vite+, Vite, Vitest, Rolldown, and OXC.
+Shared VitePress theme for VoidZero projects, including Vite+, Vite, Vitest, Rolldown, and Oxc.
 
-## Installation
+## Publishing package
+
+Make to sure to in latest commit
+
+1. Update version in `package.json`
+2. Add tag locally `git tag vx.y.z` (matching version in package.json)
+3. Push changes `git push origin`
+4. Push to remote `git push origin vx.y.z`
+5. Go to GitHub UI > "Releases" > "Tags" > Click the latest tag > "Create release from tag"
+6. Click "Publish release"
+
+## Developing locally
+
+For local development, linking is required between this theme directory and the downstream VoidZero project directories.
+
+1. Link theme into docs repos
+
+```bash
+# In theme
+pnpm install
+# Make @voidzero-dev/vitepress-theme available for global linking
+pnpm link --global
+
+# In project docs
+pnpm install
+# Link to theme
+pnpm link @voidzero-dev/vitepress-theme
+```
+
+2. Start VitePress server:
 
 ```bash
-npm install @voidzero-dev/vitepress-theme
-# or
-pnpm add @voidzero-dev/vitepress-theme
+# In project docs
+pnpm dev
 ```
 
-If developing locally, run `pnpm link` between the two directories instead.
+The downstream project will automatically reflect theme changes via HMR.
 
 ## Usage
 
@@ -19,21 +47,21 @@ If developing locally, run `pnpm link` between the two directories instead.
 In your `.vitepress/config.ts`:
 
 ```ts
-import { defineConfig } from 'vitepress'
-import { extendConfig } from '@voidzero-dev/vitepress-theme/config'
+import { defineConfig } from "vitepress";
+import { extendConfig } from "@voidzero-dev/vitepress-theme/config";
 
 const config = defineConfig({
   themeConfig: {
-    variant: 'viteplus',  // or 'vite', 'vitest', etc.
+    variant: "viteplus", // or 'vite', 'vitest', etc.
     nav: [
-      { text: 'Home', link: '/' },
+      { text: "Home", link: "/" },
       // ... your navigation
-    ]
-  }
-})
+    ],
+  },
+});
 
 // inject theme specific config
-export default extendConfig(config)
+export default extendConfig(config);
 ```
 
 Note the theme config injects the Tailwind plugin so the downstream project doesn't have to. If the downstream project
@@ -43,14 +71,14 @@ Note the theme config injects the Tailwind plugin so the downstream project does
 In your `.vitepress/theme/index.ts`:
 
 ```ts
-import type { Theme } from 'vitepress'
-import Theme from '@voidzero-dev/vitepress-theme'
-import './styles.css'
+import type { Theme } from "vitepress";
+import Theme from "@voidzero-dev/vitepress-theme";
+import "./styles.css";
 
 export default {
-    extends: BaseTheme as unknown as Theme,
-    Layout
-} satisfies Theme
+  extends: BaseTheme as unknown as Theme,
+  Layout,
+} satisfies Theme;
 ```
 
 In the CSS, import the CSS from theme (which imports tailwind):
@@ -63,7 +91,7 @@ In the CSS, import the CSS from theme (which imports tailwind):
 
 /* Project specific branding colors */
 :root[data-variant="vite"] {
-  --color-brand: #6B1EB9;
+  --color-brand: #6b1eb9;
 }
 
 :root.dark:not([data-theme])[data-variant="vite"],
@@ -72,6 +100,6 @@ In the CSS, import the CSS from theme (which imports tailwind):
 }
 
 :root[data-theme="light"][data-variant="vite"] {
-  --color-brand: #6B1EB9;
+  --color-brand: #6b1eb9;
 }
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voidzero-dev/vitepress-theme",
-  "version": "4.0.1",
+  "version": "4.0.3",
   "description": "Shared VitePress theme for VoidZero projects",
   "type": "module",
   "license": "UNLICENSED",
@@ -15,7 +15,7 @@
     "*.css"
   ],
   "peerDependencies": {
-    "vitepress": "^2.0.0-alpha.12",
+    "vitepress": "^2.0.0-alpha.15",
     "vue": "^3.5.0"
   },
   "dependencies": {

package/src/components/oss/Header.vue

@@ -16,7 +16,7 @@ import VPNavBarExtra from '@vp-default/VPNavBarExtra.vue'
 import VPSwitchAppearance from '@vp-default/VPSwitchAppearance.vue'
 import { useLangs } from '@vp-composables/langs'
 
-const { theme, frontmatter } = useData()
+const { theme, frontmatter, isDark } = useData()
 const nav = theme.value.nav
 
 const route = useRoute()
@@ -190,6 +190,7 @@ onUnmounted(() => {
 
 <template>
   <div
+    :data-theme="isDark ? 'dark' : undefined"
     :class="isMarketingPage ? 'relative w-full z-50' : 'relative w-full z-50 lg:fixed lg:left-0 lg:right-0 lg:top-[var(--vp-banner-height,0)]'">
     <header
       class="wrapper px-6 py-5 flex items-center justify-between relative bg-white dark:bg-primary border-b border-stroke dark:border-nickel">

package/src/styles/marketing.css

@@ -81,12 +81,12 @@
         border-bottom: 5px solid transparent;
         border-left: 5px solid transparent;
     }
-
-    .dark .wrapper--ticks::before, .dark .tick-left::before {
+    
+    [data-theme=dark] .wrapper--ticks::before, [data-theme=dark] .tick-left::before {
         border-left-color: var(--color-nickel);
     }
 
-    .dark .wrapper--ticks::after, .dark .tick-right::after {
+    [data-theme=dark] .wrapper--ticks::after, [data-theme=dark] .tick-right::after {
         border-right-color: var(--color-nickel);
     }