diff --git a/demo/Semi.Avalonia.Demo/Pages/ThemeVariantDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ThemeVariantDemo.axaml
index 77f5d88..7303773 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ThemeVariantDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ThemeVariantDemo.axaml
@@ -7,7 +7,15 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <ThemeVariantScope>
-        <TextBox Width="100" />
-    </ThemeVariantScope>
+    <Grid>
+        <ThemeVariantScope Name="scope">
+            <Border Theme="{StaticResource CardBorder}">
+                <StackPanel>
+                    <DatePicker />
+                    <CalendarDatePicker />
+                    <ToggleSwitch Content="Switch Theme" IsCheckedChanged="Switch_OnIsCheckedChanged" />
+                </StackPanel>
+            </Border>
+        </ThemeVariantScope>
+    </Grid>
 </UserControl>
diff --git a/demo/Semi.Avalonia.Demo/Pages/ThemeVariantDemo.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/ThemeVariantDemo.axaml.cs
index 7a177ae..92ea50b 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ThemeVariantDemo.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/ThemeVariantDemo.axaml.cs
@@ -1,13 +1,30 @@
 using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Interactivity;
 using Avalonia.Markup.Xaml;
+using Avalonia.Styling;
 
 namespace Semi.Avalonia.Demo.Pages;
 
 public partial class ThemeVariantDemo : UserControl
 {
+    private ThemeVariant _variant = ThemeVariant.Default;
     public ThemeVariantDemo()
     {
         InitializeComponent();
     }
+
+    private void Switch_OnIsCheckedChanged(object sender, RoutedEventArgs e)
+    {
+        if (_variant == ThemeVariant.Dark)
+        {
+            scope.RequestedThemeVariant = ThemeVariant.Default;
+            _variant = ThemeVariant.Default;
+        }
+        else
+        {
+            scope.RequestedThemeVariant = ThemeVariant.Dark;
+            _variant = ThemeVariant.Dark;
+        }
+    }
 }
\ No newline at end of file