Semi.Avalonia/demo/Semi.Avalonia.Demo/Controls/FunctionalColorGroupControl.axaml

<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"
    x:CompileBindings="True"
    x:DataType="viewModels:FunctionalColorGroupViewModel">
    <!--  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" ItemsSource="{TemplateBinding LightColors}">
                                <DataGrid.Columns>
                                    <DataGridTemplateColumn Width="70" Header="Color">
                                        <DataGridTemplateColumn.CellTemplate>
                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                <controls:ColorItemControl
                                                    Width="40"
                                                    Height="20"
                                                    Background="{Binding Brush}"
                                                    CornerRadius="3" />
                                            </DataTemplate>
                                        </DataGridTemplateColumn.CellTemplate>
                                    </DataGridTemplateColumn>
                                    <DataGridTemplateColumn Width="*" Header="ResourceKey">
                                        <DataGridTemplateColumn.CellTemplate>
                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                <SelectableTextBlock
                                                    Margin="12,0,12,0"
                                                    VerticalAlignment="Center"
                                                    Text="{Binding ResourceKey}" />
                                            </DataTemplate>
                                        </DataGridTemplateColumn.CellTemplate>
                                    </DataGridTemplateColumn>
                                    <DataGridTextColumn
                                        Width="*"
                                        x:DataType="viewModels:ColorItemViewModel"
                                        Binding="{Binding ColorDisplayName}"
                                        CanUserSort="False"
                                        Header="Name" />
                                    <DataGridTemplateColumn Width="100" Header="Hex">
                                        <DataGridTemplateColumn.CellTemplate>
                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                <SelectableTextBlock
                                                    Margin="12,0,12,0"
                                                    VerticalAlignment="Center"
                                                    Text="{Binding Hex}" />
                                            </DataTemplate>
                                        </DataGridTemplateColumn.CellTemplate>
                                    </DataGridTemplateColumn>
                                    <DataGridTemplateColumn Width="80" Header="Opacity">
                                        <DataGridTemplateColumn.CellTemplate>
                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                <SelectableTextBlock
                                                    Margin="12,0,12,0"
                                                    HorizontalAlignment="Right"
                                                    VerticalAlignment="Center"
                                                    Text="{Binding Brush.Opacity}" />
                                            </DataTemplate>
                                        </DataGridTemplateColumn.CellTemplate>
                                    </DataGridTemplateColumn>
                                </DataGrid.Columns>
                            </DataGrid>
                        </TabItem>
                        <TabItem Header="Dark">
                            <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding DarkColors}">
                                <DataGrid.Columns>
                                    <DataGridTemplateColumn Width="70" Header="Color">
                                        <DataGridTemplateColumn.CellTemplate>
                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                <controls:ColorItemControl
                                                    Width="40"
                                                    Height="20"
                                                    Background="{Binding Brush}"
                                                    CornerRadius="3" />
                                            </DataTemplate>
                                        </DataGridTemplateColumn.CellTemplate>
                                    </DataGridTemplateColumn>
                                    <DataGridTemplateColumn Width="*" Header="ResourceKey">
                                        <DataGridTemplateColumn.CellTemplate>
                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                <SelectableTextBlock
                                                    Margin="12,0,12,0"
                                                    VerticalAlignment="Center"
                                                    Text="{Binding ResourceKey}" />
                                            </DataTemplate>
                                        </DataGridTemplateColumn.CellTemplate>
                                    </DataGridTemplateColumn>
                                    <DataGridTextColumn
                                        Width="*"
                                        x:DataType="viewModels:ColorItemViewModel"
                                        Binding="{Binding ColorDisplayName}"
                                        CanUserSort="False"
                                        Header="Name" />
                                    <DataGridTemplateColumn Width="100" Header="Hex">
                                        <DataGridTemplateColumn.CellTemplate>
                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                <SelectableTextBlock
                                                    Margin="12,0,12,0"
                                                    VerticalAlignment="Center"
                                                    Text="{Binding Hex}" />
                                            </DataTemplate>
                                        </DataGridTemplateColumn.CellTemplate>
                                    </DataGridTemplateColumn>
                                    <DataGridTemplateColumn Width="80" Header="Opacity">
                                        <DataGridTemplateColumn.CellTemplate>
                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                <SelectableTextBlock
                                                    Margin="12,0,12,0"
                                                    HorizontalAlignment="Right"
                                                    VerticalAlignment="Center"
                                                    Text="{Binding Brush.Opacity}" />
                                            </DataTemplate>
                                        </DataGridTemplateColumn.CellTemplate>
                                    </DataGridTemplateColumn>
                                </DataGrid.Columns>
                            </DataGrid>
                        </TabItem>
                    </TabControl>
                </Grid>
            </ControlTemplate>
        </Setter>
    </ControlTheme>
</ResourceDictionary>