diff --git a/docs/src/examples/components/ArcChart/series-arc.svelte b/docs/src/examples/components/ArcChart/series-arc.svelte
index 0c3724c8a..5d812fc6e 100644
--- a/docs/src/examples/components/ArcChart/series-arc.svelte
+++ b/docs/src/examples/components/ArcChart/series-arc.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { ArcChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruitColors';
 	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}
 	range={[-90, 90]}
 	outerRadius={-25}
 	innerRadius={-20}
diff --git a/docs/src/examples/components/ArcChart/series-start-180.svelte b/docs/src/examples/components/ArcChart/series-start-180.svelte
index dbddff452..6a4022f14 100644
--- a/docs/src/examples/components/ArcChart/series-start-180.svelte
+++ b/docs/src/examples/components/ArcChart/series-start-180.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { ArcChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruitColors';
 	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}
 	range={[180, -180]}
 	outerRadius={-25}
 	innerRadius={-20}
diff --git a/docs/src/examples/components/ArcChart/series-start-90.svelte b/docs/src/examples/components/ArcChart/series-start-90.svelte
index 69af3cfed..2ad37f421 100644
--- a/docs/src/examples/components/ArcChart/series-start-90.svelte
+++ b/docs/src/examples/components/ArcChart/series-start-90.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { ArcChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruitColors';
 	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}
 	range={[90, -270]}
 	outerRadius={-25}
 	innerRadius={-20}
diff --git a/docs/src/examples/components/ArcChart/series-track-color.svelte b/docs/src/examples/components/ArcChart/series-track-color.svelte
index e67a28979..876a17092 100644
--- a/docs/src/examples/components/ArcChart/series-track-color.svelte
+++ b/docs/src/examples/components/ArcChart/series-track-color.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { ArcChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruitColors';
 	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}
 	outerRadius={-25}
 	innerRadius={-20}
 	cornerRadius={10}
diff --git a/docs/src/examples/components/ArcChart/series.svelte b/docs/src/examples/components/ArcChart/series.svelte
index b494cf3d6..81db8934a 100644
--- a/docs/src/examples/components/ArcChart/series.svelte
+++ b/docs/src/examples/components/ArcChart/series.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { ArcChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruitColors';
 	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}
 	outerRadius={-25}
 	innerRadius={-20}
 	cornerRadius={10}
diff --git a/docs/src/lib/utils/fruitColors.ts b/docs/src/lib/utils/fruitColors.ts
new file mode 100644
index 000000000..109e63a95
--- /dev/null
+++ b/docs/src/lib/utils/fruitColors.ts
@@ -0,0 +1,6 @@
+export const fruitColors = [
+	'var(--color-apples)',
+	'var(--color-bananas)',
+	'var(--color-cherries)',
+	'var(--color-grapes)'
+];