From 9632c49da39a7a6477005f220360d497dc267dca Mon Sep 17 00:00:00 2001
From: Driss Chelouati <driss.chelouati@gmail.com>
Date: Sun, 10 Dec 2023 16:20:52 +0100
Subject: [PATCH] feat: improve theme-toggles demos

---
 src/plugins/components/theme-switch/theme-switch.doc.mdx | 2 +-
 src/plugins/components/theme-toggle/theme-toggle.doc.mdx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/plugins/components/theme-switch/theme-switch.doc.mdx b/src/plugins/components/theme-switch/theme-switch.doc.mdx
index 47ec57b..e950685 100644
--- a/src/plugins/components/theme-switch/theme-switch.doc.mdx
+++ b/src/plugins/components/theme-switch/theme-switch.doc.mdx
@@ -22,7 +22,7 @@ The theme switch is a control that lets you toggle between light and dark mode.
 
 Theme switches can be inverted to be more visible on dark backgrounds.
 
-<div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+<div className="border border-muted-200 dark:border-muted-800 bg-white dark:bg-slate-900 p-6 rounded-sm">
   <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-xs">
     <div>
       <Story of={ThemeSwitchStories.InvertedFalse} />
diff --git a/src/plugins/components/theme-toggle/theme-toggle.doc.mdx b/src/plugins/components/theme-toggle/theme-toggle.doc.mdx
index 54077a2..6db2b8a 100644
--- a/src/plugins/components/theme-toggle/theme-toggle.doc.mdx
+++ b/src/plugins/components/theme-toggle/theme-toggle.doc.mdx
@@ -22,7 +22,7 @@ The theme toggle is a control that lets you switch between light and dark mode.
 
 Theme toggles can be inverted to be more visible on dark backgrounds.
 
-<div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+<div className="border border-muted-200 dark:border-muted-800 bg-white dark:bg-slate-900 p-6 rounded-sm">
   <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-xs">
     <div>
       <Story of={ThemeToggleStories.InvertedFalse} />