From 97b090b49b7063f93e2c8b0f764bf0d32410000b Mon Sep 17 00:00:00 2001
From: tanhauhau <lhtan93@gmail.com>
Date: Thu, 6 Jul 2023 08:58:57 +0800
Subject: [PATCH] docs: fix contrast for component-binding example

---
 .../12-component-bindings/App.svelte            | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/documentation/examples/05-bindings/12-component-bindings/App.svelte b/documentation/examples/05-bindings/12-component-bindings/App.svelte
index b3666f891d..254ced9464 100644
--- a/documentation/examples/05-bindings/12-component-bindings/App.svelte
+++ b/documentation/examples/05-bindings/12-component-bindings/App.svelte
@@ -9,6 +9,21 @@
 	}
 </script>
 
-<h1 style="color: {pin ? '#333' : '#ccc'}">{view}</h1>
+<h1 class:pin>{view}</h1>
 
 <Keypad bind:value={pin} on:submit={handleSubmit} />
+
+<style>
+	h1 {
+		color: #ccc;
+	}
+	h1.pin {
+		color: #333;
+	}
+	:global(body.dark) h1 {
+		color: #444;
+	}
+	:global(body.dark) h1.pin {
+		color: #fff;
+	}
+</style>