diff --git a/demo/Semi.Avalonia.Demo.Desktop/App.axaml b/demo/Semi.Avalonia.Demo.Desktop/App.axaml
index cb85fcd..9628b3e 100644
--- a/demo/Semi.Avalonia.Demo.Desktop/App.axaml
+++ b/demo/Semi.Avalonia.Demo.Desktop/App.axaml
@@ -2,7 +2,8 @@
     x:Class="Semi.Avalonia.Demo.Desktop.App"
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:Semi.Avalonia.Demo.Desktop">
+    xmlns:local="using:Semi.Avalonia.Demo.Desktop"
+    RequestedThemeVariant="Dark">
     <Application.Styles>
         <!--<StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" />-->
         <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" />
diff --git a/demo/Semi.Avalonia.Demo/Pages/PaletteDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/PaletteDemo.axaml
index b0206c4..7ec3669 100644
--- a/demo/Semi.Avalonia.Demo/Pages/PaletteDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/PaletteDemo.axaml
@@ -4,31 +4,68 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
+    <Design.DataContext>
+        <viewModels:PaletteDemoViewModel />
+    </Design.DataContext>
     <SplitView
-        CompactPaneLength="100"
+        Name="splitView"
+        CompactPaneLength="50"
         DisplayMode="CompactInline"
         IsPaneOpen="{Binding #toggle.IsChecked, Mode=TwoWay}"
         OpenPaneLength="300"
         PanePlacement="Right">
         <SplitView.Pane>
-            <Border Theme="{DynamicResource CardBorder}">
-                <StackPanel>
-                    <ToggleButton
-                        Name="toggle"
-                        HorizontalAlignment="Right"
-                        Content="Detail" />
-                    <TextBlock Text="Hello" />
-                </StackPanel>
-            </Border>
+            <StackPanel>
+                <ToggleButton
+                    Name="toggle"
+                    HorizontalAlignment="Right"
+                    Theme="{DynamicResource BorderlessToggleButton}">
+                    <PathIcon
+                        Width="16"
+                        Height="16"
+                        Data="M5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5C2 3.34315 3.34315 2 5 2ZM6 4C5.44772 4 5 4.44772 5 5V19C5 19.5523 5.44772 20 6 20H9C9.55229 20 10 19.5523 10 19V5C10 4.44772 9.55229 4 9 4H6Z" />
+                </ToggleButton>
+                <Border IsVisible="{Binding #splitView.IsPaneOpen}" Theme="{DynamicResource CardBorder}">
+                    <StackPanel>
+
+                        <TextBlock Text="Hello" />
+                    </StackPanel>
+                </Border>
+            </StackPanel>
 
         </SplitView.Pane>
         <SplitView.Content>
-            <StackPanel>
-                <TextBlock Text="Content" />
-            </StackPanel>
+            <ScrollViewer>
+                <StackPanel>
+                    <ItemsControl Items="{Binding Series}">
+                        <ItemsControl.ItemTemplate>
+                            <DataTemplate x:DataType="viewModels:ColorSeries">
+                                <DockPanel>
+                                    <TextBlock DockPanel.Dock="Top" Text=" " />
+                                    <ItemsControl Items="{Binding Color}">
+                                        <ItemsControl.ItemsPanel>
+                                            <ItemsPanelTemplate>
+                                                <UniformGrid Columns="10" />
+                                            </ItemsPanelTemplate>
+                                        </ItemsControl.ItemsPanel>
+                                        <ItemsControl.ItemTemplate>
+                                            <DataTemplate x:DataType="viewModels:ColorItemViewModel">
+                                                <Border Height="60" Background="{Binding Color}">
+                                                    <TextBlock VerticalAlignment="Center" Text="{Binding Name}" />
+                                                </Border>
+                                            </DataTemplate>
+                                        </ItemsControl.ItemTemplate>
+                                    </ItemsControl>
+                                </DockPanel>
+                            </DataTemplate>
+                        </ItemsControl.ItemTemplate>
+                    </ItemsControl>
+                </StackPanel>
+            </ScrollViewer>
         </SplitView.Content>
     </SplitView>
 </UserControl>
diff --git a/demo/Semi.Avalonia.Demo/Pages/PaletteDemo.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/PaletteDemo.axaml.cs
index d9c359b..321e719 100644
--- a/demo/Semi.Avalonia.Demo/Pages/PaletteDemo.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/PaletteDemo.axaml.cs
@@ -1,6 +1,7 @@
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Markup.Xaml;
+using Semi.Avalonia.Demo.ViewModels;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -9,5 +10,6 @@ public partial class PaletteDemo : UserControl
     public PaletteDemo()
     {
         InitializeComponent();
+        this.DataContext = new PaletteDemoViewModel();
     }
 }
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Themes/ToggleButton.axaml b/demo/Semi.Avalonia.Demo/Themes/ToggleButton.axaml
index 6a113d4..e3c7231 100644
--- a/demo/Semi.Avalonia.Demo/Themes/ToggleButton.axaml
+++ b/demo/Semi.Avalonia.Demo/Themes/ToggleButton.axaml
@@ -27,7 +27,6 @@
             <Style Selector="^ /template/ PathIcon">
                 <Setter Property="PathIcon.Data" Value="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM17 15C17.476 15 17.9408 14.9525 18.3901 14.862C17.296 17.3011 14.8464 19 12 19C8.13401 19 5 15.866 5 12C5 8.60996 7.40983 5.78277 10.6099 5.13803C10.218 6.01173 10 6.98041 10 8C10 11.866 13.134 15 17 15Z" />
             </Style>
-
         </Style>
     </ControlTheme>
 </ResourceDictionary>
diff --git a/demo/Semi.Avalonia.Demo/ViewModels/PaletteDemoViewModel.cs b/demo/Semi.Avalonia.Demo/ViewModels/PaletteDemoViewModel.cs
index a4f7904..515c832 100644
--- a/demo/Semi.Avalonia.Demo/ViewModels/PaletteDemoViewModel.cs
+++ b/demo/Semi.Avalonia.Demo/ViewModels/PaletteDemoViewModel.cs
@@ -1,4 +1,8 @@
+using System;
+using System.Collections.ObjectModel;
 using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+using Avalonia.Media;
 using CommunityToolkit.Mvvm.ComponentModel;
 
 namespace Semi.Avalonia.Demo.ViewModels;
@@ -6,12 +10,95 @@ namespace Semi.Avalonia.Demo.ViewModels;
 public class PaletteDemoViewModel: ObservableObject
 {
     private string[] _colors = { "Amber","Blue","Cyan","Green","Grey","Indigo","LightBlue","LightGreen","Lime","Orange","Pink","Purple","Red","Teal","Violet","Yellow" };
+    private ObservableCollection<ColorSeries> _series;
+
+    public ObservableCollection<ColorSeries> Series
+    {
+        get => _series;
+        set => SetProperty(ref _series, value);
+    }
+
+    public PaletteDemoViewModel()
+    {
+        Series = new ObservableCollection<ColorSeries>();
+        var resouceDictionary = (ResourceDictionary)(AvaloniaXamlLoader.Load(new Uri("avares://Semi.Avalonia/Themes/Light/Palette.axaml")));
+        foreach (var color in _colors)
+        {
+            ColorSeries s = new ColorSeries();
+            s.Initialize(resouceDictionary, color);
+            Series.Add(s);
+        }
+    }
 }
 
 public class ColorSeries: ObservableObject
 {
+    private ObservableCollection<ColorItemViewModel>? _colors;
+
+    public ObservableCollection<ColorItemViewModel>? Color
+    {
+        get => _colors;
+        set => SetProperty(ref _colors, value);
+    }
+
+    private string? _seriesName;
+
+    public string? SeriesName
+    {
+        get => _seriesName;
+        set => SetProperty(ref _seriesName, value);
+    }
+    
     internal void Initialize(IResourceDictionary resourceDictionary, string color)
     {
+        SeriesName = color;
+        Color = new ObservableCollection<ColorItemViewModel>();
         
+        for (int i = 0; i < 10; i++)
+        {
+            var key = "Semi" + color + i;
+            if (resourceDictionary.TryGetValue(key, out var value))
+            {
+                if (value is SolidColorBrush brush)
+                {
+                    string name = color + " " + i;
+                    var item = new ColorItemViewModel(name, brush, key);
+                    Color.Add(item);
+                } 
+            }
+        }
+    }
+}
+
+public class ColorItemViewModel : ObservableObject
+{
+
+    private IBrush _color;
+    public IBrush Color
+    {
+        get => _color;
+        set => SetProperty(ref _color, value);
+    }
+
+    private string _name;
+    public string Name
+    {
+        get => _name;
+        set => SetProperty(ref _name, value);
+    }
+
+    private string _resourceKey;
+
+    public string ResourceKey
+    {
+        get => _resourceKey;
+        set => SetProperty(ref _resourceKey, value);
+    }
+    
+    public ColorItemViewModel(string name, IBrush color, string resourceKey)
+    {
+        Name = name;
+        Color = color;
+        ResourceKey = resourceKey;
     }
 }
\ No newline at end of file