@voidzero-dev/vitepress-theme 4.0.2 → 4.0.4

package/config.js

@@ -12,7 +12,7 @@ const aliases = {
     "src/composables/vitepress-default"
   ),
   "@vp-support": resolve(__dirname, "src/support/vitepress-default"),
-  "@rive-app/canvas": import.meta.resolve("@rive-app/canvas")
+  "@rive-app/canvas-lite": import.meta.resolve("@rive-app/canvas-lite"),
 };
 
 export function extendConfig(c) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voidzero-dev/vitepress-theme",
-  "version": "4.0.2",
+  "version": "4.0.4",
   "description": "Shared VitePress theme for VoidZero projects",
   "type": "module",
   "license": "UNLICENSED",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@docsearch/css": "^4.3.2",
     "@docsearch/js": "^4.3.2",
-    "@rive-app/canvas": "^2.31.6",
+    "@rive-app/canvas-lite": "^2.33.3",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.1.18",
     "@vue/shared": "^3.5.24",

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/components/shared/RiveAnimation.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import * as rive from "@rive-app/canvas"
+import * as rive from "@rive-app/canvas-lite"
 import { ref, onMounted, onUnmounted, computed } from "vue"
 
 interface Props {

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);
     }