diff --git a/demo/Semi.Avalonia.Demo.Desktop/App.axaml b/demo/Semi.Avalonia.Demo.Desktop/App.axaml
index cb85fcd..c12b782 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="Light">
     <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/Controls/ColorDetailControl.axaml b/demo/Semi.Avalonia.Demo/Controls/ColorDetailControl.axaml
new file mode 100644
index 0000000..81d842e
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Controls/ColorDetailControl.axaml
@@ -0,0 +1,109 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls">
+    <PathGeometry x:Key="CopyIcon">M5 7C3.89543 7 3 7.89543 3 9V19C3 20.1046 3.89543 21 5 21H15C16.1046 21 17 20.1046 17 19V9C17 7.89543 16.1046 7 15 7H5Z,M7 4C7 2.89543 7.89543 2 9 2H20C21.1046 2 22 2.89543 22 4V15C22 16.1046 21.1046 17 20 17H19V8C19 6 18 5 16 5H7V4Z</PathGeometry>
+    <ControlTheme x:Key="{x:Type controls:ColorDetailControl}" TargetType="controls:ColorDetailControl">
+        <!--  Add Resources Here  -->
+        <Setter Property="controls:ColorDetailControl.Template">
+            <ControlTemplate TargetType="controls:ColorDetailControl">
+                <StackPanel>
+                    <TextBlock
+                        Margin="0,0,0,8"
+                        Classes="H5"
+                        Text="{TemplateBinding ResourceName}"
+                        Theme="{DynamicResource TitleTextBlock}" />
+                    <Border
+                        Height="100"
+                        HorizontalAlignment="Stretch"
+                        Background="{TemplateBinding Background}"
+                        CornerRadius="6" />
+                    <Grid ColumnDefinitions="*, Auto" RowDefinitions="*, *, *, *, *, *">
+                        <!--  Row 0-1 ResourceKey  -->
+                        <TextBlock
+                            Grid.Column="0"
+                            Grid.ColumnSpan="2"
+                            Margin="4,8,0,0"
+                            VerticalAlignment="Center"
+                            Classes="Tertiary"
+                            Text="ResourceKey" />
+                        <SelectableTextBlock
+                            Grid.Row="1"
+                            Grid.Column="0"
+                            VerticalAlignment="Center"
+                            Text="{TemplateBinding ResourceKey}" />
+                        <Button
+                            Grid.Row="1"
+                            Grid.Column="1"
+                            Classes="Tertiary"
+                            Command="{Binding $parent[controls:ColorDetailControl].Copy}"
+                            CommandParameter="{x:Static controls:ColorDetailControl.KEY_ResourceKey}"
+                            Theme="{DynamicResource BorderlessButton}">
+                            <PathIcon
+                                Width="12"
+                                Height="12"
+                                Data="{StaticResource CopyIcon}"
+                                Foreground="{Binding $parent[Button].Foreground}" />
+                        </Button>
+
+                        <!--  Row 2-3 HEX  -->
+                        <TextBlock
+                            Grid.Row="2"
+                            Grid.Column="0"
+                            Grid.ColumnSpan="2"
+                            Margin="4,8,0,0"
+                            VerticalAlignment="Center"
+                            Classes="Tertiary"
+                            Text="ARGB" />
+                        <SelectableTextBlock
+                            Grid.Row="3"
+                            Grid.Column="0"
+                            VerticalAlignment="Center"
+                            Text="{TemplateBinding Hex}" />
+                        <Button
+                            Grid.Row="3"
+                            Grid.Column="1"
+                            Classes="Tertiary"
+                            Command="{Binding $parent[controls:ColorDetailControl].Copy}"
+                            CommandParameter="{x:Static controls:ColorDetailControl.KEY_Hex}"
+                            Theme="{DynamicResource BorderlessButton}">
+                            <PathIcon
+                                Width="12"
+                                Height="12"
+                                Data="{StaticResource CopyIcon}"
+                                Foreground="{Binding $parent[Button].Foreground}" />
+                        </Button>
+
+                        <!--  Row 4-5 Opacity  -->
+                        <TextBlock
+                            Grid.Row="4"
+                            Grid.Column="0"
+                            Grid.ColumnSpan="2"
+                            Margin="4,8,0,0"
+                            VerticalAlignment="Center"
+                            Classes="Tertiary"
+                            Text="Opacity" />
+                        <SelectableTextBlock
+                            Grid.Row="5"
+                            Grid.Column="0"
+                            VerticalAlignment="Center"
+                            Text="{TemplateBinding OpacityNumber}" />
+                        <Button
+                            Grid.Row="5"
+                            Grid.Column="1"
+                            Classes="Tertiary"
+                            Command="{Binding $parent[controls:ColorDetailControl].Copy}"
+                            CommandParameter="{x:Static controls:ColorDetailControl.KEY_Opacity}"
+                            Theme="{DynamicResource BorderlessButton}">
+                            <PathIcon
+                                Width="12"
+                                Height="12"
+                                Data="{StaticResource CopyIcon}"
+                                Foreground="{Binding $parent[Button].Foreground}" />
+                        </Button>
+                    </Grid>
+                </StackPanel>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>
diff --git a/demo/Semi.Avalonia.Demo/Controls/ColorDetailControl.cs b/demo/Semi.Avalonia.Demo/Controls/ColorDetailControl.cs
new file mode 100644
index 0000000..0dfc7d8
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Controls/ColorDetailControl.cs
@@ -0,0 +1,91 @@
+using System.Globalization;
+using Avalonia;
+using Avalonia.Controls.Primitives;
+using Avalonia.Input.Platform;
+using Avalonia.Media;
+using Avalonia.Media.Immutable;
+
+namespace Semi.Avalonia.Demo.Controls;
+
+public class ColorDetailControl: TemplatedControl
+{
+    public const string KEY_ResourceKey = "ResourceKey";
+    public const string KEY_Hex = "Hex";
+    public const string KEY_Opacity = "Opacity";
+    
+    public static readonly StyledProperty<string?> ResourceKeyProperty = AvaloniaProperty.Register<ColorDetailControl, string?>(
+        nameof(ResourceKey));
+    public string? ResourceKey
+    {
+        get => GetValue(ResourceKeyProperty);
+        set => SetValue(ResourceKeyProperty, value);
+    }
+
+    public static readonly StyledProperty<string?> ResourceNameProperty = AvaloniaProperty.Register<ColorDetailControl, string?>(
+        nameof(ResourceName));
+
+    public string? ResourceName
+    {
+        get => GetValue(ResourceNameProperty);
+        set => SetValue(ResourceNameProperty, value);
+    }
+
+    public static readonly DirectProperty<ColorDetailControl, string?> HexProperty = AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(
+        nameof(Hex), o => o.Hex);
+    private string? _hex;
+    public string? Hex
+    {
+        get => _hex;
+        private set => SetAndRaise(HexProperty, ref _hex, value);
+    }
+    
+    public static readonly DirectProperty<ColorDetailControl, string?> OpacityNumberProperty = AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(
+        nameof(OpacityNumber), o => o.OpacityNumber);
+    private string? _opacityNumber;
+    public string? OpacityNumber
+    {
+        get => _opacityNumber;
+        private set => SetAndRaise(OpacityNumberProperty, ref _opacityNumber, value);
+    }
+    
+    
+    static ColorDetailControl()
+    {
+        BackgroundProperty.Changed.AddClassHandler<ColorDetailControl>((o, e) => o.OnBackgroundChanged(e));
+    }
+
+    private void OnBackgroundChanged(AvaloniaPropertyChangedEventArgs args)
+    {
+        var color = args.GetNewValue<IBrush>();
+        if (color is ISolidColorBrush b)
+        {
+            Hex = b.Color.ToString().ToUpperInvariant();
+            OpacityNumber = b.Opacity.ToString(CultureInfo.InvariantCulture);
+        }
+    }
+
+    public async void Copy(object o)
+    {
+        string? text = null;
+        if (o is string s)
+        {
+            switch (s)
+            {
+                case KEY_ResourceKey: text = ResourceKey;
+                    break;
+                case KEY_Hex: text = Hex;
+                    break;
+                case KEY_Opacity: text = OpacityNumber;
+                    break;
+                default: text = string.Empty; break;
+            }
+        }
+
+        if (Application.Current is { Clipboard: { } c })
+        {
+            await c.SetTextAsync(text??string.Empty);
+        }
+        
+    }
+    
+}
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Controls/ColorItemControl.axaml b/demo/Semi.Avalonia.Demo/Controls/ColorItemControl.axaml
new file mode 100644
index 0000000..25b4bd9
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Controls/ColorItemControl.axaml
@@ -0,0 +1,45 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:Semi.Avalonia.Demo.Controls">
+    <Design.PreviewWith>
+        <controls:ColorItemControl />
+    </Design.PreviewWith>
+
+    <ControlTheme x:Key="{x:Type controls:ColorItemControl}" TargetType="controls:ColorItemControl">
+        <Setter Property="controls:ColorItemControl.Width" Value="120" />
+        <Setter Property="controls:ColorItemControl.Height" Value="60" />
+        <Setter Property="controls:ColorItemControl.Cursor" Value="Hand" />
+        <Setter Property="controls:ColorItemControl.Template">
+            <ControlTemplate TargetType="controls:ColorItemControl">
+                <!--    -->
+                <Border
+                    Width="{TemplateBinding Width}"
+                    Height="{TemplateBinding Height}"
+                    Background="{TemplateBinding Background}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <Panel>
+                        <TextBlock
+                            Padding="8"
+                            FontSize="12"
+                            FontWeight="600"
+                            Foreground="{TemplateBinding Foreground}"
+                            Text="{TemplateBinding ColorName}" />
+                        <TextBlock
+                            Name="PART_HexTextBlock"
+                            Padding="8"
+                            VerticalAlignment="Bottom"
+                            FontSize="10"
+                            Foreground="{TemplateBinding Foreground}"
+                            IsVisible="False"
+                            Opacity="0.8"
+                            Text="{TemplateBinding Hex}" />
+                    </Panel>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:pointerover /template/ TextBlock#PART_HexTextBlock">
+            <Setter Property="TextBlock.IsVisible" Value="True" />
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>
diff --git a/demo/Semi.Avalonia.Demo/Controls/ColorItemControl.cs b/demo/Semi.Avalonia.Demo/Controls/ColorItemControl.cs
new file mode 100644
index 0000000..04c8000
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Controls/ColorItemControl.cs
@@ -0,0 +1,39 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Primitives;
+using Avalonia.Input;
+using CommunityToolkit.Mvvm.Messaging;
+using Semi.Avalonia.Demo.ViewModels;
+
+namespace Semi.Avalonia.Demo.Controls;
+
+public class ColorItemControl : TemplatedControl
+{
+    public static readonly StyledProperty<string?> ColorNameProperty = AvaloniaProperty.Register<ColorItemControl, string?>(
+        nameof(ColorName));
+
+    public string? ColorName
+    {
+        get => GetValue(ColorNameProperty);
+        set => SetValue(ColorNameProperty, value);
+    }
+
+    public static readonly StyledProperty<string?> HexProperty = AvaloniaProperty.Register<ColorItemControl, string?>(
+        nameof(Hex));
+
+    public string? Hex
+    {
+        get => GetValue(HexProperty);
+        set => SetValue(HexProperty, value);
+    }
+    
+    protected override void OnPointerPressed(PointerPressedEventArgs e)
+    {
+        base.OnPointerPressed(e);
+        if (this.DataContext is ColorItemViewModel v)
+        {
+            WeakReferenceMessenger.Default.Send(v);
+        }
+        
+    }
+}
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Controls/FunctionalColorGroupControl.axaml b/demo/Semi.Avalonia.Demo/Controls/FunctionalColorGroupControl.axaml
new file mode 100644
index 0000000..2fec1e7
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Controls/FunctionalColorGroupControl.axaml
@@ -0,0 +1,124 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
+    xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels">
+    <!--  Add Resources Here  -->
+    <ControlTheme x:Key="{x:Type controls:FunctionalColorGroupControl}" TargetType="controls:FunctionalColorGroupControl">
+        <!--  Add Resources Here  -->
+        <Setter Property="controls:FunctionalColorGroupControl.Template">
+            <ControlTemplate x:DataType="viewModels:FunctionalColorGroupViewModel" TargetType="controls:FunctionalColorGroupControl">
+                <Grid RowDefinitions="Auto, *">
+                    <TextBlock
+                        Grid.Row="0"
+                        Margin="0,16,0,0"
+                        Classes="H3"
+                        Text="{TemplateBinding Title}"
+                        Theme="{DynamicResource TitleTextBlock}" />
+                    <TabControl Grid.Row="1">
+                        <TabItem Header="Light">
+                            <DataGrid IsReadOnly="True" Items="{TemplateBinding LightColors}">
+                                <DataGrid.Columns>
+                                    <DataGridTemplateColumn Width="70" Header="Color">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate>
+                                                <controls:ColorItemControl
+                                                    Width="40"
+                                                    Height="20"
+                                                    Background="{Binding Brush}"
+                                                    CornerRadius="3" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="*" Header="ResourceKey">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate>
+                                                <SelectableTextBlock VerticalAlignment="Center" Text="{Binding ResourceKey}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTextColumn
+                                        Width="*"
+                                        Binding="{Binding ColorDisplayName}"
+                                        CanUserSort="False"
+                                        Header="Name" />
+                                    <DataGridTemplateColumn Width="100" Header="Hex">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate>
+                                                <SelectableTextBlock
+                                                    Margin="8,0,0,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding Hex}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="80" Header="Opacity">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate>
+                                                <SelectableTextBlock
+                                                    Margin="8,0,0,0"
+                                                    HorizontalAlignment="Right"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding Brush.Opacity}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                </DataGrid.Columns>
+                            </DataGrid>
+                        </TabItem>
+                        <TabItem Header="Dark">
+                            <DataGrid IsReadOnly="True" Items="{TemplateBinding DarkColors}">
+                                <DataGrid.Columns>
+                                    <DataGridTemplateColumn Width="70" Header="Color">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate>
+                                                <controls:ColorItemControl
+                                                    Width="40"
+                                                    Height="20"
+                                                    Background="{Binding Brush}"
+                                                    CornerRadius="3" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="*" Header="ResourceKey">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate>
+                                                <SelectableTextBlock VerticalAlignment="Center" Text="{Binding ResourceKey}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTextColumn
+                                        Width="*"
+                                        Binding="{Binding ColorDisplayName}"
+                                        CanUserSort="False"
+                                        Header="Name" />
+                                    <DataGridTemplateColumn Width="100" Header="Hex">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate>
+                                                <SelectableTextBlock
+                                                    Margin="8,0,0,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding Hex}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTemplateColumn Width="80" Header="Opacity">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate>
+                                                <SelectableTextBlock
+                                                    Margin="8,0,0,0"
+                                                    HorizontalAlignment="Right"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding Brush.Opacity}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                </DataGrid.Columns>
+                            </DataGrid>
+                        </TabItem>
+                    </TabControl>
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>
diff --git a/demo/Semi.Avalonia.Demo/Controls/FunctionalColorGroupControl.cs b/demo/Semi.Avalonia.Demo/Controls/FunctionalColorGroupControl.cs
new file mode 100644
index 0000000..b7bbb44
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Controls/FunctionalColorGroupControl.cs
@@ -0,0 +1,36 @@
+using System.Collections;
+using Avalonia;
+using Avalonia.Controls.Primitives;
+
+namespace Semi.Avalonia.Demo.Controls;
+
+public class FunctionalColorGroupControl: TemplatedControl
+{
+    public static readonly StyledProperty<string?> TitleProperty = AvaloniaProperty.Register<FunctionalColorGroupControl, string?>(
+        nameof(Title));
+    public string? Title
+    {
+        get => GetValue(TitleProperty);
+        set => SetValue(TitleProperty, value);
+    }
+    
+    public static readonly DirectProperty<FunctionalColorGroupControl, IEnumerable> LightColorsProperty = AvaloniaProperty.RegisterDirect<FunctionalColorGroupControl, IEnumerable>(
+        nameof(LightColors), o => o.LightColors, (o, v) => o.LightColors = v);
+    private IEnumerable _lightColors;
+    public IEnumerable LightColors
+    {
+        get => _lightColors;
+        set => SetAndRaise(LightColorsProperty, ref _lightColors, value);
+    }
+    
+    public static readonly DirectProperty<FunctionalColorGroupControl, IEnumerable> DarkColorsProperty = AvaloniaProperty.RegisterDirect<FunctionalColorGroupControl, IEnumerable>(
+        nameof(DarkColors), o => o.DarkColors, (o, v) => o.DarkColors = v);
+    private IEnumerable _darkColors;
+    public IEnumerable DarkColors
+    {
+        get => _darkColors;
+        set => SetAndRaise(DarkColorsProperty, ref _darkColors, value);
+    }
+    
+    
+}
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Pages/PaletteDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/PaletteDemo.axaml
new file mode 100644
index 0000000..c9238ed
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Pages/PaletteDemo.axaml
@@ -0,0 +1,127 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.PaletteDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
+    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>
+    <UserControl.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceInclude Source="../Themes/ToggleButton.axaml" />
+                <ResourceInclude Source="../Controls/ColorItemControl.axaml" />
+                <ResourceInclude Source="../Controls/ColorDetailControl.axaml" />
+                <ResourceInclude Source="../Controls/FunctionalColorGroupControl.axaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </UserControl.Resources>
+    <SplitView
+        Name="splitView"
+        CompactPaneLength="50"
+        DisplayMode="CompactInline"
+        IsPaneOpen="{Binding #toggle.IsChecked, Mode=TwoWay}"
+        OpenPaneLength="300"
+        PanePlacement="Right">
+        <SplitView.Pane>
+            <StackPanel>
+                <ToggleButton
+                    Name="toggle"
+                    HorizontalAlignment="Right"
+                    IsChecked="True"
+                    Theme="{DynamicResource SplitViewToggleButton}" />
+                <Border IsVisible="{Binding #splitView.IsPaneOpen}" Theme="{DynamicResource CardBorder}">
+                    <Panel>
+                        <TextBlock
+                            IsVisible="{Binding SelectedColor, Converter={x:Static ObjectConverters.IsNull}}"
+                            Text="Click on Color to Check Details"
+                            TextWrapping="Wrap" />
+                        <controls:ColorDetailControl
+                            Background="{Binding SelectedColor.Brush}"
+                            IsVisible="{Binding SelectedColor, Converter={x:Static ObjectConverters.IsNotNull}}"
+                            ResourceKey="{Binding SelectedColor.ResourceKey}"
+                            ResourceName="{Binding SelectedColor.ColorDisplayName}" />
+                    </Panel>
+                </Border>
+            </StackPanel>
+        </SplitView.Pane>
+        <SplitView.Content>
+            <ScrollViewer>
+                <StackPanel Margin="8,0">
+                    <TextBlock
+                        Classes="H3"
+                        Text="Basic Colors"
+                        Theme="{DynamicResource TitleTextBlock}" />
+                    <TabControl>
+                        <TabItem Header="Light">
+                            <ItemsControl Margin="16" Items="{Binding LightLists}">
+                                <ItemsControl.ItemsPanel>
+                                    <ItemsPanelTemplate>
+                                        <WrapPanel Orientation="Horizontal" />
+                                    </ItemsPanelTemplate>
+                                </ItemsControl.ItemsPanel>
+                                <ItemsControl.ItemTemplate>
+                                    <DataTemplate x:DataType="viewModels:ColorListViewModel">
+                                        <ItemsControl Margin="4,0" Items="{Binding Color}">
+                                            <ItemsControl.ItemTemplate>
+                                                <DataTemplate x:DataType="viewModels:ColorItemViewModel">
+                                                    <controls:ColorItemControl
+                                                        Background="{Binding Brush}"
+                                                        ColorName="{Binding ColorDisplayName}"
+                                                        Foreground="{Binding TextBrush}"
+                                                        Hex="{Binding Hex}" />
+                                                </DataTemplate>
+                                            </ItemsControl.ItemTemplate>
+                                        </ItemsControl>
+                                    </DataTemplate>
+                                </ItemsControl.ItemTemplate>
+                            </ItemsControl>
+                        </TabItem>
+                        <TabItem Header="Dark">
+                            <ItemsControl Margin="16" Items="{Binding DarkLists}">
+                                <ItemsControl.ItemsPanel>
+                                    <ItemsPanelTemplate>
+                                        <WrapPanel Orientation="Horizontal" />
+                                    </ItemsPanelTemplate>
+                                </ItemsControl.ItemsPanel>
+                                <ItemsControl.ItemTemplate>
+                                    <DataTemplate x:DataType="viewModels:ColorListViewModel">
+                                        <ItemsControl Margin="4,0" Items="{Binding Color}">
+                                            <ItemsControl.ItemTemplate>
+                                                <DataTemplate x:DataType="viewModels:ColorItemViewModel">
+                                                    <controls:ColorItemControl
+                                                        Background="{Binding Brush}"
+                                                        ColorName="{Binding ColorDisplayName}"
+                                                        Foreground="{Binding TextBrush}"
+                                                        Hex="{Binding Hex}" />
+                                                </DataTemplate>
+                                            </ItemsControl.ItemTemplate>
+                                        </ItemsControl>
+                                    </DataTemplate>
+                                </ItemsControl.ItemTemplate>
+                            </ItemsControl>
+                        </TabItem>
+                    </TabControl>
+
+                    <ItemsControl Items="{Binding FunctionalColors}">
+                        <ItemsControl.ItemTemplate>
+                            <DataTemplate>
+                                <!--    -->
+                                <controls:FunctionalColorGroupControl
+                                    Title="{Binding Title}"
+                                    DarkColors="{Binding DarkColors}"
+                                    LightColors="{Binding LightColors}" />
+                            </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
new file mode 100644
index 0000000..4ef2ecf
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Pages/PaletteDemo.axaml.cs
@@ -0,0 +1,29 @@
+using System.Threading.Tasks;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Primitives;
+using Avalonia.Markup.Xaml;
+using Avalonia.Threading;
+using Semi.Avalonia.Demo.ViewModels;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class PaletteDemo : UserControl
+{
+    public PaletteDemo()
+    {
+        InitializeComponent();
+        
+    }
+
+    protected override async  void OnApplyTemplate(TemplateAppliedEventArgs e)
+    {
+        base.OnApplyTemplate(e);
+        PaletteDemoViewModel? vm = new PaletteDemoViewModel();
+        await Dispatcher.UIThread.InvokeAsync(() =>
+        {
+            vm.InitializeResources();
+        });
+        DataContext = vm;
+    }
+}
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Semi.Avalonia.Demo.csproj b/demo/Semi.Avalonia.Demo/Semi.Avalonia.Demo.csproj
index 7d026cc..ad24460 100644
--- a/demo/Semi.Avalonia.Demo/Semi.Avalonia.Demo.csproj
+++ b/demo/Semi.Avalonia.Demo/Semi.Avalonia.Demo.csproj
@@ -47,8 +47,4 @@
       <ProjectReference Include="..\..\src\Semi.Avalonia.DataGrid\Semi.Avalonia.DataGrid.csproj" />
       <ProjectReference Include="..\..\src\Semi.Avalonia\Semi.Avalonia.csproj" />
     </ItemGroup>
-
-    <ItemGroup>
-      <Folder Include="ViewModels" />
-    </ItemGroup>
 </Project>
diff --git a/demo/Semi.Avalonia.Demo/Themes/ToggleButton.axaml b/demo/Semi.Avalonia.Demo/Themes/ToggleButton.axaml
index 6a113d4..140bf91 100644
--- a/demo/Semi.Avalonia.Demo/Themes/ToggleButton.axaml
+++ b/demo/Semi.Avalonia.Demo/Themes/ToggleButton.axaml
@@ -27,7 +27,31 @@
             <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>
 
+    <ControlTheme x:Key="SplitViewToggleButton" TargetType="ToggleButton">
+        <Setter Property="ToggleButton.Template">
+            <ControlTemplate TargetType="ToggleButton">
+                <Border
+                    Name="Background"
+                    Padding="8"
+                    Background="{TemplateBinding Background}"
+                    CornerRadius="3">
+                    <PathIcon
+                        Name="Icon"
+                        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"
+                        Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
+                </Border>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:pointerover">
+            <Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
+        </Style>
+        <Style Selector="^:pressed">
+            <Setter Property="Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
         </Style>
     </ControlTheme>
 </ResourceDictionary>
diff --git a/demo/Semi.Avalonia.Demo/ViewModels/PaletteDemoViewModel.cs b/demo/Semi.Avalonia.Demo/ViewModels/PaletteDemoViewModel.cs
new file mode 100644
index 0000000..33f98f1
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/ViewModels/PaletteDemoViewModel.cs
@@ -0,0 +1,349 @@
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+using Avalonia.Media;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Messaging;
+
+namespace Semi.Avalonia.Demo.ViewModels;
+
+public class PaletteDemoViewModel: ObservableObject
+{
+    private readonly string[] _predefinedColorNames = { "Amber","Blue","Cyan","Green","Grey","Indigo","LightBlue","LightGreen","Lime","Orange","Pink","Purple","Red","Teal","Violet","Yellow" };
+    private IResourceDictionary _lightResourceDictionary;
+    private IResourceDictionary _darkResourceDictionary;
+    
+    private ColorItemViewModel _selectedColor;
+
+    public ColorItemViewModel SelectedColor
+    {
+        get => _selectedColor;
+        set => SetProperty(ref _selectedColor, value);
+    }
+    
+    
+    private ObservableCollection<ColorListViewModel> _lightLists;
+    public ObservableCollection<ColorListViewModel> LightLists
+    {
+        get => _lightLists;
+        set => SetProperty(ref _lightLists, value);
+    }
+    private ObservableCollection<ColorListViewModel> _darkLists;
+    public ObservableCollection<ColorListViewModel> DarkLists
+    {
+        get => _darkLists;
+        set => SetProperty(ref _darkLists, value);
+    }
+
+    public ObservableCollection<FunctionalColorGroupViewModel> FunctionalColors { get; set; } = new();
+
+    public PaletteDemoViewModel()
+    {
+        _lightResourceDictionary = (ResourceDictionary)AvaloniaXamlLoader.Load(new Uri("avares://Semi.Avalonia/Themes/Light/Palette.axaml"));
+        _darkResourceDictionary = (ResourceDictionary)AvaloniaXamlLoader.Load(new Uri("avares://Semi.Avalonia/Themes/Dark/Palette.axaml"));
+        WeakReferenceMessenger.Default.Register<PaletteDemoViewModel, ColorItemViewModel>(this, OnClickColorItem);
+    }
+
+    public void InitializeResources()
+    {
+        InitializePalette();
+        InitializeFunctionalColors();
+    }
+
+    private void InitializePalette()
+    {
+        LightLists = new ObservableCollection<ColorListViewModel>();
+        foreach (var color in _predefinedColorNames)
+        {
+            ColorListViewModel s = new ColorListViewModel();
+            s.Initialize(_lightResourceDictionary, color, true);
+            LightLists.Add(s);
+        }
+        DarkLists = new ObservableCollection<ColorListViewModel>();
+        foreach (var color in _predefinedColorNames)
+        {
+            ColorListViewModel s = new ColorListViewModel();
+            s.Initialize(_darkResourceDictionary, color, false);
+            DarkLists.Add(s);
+        }
+    }
+
+    private void InitializeFunctionalColors()
+    {
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Primary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.PrimaryTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Secondary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.SecondaryTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Tertiary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.TertiaryTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Information", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.InformationTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Success", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.SuccessTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Warning", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.WarningTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Danger", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.DangerTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Text", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.TextTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Link", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.LinkTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Background", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.BackgroundTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Fill", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.FillTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Border", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.BorderTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Disabled", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.DisabledTokens));
+    }
+    private void OnClickColorItem(PaletteDemoViewModel vm, ColorItemViewModel item)
+    {
+        SelectedColor = item;
+    }
+}
+
+public class ColorListViewModel: 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, bool light)
+    {
+        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 ISolidColorBrush brush)
+                {
+                    string name = color + " " + i;
+                    var item = new ColorItemViewModel(name, brush, key, light, i);
+                    Color.Add(item);
+                } 
+            }
+        }
+    }
+}
+
+public class ColorItemViewModel : ObservableObject
+{
+
+    private IBrush _brush;
+    public IBrush Brush
+    {
+        get => _brush;
+        set => SetProperty(ref _brush, value);
+    }
+    
+    private IBrush _textBrush;
+    public IBrush TextBrush
+    {
+        get => _textBrush;
+        set => SetProperty(ref _textBrush, value);
+    }
+
+    private string _colorDisplayName;
+    public string ColorDisplayName
+    {
+        get => _colorDisplayName;
+        set => SetProperty(ref _colorDisplayName, value);
+    }
+
+    private string _resourceKey;
+
+    public string ResourceKey
+    {
+        get => _resourceKey;
+        set => SetProperty(ref _resourceKey, value);
+    }
+
+    private string _hex;
+
+    public string Hex
+    {
+        get => _hex;
+        set => SetProperty(ref _hex, value);
+    }
+    
+    public ColorItemViewModel(string colorDisplayName, ISolidColorBrush brush, string resourceKey, bool light, int index)
+    {
+        ColorDisplayName = colorDisplayName;
+        Brush = brush;
+        ResourceKey = resourceKey;
+        Hex = brush.ToString().ToUpperInvariant();
+        if ((light && index < 5) || (!light && index > 5))
+        {
+            TextBrush = Brushes.Black;
+        }
+        else
+        {
+            TextBrush = Brushes.White;
+        }
+    }
+}
+
+public class FunctionalColorGroupViewModel : ObservableObject
+{
+    private string _title;
+    public string Title
+    {
+        get => _title;
+        set => SetProperty(ref _title, value);
+    }
+
+    public ObservableCollection<ColorItemViewModel> LightColors { get; set; } = new();
+    public ObservableCollection<ColorItemViewModel> DarkColors { get; set; } = new();
+
+    public FunctionalColorGroupViewModel(string title, IResourceDictionary lightDictionary, IResourceDictionary darkDictionary, IReadOnlyList<Tuple<string, string>> tokens)
+    {
+        Title = title;
+        foreach (var token in tokens)
+        {
+            string key = token.Item1;
+            string name = token.Item2;
+            if (lightDictionary.TryGetValue(key, out var lightValue))
+            {
+                if (lightValue is ISolidColorBrush lightBrush)
+                {
+                    LightColors.Add(new ColorItemViewModel(name, lightBrush, key, true, 0));
+                }
+            }
+            if (darkDictionary.TryGetValue(key, out var darkValue))
+            {
+                if (darkValue is ISolidColorBrush darkBrush)
+                {
+                    DarkColors.Add(new ColorItemViewModel(name, darkBrush, key, true, 0));
+                }
+            }
+        }
+    }
+}
+
+public static class ColorTokens
+{
+    public static IReadOnlyList<Tuple<string, string>> PrimaryTokens { get; } = new List<Tuple<string, string>>
+    {
+        new ("SemiColorPrimary", "Primary"),
+        new ("SemiColorPrimaryPointerover", "Primary Pointerover"),
+        new ("SemiColorPrimaryPressed", "Primary Pressed"),
+        new ("SemiColorPrimaryDisabled", "Primary Disabled"),
+        new ("SemiColorPrimaryLight", "Primary Light"),
+        new ("SemiColorPrimaryLightPointerover", "Primary Light Pointerover"),
+        new ("SemiColorPrimaryLightActive", "Primary Light Active"),
+    };
+
+    public static IReadOnlyList<Tuple<string, string>> SecondaryTokens { get; } = new List<Tuple<string, string>>
+    {
+        new ("SemiColorSecondary", "Secondary"),
+        new ("SemiColorSecondaryPointerover", "Secondary Pointerover"),
+        new ("SemiColorSecondaryPressed", "Secondary Pressed"),
+        new ("SemiColorSecondaryDisabled", "Secondary Disabled"),
+        new ("SemiColorSecondaryLight", "Secondary Light"),
+        new ("SemiColorSecondaryLightPointerover", "Secondary Light Pointerover"),
+        new ("SemiColorSecondaryLightActive", "Secondary Light Active"),
+    };
+    
+    public static IReadOnlyList<Tuple<string, string>> TertiaryTokens { get; } = new List<Tuple<string, string>>
+    {
+        new ("SemiColorTertiary", "Tertiary"),
+        new ("SemiColorTertiaryPointerover", "Tertiary Pointerover"),
+        new ("SemiColorTertiaryPressed", "Tertiary Pressed"),
+        new ("SemiColorTertiaryLight", "Tertiary Light"),
+        new ("SemiColorTertiaryLightPointerover", "Tertiary Light Pointerover"),
+        new ("SemiColorTertiaryLightActive", "Tertiary Light Active"),
+    };
+    
+    public static IReadOnlyList<Tuple<string, string>> InformationTokens { get; } = new List<Tuple<string, string>>
+    {
+        new ("SemiColorInformation", "Information"),
+        new ("SemiColorInformationPointerover", "Information Pointerover"),
+        new ("SemiColorInformationPressed", "Information Pressed"),
+        new ("SemiColorInformationDisabled", "Information Disabled"),
+        new ("SemiColorInformationLight", "Information Light"),
+        new ("SemiColorInformationLightPointerover", "Information Light Pointerover"),
+        new ("SemiColorInformationLightActive", "Information Light Active"),
+    };
+    
+    public static IReadOnlyList<Tuple<string, string>> SuccessTokens { get; } = new List<Tuple<string, string>>
+    {
+        new ("SemiColorSuccess", "Success"),
+        new ("SemiColorSuccessPointerover", "Success Pointerover"),
+        new ("SemiColorSuccessPressed", "Success Pressed"),
+        new ("SemiColorSuccessDisabled", "Success Disabled"),
+        new ("SemiColorSuccessLight", "Success Light"),
+        new ("SemiColorSuccessLightPointerover", "Success Light Pointerover"),
+        new ("SemiColorSuccessLightActive", "Success Light Active"),
+    };
+    
+    public static IReadOnlyList<Tuple<string, string>> WarningTokens { get; } = new List<Tuple<string, string>>
+    {
+        new ("SemiColorWarning", "Warning"),
+        new ("SemiColorWarningPointerover", "Warning Pointerover"),
+        new ("SemiColorWarningPressed", "Warning Pressed"),
+        new ("SemiColorWarningLight", "Warning Light"),
+        new ("SemiColorWarningLightPointerover", "Warning Light Pointerover"),
+        new ("SemiColorWarningLightActive", "Warning Light Active"),
+    };
+    
+    public static IReadOnlyList<Tuple<string, string>> DangerTokens { get; } = new List<Tuple<string, string>>
+    {
+        new ("SemiColorDanger", "Danger"),
+        new ("SemiColorDangerPointerover", "Danger Pointerover"),
+        new ("SemiColorDangerPressed", "Danger Pressed"),
+        new ("SemiColorDangerLight", "Danger Light"),
+        new ("SemiColorDangerLightPointerover", "Danger Light Pointerover"),
+        new ("SemiColorDangerLightActive", "Danger Light Active"),
+    };
+
+    public static IReadOnlyList<Tuple<string, string>> TextTokens { get; } = new List<Tuple<string, string>>
+    {
+        new ("SemiColorText0", "Text 0"),
+        new ("SemiColorText1", "Text 1"),
+        new ("SemiColorText2", "Text 2"),
+        new ("SemiColorText3", "Text 3"),
+    };
+    
+    public static IReadOnlyList<Tuple<string, string>> LinkTokens { get; } = new List<Tuple<string, string>>
+    {
+        new ("SemiColorLink", "Link"),
+        new ("SemiColorLinkPointerover", "Link Pointerover"),
+        new ("SemiColorLinkActive", "Link Active"),
+        new ("SemiColorLinkVisited", "Link Visited"),
+    };
+    
+    public static IReadOnlyList<Tuple<string, string>> BackgroundTokens { get; } = new List<Tuple<string, string>>
+    {
+        new ("SemiColorBackground0", "Background 0"),
+        new ("SemiColorBackground1", "Background 1"),
+        new ("SemiColorBackground2", "Background 2"),
+        new ("SemiColorBackground3", "Background 3"),
+        new ("SemiColorBackground4", "Background 4"),
+    };
+    
+    public static IReadOnlyList<Tuple<string, string>> FillTokens { get; } = new List<Tuple<string, string>>
+    {
+        new ("SemiColorFill0", "Fill 0"),
+        new ("SemiColorFill1", "Fill 1"),
+        new ("SemiColorFill2", "Fill 2"),
+    };
+    
+    public static IReadOnlyList<Tuple<string, string>> BorderTokens { get; } = new List<Tuple<string, string>>
+    {
+        new ("SemiColorBorder", "Border"),
+    };
+    
+    public static IReadOnlyList<Tuple<string, string>> DisabledTokens { get; } = new List<Tuple<string, string>>
+    {
+        new ("SemiColorDisabledText", "Disabled Text"),
+        new ("SemiColorDisabledBorder", "Disabled Border"),
+        new ("SemiColorDisabledBackground", "Disabled Background"),
+        new ("SemiColorDisabledFill", "Disabled Fill"),
+    };
+    
+}
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Views/MainView.axaml b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
index 0074644..5633d11 100644
--- a/demo/Semi.Avalonia.Demo/Views/MainView.axaml
+++ b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
@@ -56,6 +56,9 @@
             <TabItem Header="Overview">
                 <pages:Overview />
             </TabItem>
+            <TabItem Header="Palette">
+                <pages:PaletteDemo />
+            </TabItem>
             <TabItem Header="AutoCompleteBox">
                 <pages:AutoCompleteBoxDemo />
             </TabItem>
diff --git a/src/Semi.Avalonia.DataGrid/Dark.axaml b/src/Semi.Avalonia.DataGrid/Dark.axaml
index 1814448..ad74cb4 100644
--- a/src/Semi.Avalonia.DataGrid/Dark.axaml
+++ b/src/Semi.Avalonia.DataGrid/Dark.axaml
@@ -29,8 +29,8 @@
     <SolidColorBrush x:Key="DataGridDetailsPresenterBackground" Color="Transparent" />
 
     <SolidColorBrush x:Key="DataGridRowPointeroverBackground" Opacity="0.16" Color="White" />
-    <SolidColorBrush x:Key="DataGridRowSelectedBackground" Color="#053170" />
-    <SolidColorBrush x:Key="DataGridRowSelectedPointeroverBackground" Color="#0A4694" />
+    <SolidColorBrush x:Key="DataGridRowSelectedBackground" Opacity="0.2" Color="#FF54A9FF" />
+    <SolidColorBrush x:Key="DataGridRowSelectedPointeroverBackground" Opacity="0.3" Color="#FF54A9FF" />
 
     <PathGeometry x:Key="DataGridRowGroupHeaderExpandIconGlyph">M7.43934 19.7957C6.85355 19.2099 6.85355 18.2601 7.43934 17.6744L13.0962 12.0175L7.43934 6.36065C6.85355 5.77486 6.85355 4.82511 7.43934 4.23933C8.02513 3.65354 8.97487 3.65354 9.56066 4.23933L16.2782 10.9568C16.864 11.5426 16.864 12.4924 16.2782 13.0782L9.56066 19.7957C8.97487 20.3815 8.02513 20.3815 7.43934 19.7957Z</PathGeometry>
     <SolidColorBrush x:Key="DataGridRowGroupHeaderExpandIconForeground" Opacity="0.62" Color="#F9F9F9" />
diff --git a/src/Semi.Avalonia/Controls/ListBox.axaml b/src/Semi.Avalonia/Controls/ListBox.axaml
index c01249d..88b3ac6 100644
--- a/src/Semi.Avalonia/Controls/ListBox.axaml
+++ b/src/Semi.Avalonia/Controls/ListBox.axaml
@@ -80,6 +80,9 @@
         <!--  Selected State  -->
         <Style Selector="^:selected">
             <Setter Property="ListBoxItem.Background" Value="{DynamicResource ListBoxItemSelectedBackground}" />
+            <Style Selector="^:pointerover">
+                <Setter Property="ListBoxItem.Background" Value="{DynamicResource ListBoxItemSelectedPointeroverBackground}" />
+            </Style>
         </Style>
     </ControlTheme>
 </ResourceDictionary>
diff --git a/src/Semi.Avalonia/Controls/ScrollViewer.axaml b/src/Semi.Avalonia/Controls/ScrollViewer.axaml
index aadb4ba..4372c99 100644
--- a/src/Semi.Avalonia/Controls/ScrollViewer.axaml
+++ b/src/Semi.Avalonia/Controls/ScrollViewer.axaml
@@ -147,12 +147,12 @@
             </Setter>
         </Style>
         <Style Selector="^ /template/ Thumb#thumb">
-            <Setter Property="Background" Value="{DynamicResource ScrollBarThumbForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ScrollBarThumbForeground}" />
             <Setter Property="Template">
                 <Setter.Value>
                     <ControlTemplate TargetType="Thumb">
                         <Border
-                            Background="{TemplateBinding Background}"
+                            Background="{TemplateBinding Foreground}"
                             CornerRadius="24"
                             UseLayoutRounding="False" />
                     </ControlTemplate>
@@ -178,11 +178,18 @@
             <Setter Property="BorderThickness" Value="0" />
         </Style>
         <Style Selector="^ /template/ RepeatButton.repeattrack">
+            <Setter Property="Background" Value="Transparent" />
             <Setter Property="Template">
                 <ControlTemplate TargetType="RepeatButton">
                     <Border Background="{TemplateBinding Background}" />
                 </ControlTemplate>
             </Setter>
+            <Style Selector="^:pointerover">
+                <Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
+            </Style>
+            <Style Selector="^:pressed">
+                <Setter Property="Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
+            </Style>
         </Style>
 
         <Style Selector="^ /template/ RepeatButton &gt; Path">
@@ -223,6 +230,7 @@
                         Focusable="False"
                         LargeChange="{Binding LargeChange.Width, RelativeSource={RelativeSource TemplatedParent}}"
                         Maximum="{TemplateBinding HorizontalScrollBarMaximum}"
+                        Opacity="0"
                         Orientation="Horizontal"
                         SmallChange="{Binding SmallChange.Width, RelativeSource={RelativeSource TemplatedParent}}"
                         ViewportSize="{TemplateBinding HorizontalScrollBarViewportSize}"
@@ -236,6 +244,7 @@
                         Focusable="False"
                         LargeChange="{Binding LargeChange.Height, RelativeSource={RelativeSource TemplatedParent}}"
                         Maximum="{TemplateBinding VerticalScrollBarMaximum}"
+                        Opacity="0"
                         Orientation="Vertical"
                         SmallChange="{Binding SmallChange.Height, RelativeSource={RelativeSource TemplatedParent}}"
                         ViewportSize="{TemplateBinding VerticalScrollBarViewportSize}"
diff --git a/src/Semi.Avalonia/Themes/Dark/Border.axaml b/src/Semi.Avalonia/Themes/Dark/Border.axaml
index a7f0d5c..74a762b 100644
--- a/src/Semi.Avalonia/Themes/Dark/Border.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/Border.axaml
@@ -3,7 +3,7 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:sys="clr-namespace:System;assembly=System.Runtime">
     <SolidColorBrush x:Key="BorderCardBackground" Color="#232429" />
-    <SolidColorBrush x:Key="BorderCardBorderBrush" Opacity="0.08" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="BorderCardBorderBrush" Opacity="0.08" Color="White" />
     <CornerRadius x:Key="RadiusCardCornerRadius">4</CornerRadius>
     <Thickness x:Key="ThicknessCardPadding">20</Thickness>
     <Thickness x:Key="ThicknessCardMargin">4</Thickness>
diff --git a/src/Semi.Avalonia/Themes/Dark/Button.axaml b/src/Semi.Avalonia/Themes/Dark/Button.axaml
index a3e735d..1286217 100644
--- a/src/Semi.Avalonia/Themes/Dark/Button.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/Button.axaml
@@ -20,12 +20,12 @@
     <SolidColorBrush x:Key="ButtonDefaultTertiaryForeground" Color="#888D92" />
     <SolidColorBrush x:Key="ButtonDefaultWarningForeground" Color="#FFAE43" />
     <SolidColorBrush x:Key="ButtonDefaultDangerForeground" Color="#FC725A" />
-    <SolidColorBrush x:Key="ButtonDefaultDisabledForeground" Color="#78787A" />
+    <SolidColorBrush x:Key="ButtonDefaultDisabledForeground" Opacity="0.35" Color="#F9F9F9" />
 
     <SolidColorBrush x:Key="ButtonDefaultBackground" Opacity="0.12" Color="White" />
     <SolidColorBrush x:Key="ButtonDefaultPointeroverBackground" Opacity="0.16" Color="White" />
     <SolidColorBrush x:Key="ButtonDefaultPressedBackground" Opacity="0.20" Color="White" />
-    <SolidColorBrush x:Key="ButtonDefaultDisabledBackground" Opacity="0.12" Color="White" />
+    <SolidColorBrush x:Key="ButtonDefaultDisabledBackground" Opacity="0.04" Color="#E6E8EA" />
 
     <SolidColorBrush x:Key="ButtonDefaultBorderBrush" Color="Transparent" />
     <SolidColorBrush x:Key="ButtonDefaultPointeroverBorderBrush" Color="Transparent" />
@@ -80,6 +80,6 @@
     <SolidColorBrush x:Key="ButtonSolidDangerPointeroverBorderBrush" Color="#FD9983" />
     <SolidColorBrush x:Key="ButtonSolidDangerPressedBorderBrush" Color="#FDBEAC" />
 
-    <SolidColorBrush x:Key="ButtonSolidDisabledBorderBrush" Color="Gray" />
+    <SolidColorBrush x:Key="ButtonSolidDisabledBorderBrush" Color="#FF2E3238" />
     <!--  end Solid  -->
 </ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Dark/ListBox.axaml b/src/Semi.Avalonia/Themes/Dark/ListBox.axaml
index 000712e..bf1ecc7 100644
--- a/src/Semi.Avalonia/Themes/Dark/ListBox.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/ListBox.axaml
@@ -10,8 +10,8 @@
     <SolidColorBrush x:Key="ListBoxItemDefaultBackground" Color="Transparent" />
     <SolidColorBrush x:Key="ListBoxItemPointerOverBackground" Opacity="0.12" Color="White" />
     <SolidColorBrush x:Key="ListBoxItemPressedBackground" Opacity="0.16" Color="White" />
-    <SolidColorBrush x:Key="ListBoxItemSelectedBackground" Color="#053170" />
-    <SolidColorBrush x:Key="ListBoxItemSelectedPointeroverBackground" Color="#0A4694" />
+    <SolidColorBrush x:Key="ListBoxItemSelectedBackground" Opacity="0.2" Color="#FF54A9FF" />
+    <SolidColorBrush x:Key="ListBoxItemSelectedPointeroverBackground" Opacity="0.3" Color="#FF54A9FF" />
     <SolidColorBrush x:Key="ListBoxItemDisabledBackground" Color="Transparent" />
     <SolidColorBrush x:Key="ListBoxItemSelectedDisabledBackground" Opacity="0.04" Color="#E6E8EA" />
     <CornerRadius x:Key="ListBoxItemCornerRadius">3</CornerRadius>
diff --git a/src/Semi.Avalonia/Themes/Dark/Palette.axaml b/src/Semi.Avalonia/Themes/Dark/Palette.axaml
index 779852d..923c8b5 100644
--- a/src/Semi.Avalonia/Themes/Dark/Palette.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/Palette.axaml
@@ -1,4 +1,250 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!-- Add Resources Here -->
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <SolidColorBrush x:Key="SemiRed0" Color="#6C090B" />
+    <SolidColorBrush x:Key="SemiRed1" Color="#901110" />
+    <SolidColorBrush x:Key="SemiRed2" Color="#B42019" />
+    <SolidColorBrush x:Key="SemiRed3" Color="#D73324" />
+    <SolidColorBrush x:Key="SemiRed4" Color="#FB4932" />
+    <SolidColorBrush x:Key="SemiRed5" Color="#FC725A" />
+    <SolidColorBrush x:Key="SemiRed6" Color="#FD9983" />
+    <SolidColorBrush x:Key="SemiRed7" Color="#FDBEAC" />
+    <SolidColorBrush x:Key="SemiRed8" Color="#FEE0D5" />
+    <SolidColorBrush x:Key="SemiRed9" Color="#FFF3EF" />
+    <SolidColorBrush x:Key="SemiPink0" Color="#5C0730" />
+    <SolidColorBrush x:Key="SemiPink1" Color="#800E41" />
+    <SolidColorBrush x:Key="SemiPink2" Color="#A41751" />
+    <SolidColorBrush x:Key="SemiPink3" Color="#C72261" />
+    <SolidColorBrush x:Key="SemiPink4" Color="#EB2F71" />
+    <SolidColorBrush x:Key="SemiPink5" Color="#EF5686" />
+    <SolidColorBrush x:Key="SemiPink6" Color="#F37E9F" />
+    <SolidColorBrush x:Key="SemiPink7" Color="#F7A8BC" />
+    <SolidColorBrush x:Key="SemiPink8" Color="#FBD3DC" />
+    <SolidColorBrush x:Key="SemiPink9" Color="#FDEEF1" />
+    <SolidColorBrush x:Key="SemiPurple0" Color="#4A1061" />
+    <SolidColorBrush x:Key="SemiPurple1" Color="#5E1776" />
+    <SolidColorBrush x:Key="SemiPurple2" Color="#731F8A" />
+    <SolidColorBrush x:Key="SemiPurple3" Color="#89289F" />
+    <SolidColorBrush x:Key="SemiPurple4" Color="#A033B3" />
+    <SolidColorBrush x:Key="SemiPurple5" Color="#B553C2" />
+    <SolidColorBrush x:Key="SemiPurple6" Color="#CA78D1" />
+    <SolidColorBrush x:Key="SemiPurple7" Color="#DDA0E1" />
+    <SolidColorBrush x:Key="SemiPurple8" Color="#EFCEF0" />
+    <SolidColorBrush x:Key="SemiPurple9" Color="#F7EBF7" />
+    <SolidColorBrush x:Key="SemiViolet0" Color="#401B77" />
+    <SolidColorBrush x:Key="SemiViolet1" Color="#4C248C" />
+    <SolidColorBrush x:Key="SemiViolet2" Color="#582EA0" />
+    <SolidColorBrush x:Key="SemiViolet3" Color="#6439B5" />
+    <SolidColorBrush x:Key="SemiViolet4" Color="#7246C9" />
+    <SolidColorBrush x:Key="SemiViolet5" Color="#8865D4" />
+    <SolidColorBrush x:Key="SemiViolet6" Color="#A288DF" />
+    <SolidColorBrush x:Key="SemiViolet7" Color="#BEADE9" />
+    <SolidColorBrush x:Key="SemiViolet8" Color="#DDD4F4" />
+    <SolidColorBrush x:Key="SemiViolet9" Color="#F1EEFA" />
+    <SolidColorBrush x:Key="SemiIndigo0" Color="#171E65" />
+    <SolidColorBrush x:Key="SemiIndigo1" Color="#20297A" />
+    <SolidColorBrush x:Key="SemiIndigo2" Color="#29368E" />
+    <SolidColorBrush x:Key="SemiIndigo3" Color="#3444A3" />
+    <SolidColorBrush x:Key="SemiIndigo4" Color="#4053B7" />
+    <SolidColorBrush x:Key="SemiIndigo5" Color="#5F71C5" />
+    <SolidColorBrush x:Key="SemiIndigo6" Color="#8191D4" />
+    <SolidColorBrush x:Key="SemiIndigo7" Color="#A7B4E2" />
+    <SolidColorBrush x:Key="SemiIndigo8" Color="#D1D8F1" />
+    <SolidColorBrush x:Key="SemiIndigo9" Color="#EDEFF8" />
+    <SolidColorBrush x:Key="SemiBlue0" Color="#053170" />
+    <SolidColorBrush x:Key="SemiBlue1" Color="#0A4694" />
+    <SolidColorBrush x:Key="SemiBlue2" Color="#135CB8" />
+    <SolidColorBrush x:Key="SemiBlue3" Color="#1D75DB" />
+    <SolidColorBrush x:Key="SemiBlue4" Color="#2990FF" />
+    <SolidColorBrush x:Key="SemiBlue5" Color="#54A9FF" />
+    <SolidColorBrush x:Key="SemiBlue6" Color="#7FC1FF" />
+    <SolidColorBrush x:Key="SemiBlue7" Color="#A9D7FF" />
+    <SolidColorBrush x:Key="SemiBlue8" Color="#D4ECFF" />
+    <SolidColorBrush x:Key="SemiBlue9" Color="#EFF8FF" />
+    <SolidColorBrush x:Key="SemiLightBlue0" Color="#003761" />
+    <SolidColorBrush x:Key="SemiLightBlue1" Color="#004D85" />
+    <SolidColorBrush x:Key="SemiLightBlue2" Color="#0366A9" />
+    <SolidColorBrush x:Key="SemiLightBlue3" Color="#0A81CC" />
+    <SolidColorBrush x:Key="SemiLightBlue4" Color="#139FF0" />
+    <SolidColorBrush x:Key="SemiLightBlue5" Color="#40B4F3" />
+    <SolidColorBrush x:Key="SemiLightBlue6" Color="#6EC8F6" />
+    <SolidColorBrush x:Key="SemiLightBlue7" Color="#9DDCF9" />
+    <SolidColorBrush x:Key="SemiLightBlue8" Color="#CEEEFC" />
+    <SolidColorBrush x:Key="SemiLightBlue9" Color="#EBF8FE" />
+    <SolidColorBrush x:Key="SemiCyan0" Color="#04343D" />
+    <SolidColorBrush x:Key="SemiCyan1" Color="#074F5C" />
+    <SolidColorBrush x:Key="SemiCyan2" Color="#0A6C7B" />
+    <SolidColorBrush x:Key="SemiCyan3" Color="#0E8999" />
+    <SolidColorBrush x:Key="SemiCyan4" Color="#13A8B8" />
+    <SolidColorBrush x:Key="SemiCyan5" Color="#38BBC6" />
+    <SolidColorBrush x:Key="SemiCyan6" Color="#62CDD4" />
+    <SolidColorBrush x:Key="SemiCyan7" Color="#91DFE3" />
+    <SolidColorBrush x:Key="SemiCyan8" Color="#C6EFF1" />
+    <SolidColorBrush x:Key="SemiCyan9" Color="#E7F7F8" />
+    <SolidColorBrush x:Key="SemiTeal0" Color="#023C39" />
+    <SolidColorBrush x:Key="SemiTeal1" Color="#045A55" />
+    <SolidColorBrush x:Key="SemiTeal2" Color="#07776F" />
+    <SolidColorBrush x:Key="SemiTeal3" Color="#0A9588" />
+    <SolidColorBrush x:Key="SemiTeal4" Color="#0EB3A1" />
+    <SolidColorBrush x:Key="SemiTeal5" Color="#33C2B0" />
+    <SolidColorBrush x:Key="SemiTeal6" Color="#5ED1C1" />
+    <SolidColorBrush x:Key="SemiTeal7" Color="#8EE1D3" />
+    <SolidColorBrush x:Key="SemiTeal8" Color="#C4F0E8" />
+    <SolidColorBrush x:Key="SemiTeal9" Color="#E6F7F4" />
+    <SolidColorBrush x:Key="SemiGreen0" Color="#123C19" />
+    <SolidColorBrush x:Key="SemiGreen1" Color="#1C5A25" />
+    <SolidColorBrush x:Key="SemiGreen2" Color="#277731" />
+    <SolidColorBrush x:Key="SemiGreen3" Color="#32953D" />
+    <SolidColorBrush x:Key="SemiGreen4" Color="#3EB349" />
+    <SolidColorBrush x:Key="SemiGreen5" Color="#5DC264" />
+    <SolidColorBrush x:Key="SemiGreen6" Color="#7FD184" />
+    <SolidColorBrush x:Key="SemiGreen7" Color="#A6E1A8" />
+    <SolidColorBrush x:Key="SemiGreen8" Color="#D0F0D1" />
+    <SolidColorBrush x:Key="SemiGreen9" Color="#ECF7EC" />
+    <SolidColorBrush x:Key="SemiLightGreen0" Color="#263D13" />
+    <SolidColorBrush x:Key="SemiLightGreen1" Color="#3B5C1D" />
+    <SolidColorBrush x:Key="SemiLightGreen2" Color="#517B28" />
+    <SolidColorBrush x:Key="SemiLightGreen3" Color="#679934" />
+    <SolidColorBrush x:Key="SemiLightGreen4" Color="#7FB840" />
+    <SolidColorBrush x:Key="SemiLightGreen5" Color="#97C65F" />
+    <SolidColorBrush x:Key="SemiLightGreen6" Color="#B0D481" />
+    <SolidColorBrush x:Key="SemiLightGreen7" Color="#C9E3A7" />
+    <SolidColorBrush x:Key="SemiLightGreen8" Color="#E4F1D1" />
+    <SolidColorBrush x:Key="SemiLightGreen9" Color="#F3F8ED" />
+    <SolidColorBrush x:Key="SemiLime0" Color="#314603" />
+    <SolidColorBrush x:Key="SemiLime1" Color="#4B6905" />
+    <SolidColorBrush x:Key="SemiLime2" Color="#678D09" />
+    <SolidColorBrush x:Key="SemiLime3" Color="#84B00C" />
+    <SolidColorBrush x:Key="SemiLime4" Color="#A2D311" />
+    <SolidColorBrush x:Key="SemiLime5" Color="#AEDC3A" />
+    <SolidColorBrush x:Key="SemiLime6" Color="#BDE566" />
+    <SolidColorBrush x:Key="SemiLime7" Color="#CFED96" />
+    <SolidColorBrush x:Key="SemiLime8" Color="#E5F6C9" />
+    <SolidColorBrush x:Key="SemiLime9" Color="#F3FBE9" />
+    <SolidColorBrush x:Key="SemiYellow0" Color="#544903" />
+    <SolidColorBrush x:Key="SemiYellow1" Color="#7E6C06" />
+    <SolidColorBrush x:Key="SemiYellow2" Color="#A88E0A" />
+    <SolidColorBrush x:Key="SemiYellow3" Color="#D2AF0F" />
+    <SolidColorBrush x:Key="SemiYellow4" Color="#FCCE14" />
+    <SolidColorBrush x:Key="SemiYellow5" Color="#FDDE43" />
+    <SolidColorBrush x:Key="SemiYellow6" Color="#FDEB71" />
+    <SolidColorBrush x:Key="SemiYellow7" Color="#FEF5A0" />
+    <SolidColorBrush x:Key="SemiYellow8" Color="#FEFBD0" />
+    <SolidColorBrush x:Key="SemiYellow9" Color="#FFFEEC" />
+    <SolidColorBrush x:Key="SemiAmber0" Color="#512E09" />
+    <SolidColorBrush x:Key="SemiAmber1" Color="#794B0F" />
+    <SolidColorBrush x:Key="SemiAmber2" Color="#A16B16" />
+    <SolidColorBrush x:Key="SemiAmber3" Color="#CA8F1E" />
+    <SolidColorBrush x:Key="SemiAmber4" Color="#F2B726" />
+    <SolidColorBrush x:Key="SemiAmber5" Color="#F5CA50" />
+    <SolidColorBrush x:Key="SemiAmber6" Color="#F7DB7A" />
+    <SolidColorBrush x:Key="SemiAmber7" Color="#FAEAA6" />
+    <SolidColorBrush x:Key="SemiAmber8" Color="#FCF6D2" />
+    <SolidColorBrush x:Key="SemiAmber9" Color="#FEFBED" />
+    <SolidColorBrush x:Key="SemiOrange0" Color="#551F03" />
+    <SolidColorBrush x:Key="SemiOrange1" Color="#803506" />
+    <SolidColorBrush x:Key="SemiOrange2" Color="#AA500A" />
+    <SolidColorBrush x:Key="SemiOrange3" Color="#D56F0F" />
+    <SolidColorBrush x:Key="SemiOrange4" Color="#FF9214" />
+    <SolidColorBrush x:Key="SemiOrange5" Color="#FFAE43" />
+    <SolidColorBrush x:Key="SemiOrange6" Color="#FFC772" />
+    <SolidColorBrush x:Key="SemiOrange7" Color="#FFDDA1" />
+    <SolidColorBrush x:Key="SemiOrange8" Color="#FFEFD0" />
+    <SolidColorBrush x:Key="SemiOrange9" Color="#FFF9ED" />
+    <SolidColorBrush x:Key="SemiGrey0" Color="#1C1F23" />
+    <SolidColorBrush x:Key="SemiGrey1" Color="#2E3238" />
+    <SolidColorBrush x:Key="SemiGrey2" Color="#41464C" />
+    <SolidColorBrush x:Key="SemiGrey3" Color="#555B61" />
+    <SolidColorBrush x:Key="SemiGrey4" Color="#6B7075" />
+    <SolidColorBrush x:Key="SemiGrey5" Color="#888D92" />
+    <SolidColorBrush x:Key="SemiGrey6" Color="#A7ABB0" />
+    <SolidColorBrush x:Key="SemiGrey7" Color="#C6CACD" />
+    <SolidColorBrush x:Key="SemiGrey8" Color="#E6E8EA" />
+    <SolidColorBrush x:Key="SemiGrey9" Color="#F9F9F9" />
+
+    <!--  Primary  -->
+    <SolidColorBrush x:Key="SemiColorPrimary" Color="#FF54A9FF" />
+    <SolidColorBrush x:Key="SemiColorPrimaryPointerover" Color="#FF7FC1FF" />
+    <SolidColorBrush x:Key="SemiColorPrimaryPressed" Color="#FFA9D7FF" />
+    <SolidColorBrush x:Key="SemiColorPrimaryDisabled" Color="#FF135CB8" />
+    <SolidColorBrush x:Key="SemiColorPrimaryLight" Opacity="0.2" Color="#FF54A9FF" />
+    <SolidColorBrush x:Key="SemiColorPrimaryLightPointerover" Opacity="0.3" Color="#FF54A9FF" />
+    <SolidColorBrush x:Key="SemiColorPrimaryLightActive" Opacity="0.4" Color="#FF54A9FF" />
+    <!--  Secondary  -->
+    <SolidColorBrush x:Key="SemiColorSecondary" Color="#FF40B4F3" />
+    <SolidColorBrush x:Key="SemiColorSecondaryPointerover" Color="#FF6EC8F6" />
+    <SolidColorBrush x:Key="SemiColorSecondaryPressed" Color="#FF9DDCF9" />
+    <SolidColorBrush x:Key="SemiColorSecondaryDisabled" Color="#FF0366A9" />
+    <SolidColorBrush x:Key="SemiColorSecondaryLight" Opacity="0.2" Color="#FF40B4F3" />
+    <SolidColorBrush x:Key="SemiColorSecondaryLightPointerover" Opacity="0.3" Color="#FF40B4F3" />
+    <SolidColorBrush x:Key="SemiColorSecondaryLightActive" Opacity="0.4" Color="#FF40B4F3" />
+    <!--  Tertiary  -->
+    <SolidColorBrush x:Key="SemiColorTertiary" Color="#FF888D92" />
+    <SolidColorBrush x:Key="SemiColorTertiaryPointerover" Color="#FFA7ABB0" />
+    <SolidColorBrush x:Key="SemiColorTertiaryPressed" Color="#FFC6CACD" />
+    <SolidColorBrush x:Key="SemiColorTertiaryLight" Opacity="0.2" Color="#FF888D92" />
+    <SolidColorBrush x:Key="SemiColorTertiaryLightPointerover" Opacity="0.3" Color="#FF888D92" />
+    <SolidColorBrush x:Key="SemiColorTertiaryLightActive" Opacity="0.4" Color="#FF888D92" />
+    <!--  Information  -->
+    <SolidColorBrush x:Key="SemiColorInformation" Color="#FF54A9FF" />
+    <SolidColorBrush x:Key="SemiColorInformationPointerover" Color="#FF7FC1FF" />
+    <SolidColorBrush x:Key="SemiColorInformationPressed" Color="#FFA9D7FF" />
+    <SolidColorBrush x:Key="SemiColorInformationDisabled" Color="#FF135CB8" />
+    <SolidColorBrush x:Key="SemiColorInformationLight" Opacity="0.2" Color="#FF54A9FF" />
+    <SolidColorBrush x:Key="SemiColorInformationLightPointerover" Opacity="0.3" Color="#FF54A9FF" />
+    <SolidColorBrush x:Key="SemiColorInformationLightActive" Opacity="0.4" Color="#FF54A9FF" />
+    <!--  Success  -->
+    <SolidColorBrush x:Key="SemiColorSuccess" Color="#FF5DC264" />
+    <SolidColorBrush x:Key="SemiColorSuccessPointerover" Color="#FF7FD184" />
+    <SolidColorBrush x:Key="SemiColorSuccessPressed" Color="#FFA6E1A8" />
+    <SolidColorBrush x:Key="SemiColorSuccessDisabled" Color="#FF277731" />
+    <SolidColorBrush x:Key="SemiColorSuccessLight" Opacity="0.2" Color="#FF5DC264" />
+    <SolidColorBrush x:Key="SemiColorSuccessLightPointerover" Opacity="0.3" Color="#FF5DC264" />
+    <SolidColorBrush x:Key="SemiColorSuccessLightActive" Opacity="0.4" Color="#FF5DC264" />
+    <!--  Warning  -->
+    <SolidColorBrush x:Key="SemiColorWarning" Color="#FFFFAE43" />
+    <SolidColorBrush x:Key="SemiColorWarningPointerover" Color="#FFFFC772" />
+    <SolidColorBrush x:Key="SemiColorWarningPressed" Color="#FFFFDDA1" />
+    <SolidColorBrush x:Key="SemiColorWarningLight" Opacity="0.2" Color="#FFFFAE43" />
+    <SolidColorBrush x:Key="SemiColorWarningLightPointerover" Opacity="0.3" Color="#FFFFAE43" />
+    <SolidColorBrush x:Key="SemiColorWarningLightActive" Opacity="0.4" Color="#FFFFAE43" />
+    <!--  Danger  -->
+    <SolidColorBrush x:Key="SemiColorDanger" Color="#FFFC725A" />
+    <SolidColorBrush x:Key="SemiColorDangerPointerover" Color="#FFFD9983" />
+    <SolidColorBrush x:Key="SemiColorDangerPressed" Color="#FFFDBEAC" />
+    <SolidColorBrush x:Key="SemiColorDangerLight" Opacity="0.2" Color="#FFFC725A" />
+    <SolidColorBrush x:Key="SemiColorDangerLightPointerover" Opacity="0.3" Color="#FFFC725A" />
+    <SolidColorBrush x:Key="SemiColorDangerLightActive" Opacity="0.4" Color="#FFFC725A" />
+
+    <!--  Text and Icons  -->
+    <SolidColorBrush x:Key="SemiColorText0" Color="#FFF9F9F9" />
+    <SolidColorBrush x:Key="SemiColorText1" Opacity="0.8" Color="#FFF9F9F9" />
+    <SolidColorBrush x:Key="SemiColorText2" Opacity="0.6" Color="#FFF9F9F9" />
+    <SolidColorBrush x:Key="SemiColorText3" Opacity="0.35" Color="#FFF9F9F9" />
+
+    <!--  Link  -->
+    <SolidColorBrush x:Key="SemiColorLink" Color="#FF54A9FF" />
+    <SolidColorBrush x:Key="SemiColorLinkPointerover" Color="#FF7FC1FF" />
+    <SolidColorBrush x:Key="SemiColorLinkActive" Color="#FFA9D7FF" />
+    <SolidColorBrush x:Key="SemiColorLinkVisited" Color="#FF54A9FF" />
+
+    <!--  Background  -->
+    <SolidColorBrush x:Key="SemiColorBackground0" Color="#FF16161A" />
+    <SolidColorBrush x:Key="SemiColorBackground1" Color="#FF232429" />
+    <SolidColorBrush x:Key="SemiColorBackground2" Color="#FF35363C" />
+    <SolidColorBrush x:Key="SemiColorBackground3" Color="#FF43444A" />
+    <SolidColorBrush x:Key="SemiColorBackground4" Color="#FF4F5159" />
+
+    <!--  Fill  -->
+    <SolidColorBrush x:Key="SemiColorFill0" Opacity="0.12" Color="White" />
+    <SolidColorBrush x:Key="SemiColorFill1" Opacity="0.16" Color="White" />
+    <SolidColorBrush x:Key="SemiColorFill2" Opacity="0.20" Color="White" />
+
+    <!--  Border  -->
+    <SolidColorBrush x:Key="SemiColorBorder" Opacity="0.08" Color="White" />
+
+    <!--  Disabled  -->
+    <SolidColorBrush x:Key="SemiColorDisabledText" Opacity="0.35" Color="#FFF9F9F9" />
+    <SolidColorBrush x:Key="SemiColorDisabledBorder" Color="#FF2E3238" />
+    <SolidColorBrush x:Key="SemiColorDisabledBackground" Color="#FF2E3238" />
+    <SolidColorBrush x:Key="SemiColorDisabledFill" Opacity="0.04" Color="#FFE6E8EA" />
 </ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Dark/SplitView.axaml b/src/Semi.Avalonia/Themes/Dark/SplitView.axaml
index 3d12d13..ff349b5 100644
--- a/src/Semi.Avalonia/Themes/Dark/SplitView.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/SplitView.axaml
@@ -9,5 +9,5 @@
     <sys:TimeSpan x:Key="SplitViewPaneAnimationCloseDuration">00:00:00.1</sys:TimeSpan>
     <Easing x:Key="SplitViewPaneAnimationEasing">0.1,0.9,0.2,1.0</Easing>
     <SolidColorBrush x:Key="SplitViewSeparatorBackground" Opacity="0.08" Color="#F9F9F9" />
-    <SolidColorBrush x:Key="SplitViewPaneBackground" Color="Black" />
+    <SolidColorBrush x:Key="SplitViewPaneBackground" Color="#16161A" />
 </ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Dark/TreeView.axaml b/src/Semi.Avalonia/Themes/Dark/TreeView.axaml
index f9e584a..91383b9 100644
--- a/src/Semi.Avalonia/Themes/Dark/TreeView.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/TreeView.axaml
@@ -16,7 +16,7 @@
     <SolidColorBrush x:Key="TreeViewItemDefaultBackground" Color="Transparent" />
     <SolidColorBrush x:Key="TreeViewItemPointerOverBackground" Opacity="0.12" Color="White" />
     <SolidColorBrush x:Key="TreeViewItemPressedBackground" Opacity="0.16" Color="White" />
-    <SolidColorBrush x:Key="TreeViewItemSelectedBackground" Color="#053170" />
+    <SolidColorBrush x:Key="TreeViewItemSelectedBackground" Opacity="0.2" Color="#54A9FF" />
     <SolidColorBrush x:Key="TreeViewItemDisabledBackground" Color="Transparent" />
     <SolidColorBrush x:Key="TreeViewItemSelectedDisabledBackground" Opacity="0.04" Color="#E6E8EA" />
 
diff --git a/src/Semi.Avalonia/Themes/Light/Button.axaml b/src/Semi.Avalonia/Themes/Light/Button.axaml
index a859323..ae8214c 100644
--- a/src/Semi.Avalonia/Themes/Light/Button.axaml
+++ b/src/Semi.Avalonia/Themes/Light/Button.axaml
@@ -1,5 +1,6 @@
 <ResourceDictionary
-    xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:sys="clr-namespace:System;assembly=System.Runtime">
 
     <sys:Double x:Key="ButtonDefaultFontSize">14</sys:Double>
@@ -19,12 +20,12 @@
     <SolidColorBrush x:Key="ButtonDefaultTertiaryForeground" Color="#6B7075" />
     <SolidColorBrush x:Key="ButtonDefaultWarningForeground" Color="#FC8800" />
     <SolidColorBrush x:Key="ButtonDefaultDangerForeground" Color="#F93920" />
-    <SolidColorBrush x:Key="ButtonDefaultDisabledForeground" Color="#E6E8EA" />
+    <SolidColorBrush x:Key="ButtonDefaultDisabledForeground" Opacity="0.35" Color="#1C1F23" />
 
     <SolidColorBrush x:Key="ButtonDefaultBackground" Opacity="0.05" Color="#2E3238" />
     <SolidColorBrush x:Key="ButtonDefaultPointeroverBackground" Opacity="0.09" Color="#2E3238" />
     <SolidColorBrush x:Key="ButtonDefaultPressedBackground" Opacity="0.13" Color="#2E3238" />
-    <SolidColorBrush x:Key="ButtonDefaultDisabledBackground" Opacity="0.05" Color="#2E3238" />
+    <SolidColorBrush x:Key="ButtonDefaultDisabledBackground" Color="#E6E8EA" />
 
     <SolidColorBrush x:Key="ButtonDefaultBorderBrush" Color="Transparent" />
     <SolidColorBrush x:Key="ButtonDefaultPointeroverBorderBrush" Color="Transparent" />
diff --git a/src/Semi.Avalonia/Themes/Light/Palette.axaml b/src/Semi.Avalonia/Themes/Light/Palette.axaml
index 779852d..c6b3898 100644
--- a/src/Semi.Avalonia/Themes/Light/Palette.axaml
+++ b/src/Semi.Avalonia/Themes/Light/Palette.axaml
@@ -1,4 +1,250 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!-- Add Resources Here -->
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <SolidColorBrush x:Key="SemiAmber0" Color="#FEFBEB" />
+    <SolidColorBrush x:Key="SemiAmber1" Color="#FCF5CE" />
+    <SolidColorBrush x:Key="SemiAmber2" Color="#F9E89E" />
+    <SolidColorBrush x:Key="SemiAmber3" Color="#F6D86F" />
+    <SolidColorBrush x:Key="SemiAmber4" Color="#F3C641" />
+    <SolidColorBrush x:Key="SemiAmber5" Color="#F0B114" />
+    <SolidColorBrush x:Key="SemiAmber6" Color="#C88A0F" />
+    <SolidColorBrush x:Key="SemiAmber7" Color="#A0660A" />
+    <SolidColorBrush x:Key="SemiAmber8" Color="#784606" />
+    <SolidColorBrush x:Key="SemiAmber9" Color="#502B03" />
+    <SolidColorBrush x:Key="SemiBlue0" Color="#EAF5FF" />
+    <SolidColorBrush x:Key="SemiBlue1" Color="#CBE7FE" />
+    <SolidColorBrush x:Key="SemiBlue2" Color="#98CDFD" />
+    <SolidColorBrush x:Key="SemiBlue3" Color="#65B2FC" />
+    <SolidColorBrush x:Key="SemiBlue4" Color="#3295FB" />
+    <SolidColorBrush x:Key="SemiBlue5" Color="#0077FA" />
+    <SolidColorBrush x:Key="SemiBlue6" Color="#0062D6" />
+    <SolidColorBrush x:Key="SemiBlue7" Color="#004FB3" />
+    <SolidColorBrush x:Key="SemiBlue8" Color="#003D8F" />
+    <SolidColorBrush x:Key="SemiBlue9" Color="#002C6B" />
+    <SolidColorBrush x:Key="SemiCyan0" Color="#E5F7F8" />
+    <SolidColorBrush x:Key="SemiCyan1" Color="#C2EFF0" />
+    <SolidColorBrush x:Key="SemiCyan2" Color="#8ADDE2" />
+    <SolidColorBrush x:Key="SemiCyan3" Color="#58CBD3" />
+    <SolidColorBrush x:Key="SemiCyan4" Color="#2CB8C5" />
+    <SolidColorBrush x:Key="SemiCyan5" Color="#05A4B6" />
+    <SolidColorBrush x:Key="SemiCyan6" Color="#038698" />
+    <SolidColorBrush x:Key="SemiCyan7" Color="#016979" />
+    <SolidColorBrush x:Key="SemiCyan8" Color="#004D5B" />
+    <SolidColorBrush x:Key="SemiCyan9" Color="#00323D" />
+    <SolidColorBrush x:Key="SemiGreen0" Color="#ECF7EC" />
+    <SolidColorBrush x:Key="SemiGreen1" Color="#D0F0D1" />
+    <SolidColorBrush x:Key="SemiGreen2" Color="#A4E0A7" />
+    <SolidColorBrush x:Key="SemiGreen3" Color="#7DD182" />
+    <SolidColorBrush x:Key="SemiGreen4" Color="#5AC262" />
+    <SolidColorBrush x:Key="SemiGreen5" Color="#3BB346" />
+    <SolidColorBrush x:Key="SemiGreen6" Color="#30953B" />
+    <SolidColorBrush x:Key="SemiGreen7" Color="#25772F" />
+    <SolidColorBrush x:Key="SemiGreen8" Color="#1B5924" />
+    <SolidColorBrush x:Key="SemiGreen9" Color="#113C18" />
+    <SolidColorBrush x:Key="SemiGrey0" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="SemiGrey1" Color="#E6E8EA" />
+    <SolidColorBrush x:Key="SemiGrey2" Color="#C6CACD" />
+    <SolidColorBrush x:Key="SemiGrey3" Color="#A7ABB0" />
+    <SolidColorBrush x:Key="SemiGrey4" Color="#888D92" />
+    <SolidColorBrush x:Key="SemiGrey5" Color="#6B7075" />
+    <SolidColorBrush x:Key="SemiGrey6" Color="#555B61" />
+    <SolidColorBrush x:Key="SemiGrey7" Color="#41464C" />
+    <SolidColorBrush x:Key="SemiGrey8" Color="#2E3238" />
+    <SolidColorBrush x:Key="SemiGrey9" Color="#1C1F23" />
+    <SolidColorBrush x:Key="SemiIndigo0" Color="#ECEFF8" />
+    <SolidColorBrush x:Key="SemiIndigo1" Color="#D1D8F0" />
+    <SolidColorBrush x:Key="SemiIndigo2" Color="#A7B3E1" />
+    <SolidColorBrush x:Key="SemiIndigo3" Color="#8090D3" />
+    <SolidColorBrush x:Key="SemiIndigo4" Color="#5E6FC4" />
+    <SolidColorBrush x:Key="SemiIndigo5" Color="#3F51B5" />
+    <SolidColorBrush x:Key="SemiIndigo6" Color="#3342A1" />
+    <SolidColorBrush x:Key="SemiIndigo7" Color="#28348C" />
+    <SolidColorBrush x:Key="SemiIndigo8" Color="#1F2878" />
+    <SolidColorBrush x:Key="SemiIndigo9" Color="#171D63" />
+    <SolidColorBrush x:Key="SemiLightBlue0" Color="#E9F7FD" />
+    <SolidColorBrush x:Key="SemiLightBlue1" Color="#C9ECFC" />
+    <SolidColorBrush x:Key="SemiLightBlue2" Color="#95D8F8" />
+    <SolidColorBrush x:Key="SemiLightBlue3" Color="#62C3F5" />
+    <SolidColorBrush x:Key="SemiLightBlue4" Color="#30ACF1" />
+    <SolidColorBrush x:Key="SemiLightBlue5" Color="#0095EE" />
+    <SolidColorBrush x:Key="SemiLightBlue6" Color="#007BCA" />
+    <SolidColorBrush x:Key="SemiLightBlue7" Color="#0063A7" />
+    <SolidColorBrush x:Key="SemiLightBlue8" Color="#004B83" />
+    <SolidColorBrush x:Key="SemiLightBlue9" Color="#00355F" />
+    <SolidColorBrush x:Key="SemiLightGreen0" Color="#F3F8EC" />
+    <SolidColorBrush x:Key="SemiLightGreen1" Color="#E3F0D0" />
+    <SolidColorBrush x:Key="SemiLightGreen2" Color="#C8E2A5" />
+    <SolidColorBrush x:Key="SemiLightGreen3" Color="#ADD37E" />
+    <SolidColorBrush x:Key="SemiLightGreen4" Color="#93C55B" />
+    <SolidColorBrush x:Key="SemiLightGreen5" Color="#7BB63C" />
+    <SolidColorBrush x:Key="SemiLightGreen6" Color="#649830" />
+    <SolidColorBrush x:Key="SemiLightGreen7" Color="#4E7926" />
+    <SolidColorBrush x:Key="SemiLightGreen8" Color="#395B1B" />
+    <SolidColorBrush x:Key="SemiLightGreen9" Color="#253D12" />
+    <SolidColorBrush x:Key="SemiLime0" Color="#F2FAE6" />
+    <SolidColorBrush x:Key="SemiLime1" Color="#E3F6C5" />
+    <SolidColorBrush x:Key="SemiLime2" Color="#CBED8E" />
+    <SolidColorBrush x:Key="SemiLime3" Color="#B7E35B" />
+    <SolidColorBrush x:Key="SemiLime4" Color="#A7DA2C" />
+    <SolidColorBrush x:Key="SemiLime5" Color="#9BD100" />
+    <SolidColorBrush x:Key="SemiLime6" Color="#7EAE00" />
+    <SolidColorBrush x:Key="SemiLime7" Color="#638B00" />
+    <SolidColorBrush x:Key="SemiLime8" Color="#486800" />
+    <SolidColorBrush x:Key="SemiLime9" Color="#2F4600" />
+    <SolidColorBrush x:Key="SemiOrange0" Color="#FFF8EA" />
+    <SolidColorBrush x:Key="SemiOrange1" Color="#FEEECC" />
+    <SolidColorBrush x:Key="SemiOrange2" Color="#FED998" />
+    <SolidColorBrush x:Key="SemiOrange3" Color="#FDC165" />
+    <SolidColorBrush x:Key="SemiOrange4" Color="#FDA633" />
+    <SolidColorBrush x:Key="SemiOrange5" Color="#FC8800" />
+    <SolidColorBrush x:Key="SemiOrange6" Color="#D26700" />
+    <SolidColorBrush x:Key="SemiOrange7" Color="#A84A00" />
+    <SolidColorBrush x:Key="SemiOrange8" Color="#7E3100" />
+    <SolidColorBrush x:Key="SemiOrange9" Color="#541D00" />
+    <SolidColorBrush x:Key="SemiPink0" Color="#FDECEF" />
+    <SolidColorBrush x:Key="SemiPink1" Color="#FBCFD8" />
+    <SolidColorBrush x:Key="SemiPink2" Color="#F6A0B5" />
+    <SolidColorBrush x:Key="SemiPink3" Color="#F27396" />
+    <SolidColorBrush x:Key="SemiPink4" Color="#ED487B" />
+    <SolidColorBrush x:Key="SemiPink5" Color="#E91E63" />
+    <SolidColorBrush x:Key="SemiPink6" Color="#C51356" />
+    <SolidColorBrush x:Key="SemiPink7" Color="#A20B48" />
+    <SolidColorBrush x:Key="SemiPink8" Color="#7E053A" />
+    <SolidColorBrush x:Key="SemiPink9" Color="#5A012B" />
+    <SolidColorBrush x:Key="SemiPurple0" Color="#F7E9F7" />
+    <SolidColorBrush x:Key="SemiPurple1" Color="#EFCAF0" />
+    <SolidColorBrush x:Key="SemiPurple2" Color="#DD9BE0" />
+    <SolidColorBrush x:Key="SemiPurple3" Color="#C96FD1" />
+    <SolidColorBrush x:Key="SemiPurple4" Color="#B449C2" />
+    <SolidColorBrush x:Key="SemiPurple5" Color="#9E28B3" />
+    <SolidColorBrush x:Key="SemiPurple6" Color="#871E9E" />
+    <SolidColorBrush x:Key="SemiPurple7" Color="#71168A" />
+    <SolidColorBrush x:Key="SemiPurple8" Color="#5C0F75" />
+    <SolidColorBrush x:Key="SemiPurple9" Color="#490A61" />
+    <SolidColorBrush x:Key="SemiRed0" Color="#FEF2ED" />
+    <SolidColorBrush x:Key="SemiRed1" Color="#FEDDD2" />
+    <SolidColorBrush x:Key="SemiRed2" Color="#FDB7A5" />
+    <SolidColorBrush x:Key="SemiRed3" Color="#FB9078" />
+    <SolidColorBrush x:Key="SemiRed4" Color="#FA664C" />
+    <SolidColorBrush x:Key="SemiRed5" Color="#F93920" />
+    <SolidColorBrush x:Key="SemiRed6" Color="#D52515" />
+    <SolidColorBrush x:Key="SemiRed7" Color="#B2140C" />
+    <SolidColorBrush x:Key="SemiRed8" Color="#8E0805" />
+    <SolidColorBrush x:Key="SemiRed9" Color="#6A0103" />
+    <SolidColorBrush x:Key="SemiTeal0" Color="#E4F7F4" />
+    <SolidColorBrush x:Key="SemiTeal1" Color="#C0F0E8" />
+    <SolidColorBrush x:Key="SemiTeal2" Color="#87E0D3" />
+    <SolidColorBrush x:Key="SemiTeal3" Color="#54D1C1" />
+    <SolidColorBrush x:Key="SemiTeal4" Color="#27C2B0" />
+    <SolidColorBrush x:Key="SemiTeal5" Color="#00B3A1" />
+    <SolidColorBrush x:Key="SemiTeal6" Color="#009589" />
+    <SolidColorBrush x:Key="SemiTeal7" Color="#00776F" />
+    <SolidColorBrush x:Key="SemiTeal8" Color="#005955" />
+    <SolidColorBrush x:Key="SemiTeal9" Color="#003C3A" />
+    <SolidColorBrush x:Key="SemiViolet0" Color="#F3EDF9" />
+    <SolidColorBrush x:Key="SemiViolet1" Color="#E2D1F4" />
+    <SolidColorBrush x:Key="SemiViolet2" Color="#C4A7E9" />
+    <SolidColorBrush x:Key="SemiViolet3" Color="#A67FDD" />
+    <SolidColorBrush x:Key="SemiViolet4" Color="#885BD2" />
+    <SolidColorBrush x:Key="SemiViolet5" Color="#6A3AC7" />
+    <SolidColorBrush x:Key="SemiViolet6" Color="#572FB3" />
+    <SolidColorBrush x:Key="SemiViolet7" Color="#46259E" />
+    <SolidColorBrush x:Key="SemiViolet8" Color="#361C8A" />
+    <SolidColorBrush x:Key="SemiViolet9" Color="#281475" />
+    <SolidColorBrush x:Key="SemiYellow0" Color="#FFFDEA" />
+    <SolidColorBrush x:Key="SemiYellow1" Color="#FEFBCB" />
+    <SolidColorBrush x:Key="SemiYellow2" Color="#FDF398" />
+    <SolidColorBrush x:Key="SemiYellow3" Color="#FCE865" />
+    <SolidColorBrush x:Key="SemiYellow4" Color="#FBDA32" />
+    <SolidColorBrush x:Key="SemiYellow5" Color="#FAC800" />
+    <SolidColorBrush x:Key="SemiYellow6" Color="#D0AA00" />
+    <SolidColorBrush x:Key="SemiYellow7" Color="#A78B00" />
+    <SolidColorBrush x:Key="SemiYellow8" Color="#7D6A00" />
+    <SolidColorBrush x:Key="SemiYellow9" Color="#534800" />
+
+    <!--  Primary  -->
+    <SolidColorBrush x:Key="SemiColorPrimary" Color="#FF0077FA" />
+    <SolidColorBrush x:Key="SemiColorPrimaryPointerover" Color="#FF0062D6" />
+    <SolidColorBrush x:Key="SemiColorPrimaryPressed" Color="#FF004FB3" />
+    <SolidColorBrush x:Key="SemiColorPrimaryDisabled" Color="#FF98CDFD" />
+    <SolidColorBrush x:Key="SemiColorPrimaryLight" Color="#FFEAF5FF" />
+    <SolidColorBrush x:Key="SemiColorPrimaryLightPointerover" Color="#FFCBE7FE" />
+    <SolidColorBrush x:Key="SemiColorPrimaryLightActive" Color="#FF98CDFD" />
+    <!--  Secondary  -->
+    <SolidColorBrush x:Key="SemiColorSecondary" Color="#FF0095EE" />
+    <SolidColorBrush x:Key="SemiColorSecondaryPointerover" Color="#FF007BCA" />
+    <SolidColorBrush x:Key="SemiColorSecondaryPressed" Color="#FF0063A7" />
+    <SolidColorBrush x:Key="SemiColorSecondaryDisabled" Color="#FF95D8F8" />
+    <SolidColorBrush x:Key="SemiColorSecondaryLight" Color="#FFE9F7FD" />
+    <SolidColorBrush x:Key="SemiColorSecondaryLightPointerover" Color="#FFC9ECFC" />
+    <SolidColorBrush x:Key="SemiColorSecondaryLightActive" Color="#FF95D8F8" />
+    <!--  Tertiary  -->
+    <SolidColorBrush x:Key="SemiColorTertiary" Color="#FF6B7075" />
+    <SolidColorBrush x:Key="SemiColorTertiaryPointerover" Color="#FF555B61" />
+    <SolidColorBrush x:Key="SemiColorTertiaryPressed" Color="#FF41464C" />
+    <SolidColorBrush x:Key="SemiColorTertiaryLight" Color="#FFF9F9F9" />
+    <SolidColorBrush x:Key="SemiColorTertiaryLightPointerover" Color="#FFE6E8EA" />
+    <SolidColorBrush x:Key="SemiColorTertiaryLightActive" Color="#FFC6CACD" />
+    <!--  Information  -->
+    <SolidColorBrush x:Key="SemiColorInformation" Color="#FF0077FA" />
+    <SolidColorBrush x:Key="SemiColorInformationPointerover" Color="#FF0062D6" />
+    <SolidColorBrush x:Key="SemiColorInformationPressed" Color="#FF004FB3" />
+    <SolidColorBrush x:Key="SemiColorInformationDisabled" Color="#FF98CDFD" />
+    <SolidColorBrush x:Key="SemiColorInformationLight" Color="#FFEAF5FF" />
+    <SolidColorBrush x:Key="SemiColorInformationLightPointerover" Color="#FFCBE7FE" />
+    <SolidColorBrush x:Key="SemiColorInformationLightActive" Color="#FF98CDFD" />
+    <!--  Success  -->
+    <SolidColorBrush x:Key="SemiColorSuccess" Color="#FF3BB346" />
+    <SolidColorBrush x:Key="SemiColorSuccessPointerover" Color="#FF30953B" />
+    <SolidColorBrush x:Key="SemiColorSuccessPressed" Color="#FF25772F" />
+    <SolidColorBrush x:Key="SemiColorSuccessDisabled" Color="#FFA4E0A7" />
+    <SolidColorBrush x:Key="SemiColorSuccessLight" Color="#FFECF7EC" />
+    <SolidColorBrush x:Key="SemiColorSuccessLightPointerover" Color="#FFD0F0D1" />
+    <SolidColorBrush x:Key="SemiColorSuccessLightActive" Color="#FFA4E0A7" />
+    <!--  Warning  -->
+    <SolidColorBrush x:Key="SemiColorWarning" Color="#FFFC8800" />
+    <SolidColorBrush x:Key="SemiColorWarningPointerover" Color="#FFD26700" />
+    <SolidColorBrush x:Key="SemiColorWarningPressed" Color="#FFA84A00" />
+    <SolidColorBrush x:Key="SemiColorWarningLight" Color="#FFFFF8EA" />
+    <SolidColorBrush x:Key="SemiColorWarningLightPointerover" Color="#FFFEEECC" />
+    <SolidColorBrush x:Key="SemiColorWarningLightActive" Color="#FFFED998" />
+    <!--  Danger  -->
+    <SolidColorBrush x:Key="SemiColorDanger" Color="#FFF93920" />
+    <SolidColorBrush x:Key="SemiColorDangerPointerover" Color="#FFD52515" />
+    <SolidColorBrush x:Key="SemiColorDangerPressed" Color="#FFB2140C" />
+    <SolidColorBrush x:Key="SemiColorDangerLight" Color="#FFFEF2ED" />
+    <SolidColorBrush x:Key="SemiColorDangerLightPointerover" Color="#FFFEDDD2" />
+    <SolidColorBrush x:Key="SemiColorDangerLightActive" Color="#FFFDB7A5" />
+
+    <!--  Text and Icons  -->
+    <SolidColorBrush x:Key="SemiColorText0" Color="#FF1C1F23" />
+    <SolidColorBrush x:Key="SemiColorText1" Opacity="0.8" Color="#FF1C1F23" />
+    <SolidColorBrush x:Key="SemiColorText2" Opacity="0.62" Color="#FF1C1F23" />
+    <SolidColorBrush x:Key="SemiColorText3" Opacity="0.35" Color="#FF1C1F23" />
+
+    <!--  Link  -->
+    <SolidColorBrush x:Key="SemiColorLink" Color="#FF0077FA" />
+    <SolidColorBrush x:Key="SemiColorLinkPointerover" Color="#FF0062D6" />
+    <SolidColorBrush x:Key="SemiColorLinkActive" Color="#FF004FB3" />
+    <SolidColorBrush x:Key="SemiColorLinkVisited" Color="#FF0077FA" />
+
+    <!--  Background  -->
+    <SolidColorBrush x:Key="SemiColorBackground0" Color="White" />
+    <SolidColorBrush x:Key="SemiColorBackground1" Color="White" />
+    <SolidColorBrush x:Key="SemiColorBackground2" Color="White" />
+    <SolidColorBrush x:Key="SemiColorBackground3" Color="White" />
+    <SolidColorBrush x:Key="SemiColorBackground4" Color="White" />
+
+    <!--  Fill  -->
+    <SolidColorBrush x:Key="SemiColorFill0" Opacity="0.05" Color="#FF2E3238" />
+    <SolidColorBrush x:Key="SemiColorFill1" Opacity="0.09" Color="#FF2E3238" />
+    <SolidColorBrush x:Key="SemiColorFill2" Opacity="0.13" Color="#FF2E3238" />
+
+    <!--  Border  -->
+    <SolidColorBrush x:Key="SemiColorBorder" Opacity="0.08" Color="#FF1C1F23" />
+
+    <!--  Disabled  -->
+    <SolidColorBrush x:Key="SemiColorDisabledText" Opacity="0.35" Color="#FF1C1F23" />
+    <SolidColorBrush x:Key="SemiColorDisabledBorder" Color="#FFE6E8EA" />
+    <SolidColorBrush x:Key="SemiColorDisabledBackground" Color="#FFE6E8EA" />
+    <SolidColorBrush x:Key="SemiColorDisabledFill" Opacity="0.04" Color="#FF2E3238" />
 </ResourceDictionary>