diff --git a/docs/src/examples/components/PieChart/arc-props.svelte b/docs/src/examples/components/PieChart/arc-props.svelte
index 04fa03119..9dcfafd09 100644
--- a/docs/src/examples/components/PieChart/arc-props.svelte
+++ b/docs/src/examples/components/PieChart/arc-props.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
 	import { longData } from '$lib/utils/data';
+	import { fruitColors } from '$lib/utils/fruits';
 
 	const data = longData.filter((d) => d.year === 2019);
 	export { data };
@@ -10,6 +11,7 @@
 	{data}
 	key="fruit"
 	value="value"
+	cRange={fruitColors}
 	height={300}
 	props={{ arc: { class: 'stroke-surface-100' } }}
 />
diff --git a/docs/src/examples/components/PieChart/arc.svelte b/docs/src/examples/components/PieChart/arc.svelte
index 752fa4911..77de64888 100644
--- a/docs/src/examples/components/PieChart/arc.svelte
+++ b/docs/src/examples/components/PieChart/arc.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
 	import { longData } from '$lib/utils/data';
+	import { fruitColors } from '$lib/utils/fruits';
 
 	const data = longData.filter((d) => d.year === 2019);
 	export { data };
@@ -10,6 +11,7 @@
 	{data}
 	key="fruit"
 	value="value"
+	cRange={fruitColors}
 	height={180}
 	range={[-90, 90]}
 	outerRadius={160}
diff --git a/docs/src/examples/components/PieChart/basic.svelte b/docs/src/examples/components/PieChart/basic.svelte
index 3f9a0cac4..f5cd3b1ef 100644
--- a/docs/src/examples/components/PieChart/basic.svelte
+++ b/docs/src/examples/components/PieChart/basic.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
 	import { longData } from '$lib/utils/data';
+	import { fruitColors } from '$lib/utils/fruits';
 
 	const data = longData.filter((d) => d.year === 2019);
 	export { data };
 </script>
 
-<PieChart {data} key="fruit" value="value" height={300} />
+<PieChart {data} key="fruit" value="value" cRange={fruitColors} height={300} />
diff --git a/docs/src/examples/components/PieChart/colors-data-prop.svelte b/docs/src/examples/components/PieChart/colors-data-prop.svelte
index e20f59a89..6af56beac 100644
--- a/docs/src/examples/components/PieChart/colors-data-prop.svelte
+++ b/docs/src/examples/components/PieChart/colors-data-prop.svelte
@@ -8,10 +8,10 @@
 			return {
 				...d,
 				color: [
-					'var(--color-danger)',
-					'var(--color-warning)',
-					'var(--color-success)',
-					'var(--color-info)'
+					'var(--color-apples)',
+					'var(--color-bananas)',
+					'var(--color-cherries)',
+					'var(--color-grapes)'
 				][i]
 			};
 		});
diff --git a/docs/src/examples/components/PieChart/colors-variables.svelte b/docs/src/examples/components/PieChart/colors-variables.svelte
index 123bc4bb9..f3107247a 100644
--- a/docs/src/examples/components/PieChart/colors-variables.svelte
+++ b/docs/src/examples/components/PieChart/colors-variables.svelte
@@ -1,20 +1,10 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import { longData } from '$lib/utils/data';
 
 	const data = longData.filter((d) => d.year === 2019);
 	export { data };
 </script>
 
-<PieChart
-	{data}
-	key="fruit"
-	value="value"
-	height={300}
-	cRange={[
-		'var(--color-success)',
-		'var(--color-warning)',
-		'var(--color-danger)',
-		'var(--color-info)'
-	]}
-/>
+<PieChart {data} key="fruit" value="value" height={300} cRange={fruitColors} />
diff --git a/docs/src/examples/components/PieChart/donut-with-text.svelte b/docs/src/examples/components/PieChart/donut-with-text.svelte
index 0ec8eef3b..a93511fd8 100644
--- a/docs/src/examples/components/PieChart/donut-with-text.svelte
+++ b/docs/src/examples/components/PieChart/donut-with-text.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { PieChart, Text } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import { longData } from '$lib/utils/data';
 	import { format } from '@layerstack/utils';
 	import { sum } from 'd3-array';
@@ -12,6 +13,7 @@
 	{data}
 	key="fruit"
 	value="value"
+	cRange={fruitColors}
 	innerRadius={-20}
 	cornerRadius={5}
 	padAngle={0.02}
diff --git a/docs/src/examples/components/PieChart/donut.svelte b/docs/src/examples/components/PieChart/donut.svelte
index 638658d08..60a3484f2 100644
--- a/docs/src/examples/components/PieChart/donut.svelte
+++ b/docs/src/examples/components/PieChart/donut.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import { longData } from '$lib/utils/data';
 
 	const data = longData.filter((d) => d.year === 2019);
@@ -10,6 +11,7 @@
 	{data}
 	key="fruit"
 	value="value"
+	cRange={fruitColors}
 	innerRadius={-20}
 	cornerRadius={5}
 	padAngle={0.02}
diff --git a/docs/src/examples/components/PieChart/legend-custom-label.svelte b/docs/src/examples/components/PieChart/legend-custom-label.svelte
index 49a29b4e0..ad9af87b7 100644
--- a/docs/src/examples/components/PieChart/legend-custom-label.svelte
+++ b/docs/src/examples/components/PieChart/legend-custom-label.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import { longData } from '$lib/utils/data';
 
 	const data = longData.filter((d) => d.year === 2019);
@@ -10,6 +11,7 @@
 	{data}
 	key="fruit"
 	value="value"
+	cRange={fruitColors}
 	label={(d) => {
 		switch (d.fruit) {
 			case 'apples':
diff --git a/docs/src/examples/components/PieChart/legend-placement.svelte b/docs/src/examples/components/PieChart/legend-placement.svelte
index b25a1534b..3b381c956 100644
--- a/docs/src/examples/components/PieChart/legend-placement.svelte
+++ b/docs/src/examples/components/PieChart/legend-placement.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import { longData } from '$lib/utils/data';
 
 	const data = longData.filter((d) => d.year === 2019);
 	export { data };
 </script>
 
-<PieChart {data} key="fruit" value="value" height={300} legend />
+<PieChart {data} key="fruit" value="value" cRange={fruitColors} height={300} legend />
diff --git a/docs/src/examples/components/PieChart/legend-responsive.svelte b/docs/src/examples/components/PieChart/legend-responsive.svelte
index d2be01d03..1aeca6efb 100644
--- a/docs/src/examples/components/PieChart/legend-responsive.svelte
+++ b/docs/src/examples/components/PieChart/legend-responsive.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import { longData } from '$lib/utils/data';
 
 	const data = longData.filter((d) => d.year === 2019);
@@ -10,6 +11,7 @@
 	{data}
 	key="fruit"
 	value="value"
+	cRange={fruitColors}
 	height={300}
 	padding={{ bottom: 32 }}
 	legend={{
diff --git a/docs/src/examples/components/PieChart/legend-with-padding.svelte b/docs/src/examples/components/PieChart/legend-with-padding.svelte
index 4922baba1..8aad91f10 100644
--- a/docs/src/examples/components/PieChart/legend-with-padding.svelte
+++ b/docs/src/examples/components/PieChart/legend-with-padding.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import { longData } from '$lib/utils/data';
 
 	const data = longData.filter((d) => d.year === 2019);
@@ -10,6 +11,7 @@
 	{data}
 	key="fruit"
 	value="value"
+	cRange={fruitColors}
 	height={300}
 	padding={{ right: 80 }}
 	legend={{ placement: 'right', orientation: 'vertical' }}
diff --git a/docs/src/examples/components/PieChart/legend.svelte b/docs/src/examples/components/PieChart/legend.svelte
index b25a1534b..c7e9c5a1e 100644
--- a/docs/src/examples/components/PieChart/legend.svelte
+++ b/docs/src/examples/components/PieChart/legend.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
 	import { longData } from '$lib/utils/data';
+	import { fruitColors } from '$lib/utils/fruits';
 
 	const data = longData.filter((d) => d.year === 2019);
 	export { data };
 </script>
 
-<PieChart {data} key="fruit" value="value" height={300} legend />
+<PieChart {data} key="fruit" value="value" cRange={fruitColors} height={300} legend />
diff --git a/docs/src/examples/components/PieChart/motion-spring.svelte b/docs/src/examples/components/PieChart/motion-spring.svelte
index a55ff2899..0c27e7d6e 100644
--- a/docs/src/examples/components/PieChart/motion-spring.svelte
+++ b/docs/src/examples/components/PieChart/motion-spring.svelte
@@ -1,18 +1,24 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import ShowControl from '$lib/components/controls/fields/ShowField.svelte';
 	import { longData } from '$lib/utils/data';
 
 	const data = longData.filter((d) => d.year === 2019);
-	export { data };
-
 	let show = $state(true);
+	export { data };
 </script>
 
 <ShowControl bind:show label="Show Pie" />
 
 <div style:height="300px">
 	{#if show}
-		<PieChart {data} key="fruit" value="value" props={{ pie: { motion: 'spring' } }} />
+		<PieChart
+			{data}
+			key="fruit"
+			value="value"
+			cRange={fruitColors}
+			props={{ pie: { motion: 'spring' } }}
+		/>
 	{/if}
 </div>
diff --git a/docs/src/examples/components/PieChart/motion-tween.svelte b/docs/src/examples/components/PieChart/motion-tween.svelte
index 8b6f91621..1cc0988a0 100644
--- a/docs/src/examples/components/PieChart/motion-tween.svelte
+++ b/docs/src/examples/components/PieChart/motion-tween.svelte
@@ -1,18 +1,24 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import ShowControl from '$lib/components/controls/fields/ShowField.svelte';
 	import { longData } from '$lib/utils/data';
 
 	const data = longData.filter((d) => d.year === 2019);
-	export { data };
-
 	let show = $state(true);
+	export { data };
 </script>
 
 <ShowControl bind:show label="Show Pie" />
 
 <div style:height="300px">
 	{#if show}
-		<PieChart {data} key="fruit" value="value" props={{ pie: { motion: 'tween' } }} />
+		<PieChart
+			{data}
+			key="fruit"
+			value="value"
+			cRange={fruitColors}
+			props={{ pie: { motion: 'tween' } }}
+		/>
 	{/if}
 </div>
diff --git a/docs/src/examples/components/PieChart/offset-slice.svelte b/docs/src/examples/components/PieChart/offset-slice.svelte
index e619c9062..dec26cc12 100644
--- a/docs/src/examples/components/PieChart/offset-slice.svelte
+++ b/docs/src/examples/components/PieChart/offset-slice.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
 	import { Arc, PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import { longData } from '$lib/utils/data';
 
 	const data = longData.filter((d) => d.year === 2019);
 	export { data };
 </script>
 
-<PieChart {data} key="fruit" value="value" height={300}>
+<PieChart {data} key="fruit" value="value" cRange={fruitColors} height={300}>
 	{#snippet arc({ index, props })}
 		<Arc {...props} offset={index === 1 ? 16 : undefined} />
 	{/snippet}
diff --git a/docs/src/examples/components/PieChart/placement-custom.svelte b/docs/src/examples/components/PieChart/placement-custom.svelte
index e39b9dda1..a300f8764 100644
--- a/docs/src/examples/components/PieChart/placement-custom.svelte
+++ b/docs/src/examples/components/PieChart/placement-custom.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import { longData } from '$lib/utils/data';
 
 	const data = longData.filter((d) => d.year === 2019);
@@ -10,6 +11,7 @@
 	{data}
 	key="fruit"
 	value="value"
+	cRange={fruitColors}
 	height={300}
 	center={false}
 	props={{ group: { x: 200, center: 'y' } }}
diff --git a/docs/src/examples/components/PieChart/placement-left.svelte b/docs/src/examples/components/PieChart/placement-left.svelte
index 552eaa46f..81cd56fd6 100644
--- a/docs/src/examples/components/PieChart/placement-left.svelte
+++ b/docs/src/examples/components/PieChart/placement-left.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import { longData } from '$lib/utils/data';
 
 	const data = longData.filter((d) => d.year === 2019);
@@ -10,6 +11,7 @@
 	{data}
 	key="fruit"
 	value="value"
+	cRange={fruitColors}
 	height={300}
 	placement="left"
 	legend={{ placement: 'right', orientation: 'vertical' }}
diff --git a/docs/src/examples/components/PieChart/placement-right.svelte b/docs/src/examples/components/PieChart/placement-right.svelte
index 8aa5fbb02..7555d844b 100644
--- a/docs/src/examples/components/PieChart/placement-right.svelte
+++ b/docs/src/examples/components/PieChart/placement-right.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import { longData } from '$lib/utils/data';
 
 	const data = longData.filter((d) => d.year === 2019);
@@ -10,6 +11,7 @@
 	{data}
 	key="fruit"
 	value="value"
+	cRange={fruitColors}
 	height={300}
 	placement="right"
 	legend={{ placement: 'left', orientation: 'vertical' }}
diff --git a/docs/src/examples/components/PieChart/radius-fixed.svelte b/docs/src/examples/components/PieChart/radius-fixed.svelte
index 053165616..6a47ad10b 100644
--- a/docs/src/examples/components/PieChart/radius-fixed.svelte
+++ b/docs/src/examples/components/PieChart/radius-fixed.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import { longData } from '$lib/utils/data';
 
 	const data = longData.filter((d) => d.year === 2019);
 	export { data };
 </script>
 
-<PieChart {data} key="fruit" value="value" height={300} outerRadius={100} />
+<PieChart {data} key="fruit" value="value" cRange={fruitColors} height={300} outerRadius={100} />
diff --git a/docs/src/examples/components/PieChart/radius-offset.svelte b/docs/src/examples/components/PieChart/radius-offset.svelte
index ac3f2bd7c..ea27e5b91 100644
--- a/docs/src/examples/components/PieChart/radius-offset.svelte
+++ b/docs/src/examples/components/PieChart/radius-offset.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import { longData } from '$lib/utils/data';
 
 	const data = longData.filter((d) => d.year === 2019);
 	export { data };
 </script>
 
-<PieChart {data} key="fruit" value="value" height={300} outerRadius={-20} />
+<PieChart {data} key="fruit" value="value" cRange={fruitColors} height={300} outerRadius={-20} />
diff --git a/docs/src/examples/components/PieChart/radius-percent.svelte b/docs/src/examples/components/PieChart/radius-percent.svelte
index e38820895..e0d7dede5 100644
--- a/docs/src/examples/components/PieChart/radius-percent.svelte
+++ b/docs/src/examples/components/PieChart/radius-percent.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import { longData } from '$lib/utils/data';
 
 	const data = longData.filter((d) => d.year === 2019);
 	export { data };
 </script>
 
-<PieChart {data} key="fruit" value="value" height={300} outerRadius={0.8} />
+<PieChart {data} key="fruit" value="value" cRange={fruitColors} height={300} outerRadius={0.8} />
diff --git a/docs/src/examples/components/PieChart/series-click.svelte b/docs/src/examples/components/PieChart/series-click.svelte
index 1c8ea4839..c2a6b6e79 100644
--- a/docs/src/examples/components/PieChart/series-click.svelte
+++ b/docs/src/examples/components/PieChart/series-click.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import { longData } from '$lib/utils/data';
 	import { group } from 'd3-array';
 
@@ -10,6 +11,7 @@
 <PieChart
 	key="fruit"
 	value="value"
+	cRange={fruitColors}
 	series={Array.from(data, ([key, data]) => ({
 		key: key.toString(),
 		data
diff --git a/docs/src/examples/components/PieChart/series-props.svelte b/docs/src/examples/components/PieChart/series-props.svelte
index fbd21bf76..234d22b8c 100644
--- a/docs/src/examples/components/PieChart/series-props.svelte
+++ b/docs/src/examples/components/PieChart/series-props.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import { longData } from '$lib/utils/data';
 	import { group } from 'd3-array';
 
@@ -10,6 +11,7 @@
 <PieChart
 	key="fruit"
 	value="value"
+	cRange={fruitColors}
 	series={[
 		{ key: '2019', data: data.get(2019), props: { innerRadius: -20 } },
 		{ key: '2018', data: data.get(2018), props: { outerRadius: -30 } }
diff --git a/docs/src/examples/components/PieChart/series.svelte b/docs/src/examples/components/PieChart/series.svelte
index b9f82ad60..c2c94e1f8 100644
--- a/docs/src/examples/components/PieChart/series.svelte
+++ b/docs/src/examples/components/PieChart/series.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import { longData } from '$lib/utils/data';
 	import { group } from 'd3-array';
 
@@ -9,6 +10,7 @@
 
 <PieChart
 	key="fruit"
+	cRange={fruitColors}
 	value="value"
 	series={Array.from(data, ([key, data]) => ({
 		key: key.toString(),
diff --git a/docs/src/examples/components/PieChart/tooltip-click.svelte b/docs/src/examples/components/PieChart/tooltip-click.svelte
index 046704494..c4be1208b 100644
--- a/docs/src/examples/components/PieChart/tooltip-click.svelte
+++ b/docs/src/examples/components/PieChart/tooltip-click.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import { longData } from '$lib/utils/data';
 
 	const data = longData.filter((d) => d.year === 2019);
@@ -10,6 +11,7 @@
 	{data}
 	key="fruit"
 	value="value"
+	cRange={fruitColors}
 	height={300}
 	onTooltipClick={(e, detail) => {
 		console.log(e, detail);
diff --git a/docs/src/lib/utils/fruits.ts b/docs/src/lib/utils/fruits.ts
new file mode 100644
index 000000000..109e63a95
--- /dev/null
+++ b/docs/src/lib/utils/fruits.ts
@@ -0,0 +1,6 @@
+export const fruitColors = [
+	'var(--color-apples)',
+	'var(--color-bananas)',
+	'var(--color-cherries)',
+	'var(--color-grapes)'
+];