diff --git a/demo/Semi.Avalonia.Demo/Controls/ColorItemControl.axaml b/demo/Semi.Avalonia.Demo/Controls/ColorItemControl.axaml
index a1274b3..505b54b 100644
--- a/demo/Semi.Avalonia.Demo/Controls/ColorItemControl.axaml
+++ b/demo/Semi.Avalonia.Demo/Controls/ColorItemControl.axaml
@@ -15,7 +15,8 @@
                 <Border
                     Width="{TemplateBinding Width}"
                     Height="{TemplateBinding Height}"
-                    Background="{TemplateBinding Background}">
+                    Background="{TemplateBinding Background}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
                     <Panel>
                         <TextBlock
                             Padding="8"
diff --git a/demo/Semi.Avalonia.Demo/Controls/FunctionalColorGroupControl.axaml b/demo/Semi.Avalonia.Demo/Controls/FunctionalColorGroupControl.axaml
new file mode 100644
index 0000000..30bd77f
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Controls/FunctionalColorGroupControl.axaml
@@ -0,0 +1,89 @@
+<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 Header="ResourceKey">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate>
+                                                <SelectableTextBlock VerticalAlignment="Center" Text="{Binding ResourceKey}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTextColumn
+                                        Binding="{Binding ColorDisplayName}"
+                                        CanUserSort="False"
+                                        Header="Name" />
+                                    <DataGridTemplateColumn Header="Color">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate>
+                                                <StackPanel Orientation="Horizontal">
+                                                    <controls:ColorItemControl
+                                                        Width="40"
+                                                        Height="20"
+                                                        Background="{Binding Brush}"
+                                                        CornerRadius="3" />
+                                                    <SelectableTextBlock
+                                                        Margin="8,0,0,0"
+                                                        VerticalAlignment="Center"
+                                                        Text="{Binding Hex}" />
+                                                </StackPanel>
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                </DataGrid.Columns>
+                            </DataGrid>
+                        </TabItem>
+                        <TabItem Header="Dark">
+                            <DataGrid IsReadOnly="True" Items="{TemplateBinding DarkColors}">
+                                <DataGrid.Columns>
+                                    <DataGridTemplateColumn Header="ResourceKey">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate>
+                                                <SelectableTextBlock VerticalAlignment="Center" Text="{Binding ResourceKey}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTextColumn Binding="{Binding ColorDisplayName}" Header="Name" />
+                                    <DataGridTemplateColumn Header="Color">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate>
+                                                <StackPanel Orientation="Horizontal">
+                                                    <controls:ColorItemControl
+                                                        Width="40"
+                                                        Height="20"
+                                                        Background="{Binding Brush}"
+                                                        CornerRadius="3" />
+                                                    <SelectableTextBlock
+                                                        Margin="8,0,0,0"
+                                                        VerticalAlignment="Center"
+                                                        Text="{Binding Hex}" />
+                                                </StackPanel>
+                                            </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..cd44ade
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Controls/FunctionalColorGroupControl.cs
@@ -0,0 +1,38 @@
+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
index 3ed09a5..8cf0b6b 100644
--- a/demo/Semi.Avalonia.Demo/Pages/PaletteDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/PaletteDemo.axaml
@@ -17,6 +17,7 @@
             <ResourceDictionary.MergedDictionaries>
                 <ResourceInclude Source="../Controls/ColorItemControl.axaml" />
                 <ResourceInclude Source="../Controls/ColorDetailControl.axaml" />
+                <ResourceInclude Source="../Controls/FunctionalColorGroupControl.axaml" />
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </UserControl.Resources>
@@ -51,6 +52,10 @@
         <SplitView.Content>
             <ScrollViewer>
                 <StackPanel>
+                    <TextBlock
+                        Classes="H3"
+                        Text="Basic Colors"
+                        Theme="{DynamicResource TitleTextBlock}" />
                     <TabControl>
                         <TabItem Header="Light">
                             <ItemsControl Margin="16" Items="{Binding LightLists}">
@@ -101,6 +106,18 @@
                             </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>
diff --git a/demo/Semi.Avalonia.Demo/ViewModels/PaletteDemoViewModel.cs b/demo/Semi.Avalonia.Demo/ViewModels/PaletteDemoViewModel.cs
index 1b89ecb..747e0f2 100644
--- a/demo/Semi.Avalonia.Demo/ViewModels/PaletteDemoViewModel.cs
+++ b/demo/Semi.Avalonia.Demo/ViewModels/PaletteDemoViewModel.cs
@@ -1,4 +1,5 @@
 using System;
+using System.Collections.Generic;
 using System.Collections.ObjectModel;
 using Avalonia.Controls;
 using Avalonia.Markup.Xaml;
@@ -36,11 +37,14 @@ public class PaletteDemoViewModel: ObservableObject
         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"));
         InitializePalette();
+        InitializeFunctionalColors();
         WeakReferenceMessenger.Default.Register<PaletteDemoViewModel, ColorItemViewModel>(this, OnClickColorItem);
     }
 
@@ -62,6 +66,10 @@ public class PaletteDemoViewModel: ObservableObject
         }
     }
 
+    private void InitializeFunctionalColors()
+    {
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Primary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.PrimaryTokens));
+    }
     private void OnClickColorItem(PaletteDemoViewModel vm, ColorItemViewModel item)
     {
         SelectedColor = item;
@@ -96,7 +104,7 @@ public class ColorListViewModel: ObservableObject
             var key = "Semi" + color + i;
             if (resourceDictionary.TryGetValue(key, out var value))
             {
-                if (value is SolidColorBrush brush)
+                if (value is ISolidColorBrush brush)
                 {
                     string name = color + " " + i;
                     var item = new ColorItemViewModel(name, brush, key, light, i);
@@ -147,7 +155,7 @@ public class ColorItemViewModel : ObservableObject
         set => SetProperty(ref _hex, value);
     }
     
-    public ColorItemViewModel(string colorDisplayName, IBrush brush, string resourceKey, bool light, int index)
+    public ColorItemViewModel(string colorDisplayName, ISolidColorBrush brush, string resourceKey, bool light, int index)
     {
         ColorDisplayName = colorDisplayName;
         Brush = brush;
@@ -162,4 +170,55 @@ public class ColorItemViewModel : ObservableObject
             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"),
+    };
 }
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Themes/Dark/Palette.axaml b/src/Semi.Avalonia/Themes/Dark/Palette.axaml
index c5c8e70..923c8b5 100644
--- a/src/Semi.Avalonia/Themes/Dark/Palette.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/Palette.axaml
@@ -166,85 +166,85 @@
     <SolidColorBrush x:Key="SemiColorPrimaryPointerover" Color="#FF7FC1FF" />
     <SolidColorBrush x:Key="SemiColorPrimaryPressed" Color="#FFA9D7FF" />
     <SolidColorBrush x:Key="SemiColorPrimaryDisabled" Color="#FF135CB8" />
-    <SolidColorBrush x:Key="SemiColorPrimaryLight" Color="#FF54A9FF" Opacity="0.2" />
-    <SolidColorBrush x:Key="SemiColorPrimaryLightPointerover" Color="#FF54A9FF" Opacity="0.3"/>
-    <SolidColorBrush x:Key="SemiColorPrimaryLightActive" Color="#FF54A9FF" Opacity="0.4"/>
+    <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" Color="#FF40B4F3" Opacity="0.2" />
-    <SolidColorBrush x:Key="SemiColorSecondaryLightPointerover" Color="#FF40B4F3" Opacity="0.3" />
-    <SolidColorBrush x:Key="SemiColorSecondaryLightActive" Color="#FF40B4F3" Opacity="0.4" />
+    <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" Color="#FF888D92" Opacity="0.2" />
-    <SolidColorBrush x:Key="SemiColorTertiaryLightPointerover" Color="#FF888D92" Opacity="0.3"/>
-    <SolidColorBrush x:Key="SemiColorTertiaryLightActive" Color="#FF888D92" Opacity="0.4"/>
+    <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" Color="#FF54A9FF" Opacity="0.2" />
-    <SolidColorBrush x:Key="SemiColorInformationLightPointerover" Color="#FF54A9FF" Opacity="0.3"/>
-    <SolidColorBrush x:Key="SemiColorInformationLightActive" Color="#FF54A9FF" Opacity="0.4"/>
+    <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" Color="#FF5DC264" Opacity="0.2"/>
-    <SolidColorBrush x:Key="SemiColorSuccessLightPointerover" Color="#FF5DC264" Opacity="0.3"/>
-    <SolidColorBrush x:Key="SemiColorSuccessLightActive" Color="#FF5DC264" Opacity="0.4"/>
+    <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" Color="#FFFFAE43" Opacity="0.2" />
-    <SolidColorBrush x:Key="SemiColorWarningLightPointerover" Color="#FFFFAE43" Opacity="0.3"/>
-    <SolidColorBrush x:Key="SemiColorWarningLightActive" Color="#FFFFAE43" Opacity="0.4"/>
+    <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" Color="#FFFC725A" Opacity="0.2" />
-    <SolidColorBrush x:Key="SemiColorDangerLightPointerover" Color="#FFFC725A" Opacity="0.3" />
-    <SolidColorBrush x:Key="SemiColorDangerLightActive" Color="#FFFC725A" Opacity="0.4"/>
-    
-    <!-- Text and Icons--->
-    <SolidColorBrush x:Key="SemiColorText0" Color="#FFF9F9F9"></SolidColorBrush>
-    <SolidColorBrush x:Key="SemiColorText1" Color="#FFF9F9F9" Opacity="0.8"></SolidColorBrush>
-    <SolidColorBrush x:Key="SemiColorText2" Color="#FFF9F9F9" Opacity="0.6"></SolidColorBrush>
-    <SolidColorBrush x:Key="SemiColorText3" Color="#FFF9F9F9" Opacity="0.35"></SolidColorBrush>
-    
-    <!-- Link -->
-    <SolidColorBrush x:Key="SemiColorLink" Color="#FF54A9FF"></SolidColorBrush>
-    <SolidColorBrush x:Key="SemiColorLinkPointerover" Color="#FF7FC1FF"></SolidColorBrush>
-    <SolidColorBrush x:Key="SemiColorLinkActive" Color="#FFA9D7FF"></SolidColorBrush>
-    <SolidColorBrush x:Key="SemiColorLinkVisited" Color="#FF54A9FF"></SolidColorBrush>
-    
-    <!-- Background -->
-    <SolidColorBrush x:Key="SemiColorBackground0" Color="#FF16161A"></SolidColorBrush>
-    <SolidColorBrush x:Key="SemiColorBackground1" Color="#FF232429"></SolidColorBrush>
-    <SolidColorBrush x:Key="SemiColorBackground2" Color="#FF35363C"></SolidColorBrush>
-    <SolidColorBrush x:Key="SemiColorBackground3" Color="#FF43444A"></SolidColorBrush>
-    <SolidColorBrush x:Key="SemiColorBackground4" Color="#FF4F5159"></SolidColorBrush>
-    
-    <!-- Fill -->
-    <SolidColorBrush x:Key="SemiColorFill0" Color="White" Opacity="0.12"></SolidColorBrush>
-    <SolidColorBrush x:Key="SemiColorFill1" Color="White" Opacity="0.16"></SolidColorBrush>
-    <SolidColorBrush x:Key="SemiColorFill2" Color="White" Opacity="0.20"></SolidColorBrush>
-    
-    <!-- Border -->
-    <SolidColorBrush x:Key="SemiColorBorder" Color="White" Opacity="0.08"></SolidColorBrush>
-    
-    <!-- Disabled -->
-    <SolidColorBrush x:Key="SemiColorDisabledText" Color="#FFF9F9F9" Opacity="0.35"></SolidColorBrush>
-    <SolidColorBrush x:Key="SemiColorDisabledBorder" Color="#FF2E3238"></SolidColorBrush>
-    <SolidColorBrush x:Key="SemiColorDisabledBackground" Color="#FF2E3238"></SolidColorBrush>
-    <SolidColorBrush x:Key="SemiColorDisabledFill" Color="#FFE6E8EA" Opacity="0.04"></SolidColorBrush>
+    <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/Light/Palette.axaml b/src/Semi.Avalonia/Themes/Light/Palette.axaml
index 4032938..c6b3898 100644
--- a/src/Semi.Avalonia/Themes/Light/Palette.axaml
+++ b/src/Semi.Avalonia/Themes/Light/Palette.axaml
@@ -214,37 +214,37 @@
     <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>
-    <SolidColorBrush x:Key="SemiColorText1" Color="#FF1C1F23" Opacity="0.8"></SolidColorBrush>
-    <SolidColorBrush x:Key="SemiColorText2" Color="#FF1C1F23" Opacity="0.62"></SolidColorBrush>
-    <SolidColorBrush x:Key="SemiColorText3" Color="#FF1C1F23" Opacity="0.35"></SolidColorBrush>
-    
-    <!-- Link -->
-    <SolidColorBrush x:Key="SemiColorLink" Color="#FF0077FA"></SolidColorBrush>
-    <SolidColorBrush x:Key="SemiColorLinkPointerover" Color="#FF0062D6"></SolidColorBrush>
-    <SolidColorBrush x:Key="SemiColorLinkActive" Color="#FF004FB3"></SolidColorBrush>
-    <SolidColorBrush x:Key="SemiColorLinkVisited" Color="#FF0077FA"></SolidColorBrush>
-    
-    <!-- Background -->
-    <SolidColorBrush x:Key="SemiColorBackground0" Color="White"></SolidColorBrush>
-    <SolidColorBrush x:Key="SemiColorBackground1" Color="White"></SolidColorBrush>
-    <SolidColorBrush x:Key="SemiColorBackground2" Color="White"></SolidColorBrush>
-    <SolidColorBrush x:Key="SemiColorBackground3" Color="White"></SolidColorBrush>
-    <SolidColorBrush x:Key="SemiColorBackground4" Color="White"></SolidColorBrush>
-    
-    <!-- Fill -->
-    <SolidColorBrush x:Key="SemiColorFill0" Color="#FF2E3238" Opacity="0.05"></SolidColorBrush>
-    <SolidColorBrush x:Key="SemiColorFill1" Color="#FF2E3238" Opacity="0.09"></SolidColorBrush>
-    <SolidColorBrush x:Key="SemiColorFill2" Color="#FF2E3238" Opacity="0.13"></SolidColorBrush>
-    
-    <!-- Border -->
-    <SolidColorBrush x:Key="SemiColorBorder" Color="#FF1C1F23" Opacity="0.08"></SolidColorBrush>
-    
-    <!-- Disabled -->
-    <SolidColorBrush x:Key="SemiColorDisabledText" Color="#FF1C1F23" Opacity="0.35"></SolidColorBrush>
-    <SolidColorBrush x:Key="SemiColorDisabledBorder" Color="#FFE6E8EA"></SolidColorBrush>
-    <SolidColorBrush x:Key="SemiColorDisabledBackground" Color="#FFE6E8EA"></SolidColorBrush>
-    <SolidColorBrush x:Key="SemiColorDisabledFill" Color="#FF2E3238" Opacity="0.04"></SolidColorBrush>
+
+    <!--  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>