From 441662c350916b0ecdbee0c479284a6eb92073c0 Mon Sep 17 00:00:00 2001
From: Pouya Saadeghi <pouya.saadeghi@gmail.com>
Date: Sat, 9 Dec 2023 02:48:58 +0330
Subject: [PATCH] docs: add toggle custom color example

---
 .../src/routes/(docs)/components/toggle/+page.svelte.md    | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/docs/src/routes/(docs)/components/toggle/+page.svelte.md b/src/docs/src/routes/(docs)/components/toggle/+page.svelte.md
index 7d0b2956083..a00e5fc1347 100644
--- a/src/docs/src/routes/(docs)/components/toggle/+page.svelte.md
+++ b/src/docs/src/routes/(docs)/components/toggle/+page.svelte.md
@@ -158,3 +158,10 @@ data="{[
 <input type="checkbox" class="$$toggle" id="my-toggle" />`
 }</pre>
 </Component>
+
+<Component title="Toggle with custom color">
+<input type="checkbox" class="toggle [--tglbg:yellow] bg-blue-500 hover:bg-blue-700 border-blue-500" checked />
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<input type="checkbox" class="$$toggle [--tglbg:yellow] bg-blue-500 hover:bg-blue-700 border-blue-500" checked />`
+}</pre>
+</Component>