diff --git a/apps/www/src/examples/dashboard/components/Overview.vue b/apps/www/src/examples/dashboard/components/Overview.vue
index 98fb6c77..5a38aecc 100644
--- a/apps/www/src/examples/dashboard/components/Overview.vue
+++ b/apps/www/src/examples/dashboard/components/Overview.vue
@@ -23,7 +23,7 @@ const data = [
     <VisStackedBar
       :x="(d: Data, i: number) => i"
       :y="(d: Data) => d.total"
-      color="#41b883"
+      color="hsl(var(--primary))"
       :rounded-corners="4"
       :bar-padding="0.15"
     />
diff --git a/apps/www/src/lib/registry/default/example/CardStats.vue b/apps/www/src/lib/registry/default/example/CardStats.vue
index 772db8eb..1297e237 100644
--- a/apps/www/src/lib/registry/default/example/CardStats.vue
+++ b/apps/www/src/lib/registry/default/example/CardStats.vue
@@ -52,14 +52,9 @@ const lineY = (d: Data) => d.revenue
               left: 10,
               bottom: 0,
             }"
-            :style="{
-              '--theme-primary': `hsl(${
-                theme?.cssVars[isDark ? 'dark' : 'light'].primary
-              })`,
-            }"
           >
-            <VisLine :x="lineX" :y="lineY" color="var(--theme-primary)" />
-            <VisScatter :x="lineX" :y="lineY" :size="6" stroke-color="var(--theme-primary)" :stroke-width="2" color="white" />
+            <VisLine :x="lineX" :y="lineY" color="hsl(var(--primary))" />
+            <VisScatter :x="lineX" :y="lineY" :size="6" stroke-color="hsl(var(--primary))" :stroke-width="2" color="white" />
           </VisXYContainer>
         </div>
       </CardContent>
@@ -91,7 +86,7 @@ const lineY = (d: Data) => d.revenue
               :x="lineX"
               :y="(d: Data) => d.subscription"
               :bar-padding="0.1"
-              :rounded-corners="0" color="var(--theme-primary)"
+              :rounded-corners="0" color="hsl(var(--primary))"
             />
           </VisXYContainer>
         </div>
diff --git a/apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue b/apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue
index fc998ccc..fdbbca8e 100644
--- a/apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue
+++ b/apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue
@@ -16,10 +16,6 @@ import {
 import { themes } from '@/lib/registry/themes'
 import { useConfigStore } from '@/stores/config'
 
-const { isDark } = useData()
-const cfg = useConfigStore()
-const theme = computed(() => themes.find(theme => theme.name === cfg.config.value.theme))
-
 const goal = ref(350)
 
 type Data = typeof data[number]
@@ -84,16 +80,13 @@ const data = [
           :data="data"
           height="60px"
           :style="{
-            'opacity': 0.2,
-            '--theme-primary': `hsl(${
-              theme?.cssVars[isDark ? 'dark' : 'light'].primary
-            })`,
+            opacity: 0.2,
           }"
         >
           <VisStackedBar
             :x="(d: Data, i :number) => i"
             :y="(d: Data) => d.goal"
-            color="var(--theme-primary)"
+            color="hsl(var(--primary))"
             :bar-padding="0.1"
             :rounded-corners="0"
           />
diff --git a/apps/www/src/lib/registry/default/example/Cards/Metric.vue b/apps/www/src/lib/registry/default/example/Cards/Metric.vue
index 0db8c3fc..0100f55e 100644
--- a/apps/www/src/lib/registry/default/example/Cards/Metric.vue
+++ b/apps/www/src/lib/registry/default/example/Cards/Metric.vue
@@ -10,8 +10,6 @@ import {
 } from '@/lib/registry/default/ui/card'
 import { useConfigStore } from '@/stores/config'
 
-const { themePrimary } = useConfigStore()
-
 type Data = typeof data[number]
 const data = [
   { average: 400, today: 240 },
@@ -74,15 +72,14 @@ function computeLineOpacity(val: any, index: number) {
             bottom: 0,
           }"
           :style="{
-            '--theme-primary': themePrimary,
             '--vis-tooltip-padding': '0px',
             '--vis-tooltip-background-color': 'transparent',
             '--vis-tooltip-border-color': 'transparent',
           }"
         >
           <VisTooltip />
-          <VisLine :x="x" :y="[(d: Data) => d.average, (d: Data) => d.today]" :stroke-width="2" color="var(--theme-primary)" :attributes="{ [Line.selectors.linePath]: { opacity: computeLineOpacity } }" />
-          <VisScatter :x="x" :y="[(d: Data) => d.average, (d: Data) => d.today]" :size="6" :stroke-width="2" stroke-color="var(--theme-primary)" color="white" />
+          <VisLine :x="x" :y="[(d: Data) => d.average, (d: Data) => d.today]" :stroke-width="2" color="hsl(var(--primary))" :attributes="{ [Line.selectors.linePath]: { opacity: computeLineOpacity } }" />
+          <VisScatter :x="x" :y="[(d: Data) => d.average, (d: Data) => d.today]" :size="6" :stroke-width="2" stroke-color="hsl(var(--primary))" color="white" />
           <VisCrosshair :template="template" />
         </VisXYContainer>
       </div>
diff --git a/apps/www/src/lib/registry/new-york/example/CardStats.vue b/apps/www/src/lib/registry/new-york/example/CardStats.vue
index 540a627e..ff401318 100644
--- a/apps/www/src/lib/registry/new-york/example/CardStats.vue
+++ b/apps/www/src/lib/registry/new-york/example/CardStats.vue
@@ -1,10 +1,6 @@
 <script setup lang="ts">
 import { VisLine, VisScatter, VisStackedBar, VisXYContainer } from '@unovis/vue'
-import { computed } from 'vue'
-import { useData } from 'vitepress'
 import { Card, CardContent, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
-import { useConfigStore } from '@/stores/config'
-import { themes } from '@/lib/registry/themes'
 
 type Data = typeof data[number]
 const data = [
@@ -18,11 +14,6 @@ const data = [
   { revenue: 26475, subscription: 189 },
 ]
 
-const cfg = useConfigStore()
-
-const { isDark } = useData()
-const theme = computed(() => themes.find(theme => theme.name === cfg.config.value.theme))
-
 const lineX = (d: Data, i: number) => i
 const lineY = (d: Data) => d.revenue
 </script>
@@ -52,14 +43,9 @@ const lineY = (d: Data) => d.revenue
               left: 10,
               bottom: 0,
             }"
-            :style="{
-              '--theme-primary': `hsl(${
-                theme?.cssVars[isDark ? 'dark' : 'light'].primary
-              })`,
-            }"
           >
-            <VisLine :x="lineX" :y="lineY" color="var(--theme-primary)" />
-            <VisScatter :x="lineX" :y="lineY" :size="6" stroke-color="var(--theme-primary)" :stroke-width="2" color="white" />
+            <VisLine :x="lineX" :y="lineY" color="hsl(var(--primary))" />
+            <VisScatter :x="lineX" :y="lineY" :size="6" stroke-color="hsl(var(--primary))" :stroke-width="2" color="white" />
           </VisXYContainer>
         </div>
       </CardContent>
@@ -81,17 +67,13 @@ const lineY = (d: Data) => d.revenue
 
         <div class="mt-4 h-[80px]">
           <VisXYContainer
-            height="80px" :data="data" :style="{
-              '--theme-primary': `hsl(${
-                theme?.cssVars[isDark ? 'dark' : 'light'].primary
-              })`,
-            }"
+            height="80px" :data="data"
           >
             <VisStackedBar
               :x="lineX"
               :y="(d: Data) => d.subscription"
               :bar-padding="0.1"
-              :rounded-corners="0" color="var(--theme-primary)"
+              :rounded-corners="0" color="hsl(var(--primary))"
             />
           </VisXYContainer>
         </div>
diff --git a/apps/www/src/lib/registry/new-york/example/Cards/ActivityGoal.vue b/apps/www/src/lib/registry/new-york/example/Cards/ActivityGoal.vue
index 420887d9..1128b70b 100644
--- a/apps/www/src/lib/registry/new-york/example/Cards/ActivityGoal.vue
+++ b/apps/www/src/lib/registry/new-york/example/Cards/ActivityGoal.vue
@@ -12,9 +12,6 @@ import {
   CardHeader,
   CardTitle,
 } from '@/lib/registry/new-york/ui/card'
-import { useConfigStore } from '@/stores/config'
-
-const { themePrimary } = useConfigStore()
 
 const goal = ref(350)
 
@@ -80,14 +77,13 @@ const data = [
           :data="data"
           height="60px"
           :style="{
-            'opacity': 0.2,
-            '--theme-primary': themePrimary,
+            opacity: 0.2,
           }"
         >
           <VisStackedBar
             :x="(d: Data, i :number) => i"
             :y="(d: Data) => d.goal"
-            color="var(--theme-primary)"
+            color="hsl(var(--primary))"
             :bar-padding="0.1"
             :rounded-corners="0"
           />
diff --git a/apps/www/src/lib/registry/new-york/example/Cards/Metric.vue b/apps/www/src/lib/registry/new-york/example/Cards/Metric.vue
index d767a66f..f47d6a01 100644
--- a/apps/www/src/lib/registry/new-york/example/Cards/Metric.vue
+++ b/apps/www/src/lib/registry/new-york/example/Cards/Metric.vue
@@ -10,8 +10,6 @@ import {
 } from '@/lib/registry/new-york/ui/card'
 import { useConfigStore } from '@/stores/config'
 
-const { themePrimary } = useConfigStore()
-
 type Data = typeof data[number]
 const data = [
   { average: 400, today: 240 },
@@ -74,15 +72,14 @@ function computeLineOpacity(val: any, index: number) {
             bottom: 0,
           }"
           :style="{
-            '--theme-primary': themePrimary,
             '--vis-tooltip-padding': '0px',
             '--vis-tooltip-background-color': 'transparent',
             '--vis-tooltip-border-color': 'transparent',
           }"
         >
           <VisTooltip />
-          <VisLine :x="x" :y="[(d: Data) => d.average, (d: Data) => d.today]" :stroke-width="2" color="var(--theme-primary)" :attributes="{ [Line.selectors.linePath]: { opacity: computeLineOpacity } }" />
-          <VisScatter :x="x" :y="[(d: Data) => d.average, (d: Data) => d.today]" :size="6" :stroke-width="2" stroke-color="var(--theme-primary)" color="white" />
+          <VisLine :x="x" :y="[(d: Data) => d.average, (d: Data) => d.today]" :stroke-width="2" color="hsl(var(--primary))" :attributes="{ [Line.selectors.linePath]: { opacity: computeLineOpacity } }" />
+          <VisScatter :x="x" :y="[(d: Data) => d.average, (d: Data) => d.today]" :size="6" :stroke-width="2" stroke-color="hsl(var(--primary))" color="white" />
           <VisCrosshair :template="template" />
         </VisXYContainer>
       </div>