From 1c1979ee6f4ef00a34a8e7dcf0505433fc7044a1 Mon Sep 17 00:00:00 2001
From: Yusyuriv <Yusyuriv@users.noreply.github.com>
Date: Fri, 17 May 2024 00:34:23 +0600
Subject: [PATCH] Cleanup SettingsPaneTheme, use custom components in it

---
 .../SettingPages/Views/SettingsPaneTheme.xaml | 1026 ++++++-----------
 .../Views/SettingsPaneTheme.xaml.cs           |    6 -
 2 files changed, 383 insertions(+), 649 deletions(-)

diff --git a/Flow.Launcher/SettingPages/Views/SettingsPaneTheme.xaml b/Flow.Launcher/SettingPages/Views/SettingsPaneTheme.xaml
index 8ba4d665c..097f7cea6 100644
--- a/Flow.Launcher/SettingPages/Views/SettingsPaneTheme.xaml
+++ b/Flow.Launcher/SettingPages/Views/SettingsPaneTheme.xaml
@@ -9,6 +9,7 @@
     xmlns:ui="http://schemas.modernwpf.com/2019"
     xmlns:userSettings="clr-namespace:Flow.Launcher.Infrastructure.UserSettings;assembly=Flow.Launcher.Infrastructure"
     xmlns:viewModels="clr-namespace:Flow.Launcher.SettingPages.ViewModels"
+    xmlns:ext="clr-namespace:Flow.Launcher.Resources.MarkupExtensions"
     Title="Theme"
     d:DataContext="{d:DesignInstance viewModels:SettingsPaneThemeViewModel}"
     d:DesignHeight="450"
@@ -24,33 +25,27 @@
         </ResourceDictionary>
     </ui:Page.Resources>
     <ScrollViewer
-        Margin="0,0,0,0"
-        Padding="6,0,24,0"
+        Padding="6 0 24 0"
         CanContentScroll="True"
         FontSize="14"
         VirtualizingStackPanel.IsVirtualizing="True"
         VirtualizingStackPanel.ScrollUnit="Pixel">
-        <Grid Margin="0,0,0,0">
-            <Grid.RowDefinitions>
-                <RowDefinition Height="0" />
-                <RowDefinition Height="350" />
-                <RowDefinition />
-                <RowDefinition />
-                <RowDefinition Height="*" />
-            </Grid.RowDefinitions>
-            <Border Grid.Row="0" Padding="5,18,0,0">
-                <TextBlock
-                    Margin="0,5,0,5"
-                    FontSize="30"
-                    Style="{StaticResource PageTitle}"
-                    Text="{DynamicResource appearance}"
-                    TextAlignment="left" />
-            </Border>
+        <StackPanel>
+            <!-- Page title -->
+            <TextBlock
+                Margin="5 23 0 5"
+                FontSize="30"
+                Style="{StaticResource PageTitle}"
+                Text="{DynamicResource appearance}"
+                TextAlignment="left"
+                Visibility="Collapsed" />
 
+            <!-- Theme preview -->
             <StackPanel
-                Grid.Row="1"
+                Height="350"
                 Margin="0"
-                Background="{Binding PreviewBackground}">
+                Background="{Binding PreviewBackground}"
+                IsHitTestVisible="False">
                 <StackPanel
                     Margin="0,30,0,0"
                     HorizontalAlignment="Center"
@@ -72,29 +67,29 @@
                             </Border.Clip>
                             <Grid>
                                 <Grid.RowDefinitions>
-                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition />
                                     <RowDefinition />
                                     <RowDefinition />
                                 </Grid.RowDefinitions>
-                                <Border Grid.Row="0">
-                                    <TextBox
-                                        x:Name="QueryTextBox"
-                                        IsHitTestVisible="False"
-                                        IsReadOnly="True"
-                                        Style="{DynamicResource QueryBoxStyle}"
-                                        Text="{DynamicResource hiThere}" />
-                                </Border>
-                                <StackPanel
-                                    x:Name="ClockPanel"
+                                <!-- Query TextBox -->
+                                <TextBox
+                                    x:Name="QueryTextBox"
+                                    Grid.Row="0"
+                                    IsReadOnly="True"
+                                    Style="{DynamicResource QueryBoxStyle}"
+                                    Text="{DynamicResource hiThere}" />
+                                <!-- Clock panel -->
+                                <StackPanel
                                     Grid.Row="0"
-                                    IsHitTestVisible="False"
                                     Style="{DynamicResource ClockPanel}"
                                     Visibility="Visible">
+                                    <!-- Clock TextBox -->
                                     <TextBlock
                                         x:Name="ClockBox"
                                         Style="{DynamicResource ClockBox}"
                                         Text="{Binding ClockText}"
                                         Visibility="{Binding Settings.UseClock, Converter={StaticResource BoolToVisibilityConverter}}" />
+                                    <!-- Date TextBox -->
                                     <TextBlock
                                         x:Name="DateBox"
                                         Style="{DynamicResource DateBox}"
@@ -109,20 +104,17 @@
                                         Style="{DynamicResource SearchIconStyle}" />
                                 </Canvas>
 
-                                <Border Grid.Row="1" Margin="0,0,0,0">
-                                    <Rectangle
-                                        Width="Auto"
-                                        HorizontalAlignment="Stretch"
-                                        Style="{DynamicResource SeparatorStyle}"
-                                        Visibility="Visible" />
-                                </Border>
+                                <Rectangle
+                                    Grid.Row="1"
+                                    Width="Auto"
+                                    HorizontalAlignment="Stretch"
+                                    Style="{DynamicResource SeparatorStyle}"
+                                    Visibility="Visible" />
 
-                                <ContentControl Grid.Row="2">
-                                    <flowlauncher:ResultListBox
-                                        DataContext="{Binding PreviewResults, Mode=OneTime}"
-                                        IsHitTestVisible="False"
-                                        Visibility="Visible" />
-                                </ContentControl>
+                                <flowlauncher:ResultListBox
+                                    Grid.Row="2"
+                                    DataContext="{Binding PreviewResults, Mode=OneTime}"
+                                    Visibility="Visible" />
 
                             </Grid>
                         </Border>
@@ -130,622 +122,370 @@
                 </StackPanel>
             </StackPanel>
 
-            <StackPanel Grid.Row="2" VerticalAlignment="Top">
+            <!-- Drop shadow effect -->
+            <cc:Card
+                Icon="&#xeb91;"
+                Title="{DynamicResource queryWindowShadowEffect}"
+                Sub="{DynamicResource shadowEffectCPUUsage}"
+                Margin="0 4 0 0">
+                <ui:ToggleSwitch
+                    IsOn="{Binding DropShadowEffect}"
+                    OffContent="{DynamicResource disable}"
+                    OnContent="{DynamicResource enable}" />
+            </cc:Card>
 
-                <cc:Card
-                    Title="{DynamicResource queryWindowShadowEffect}"
-                    Margin="0,4,0,0"
-                    Icon="&#xeb91;"
-                    Sub="{DynamicResource shadowEffectCPUUsage}">
+            <!-- Window width size -->
+            <cc:Card
+                Title="{DynamicResource windowWidthSize}"
+                Icon="&#xe740;"
+                Sub="{DynamicResource windowWidthSizeToolTip}">
+                <StackPanel Orientation="Horizontal">
+                    <TextBlock
+                        Width="Auto"
+                        Margin="0 0 8 2"
+                        VerticalAlignment="Center"
+                        Foreground="{DynamicResource Color05B}"
+                        Text="{Binding WindowWidthSize}"
+                        TextAlignment="Right" />
+                    <Slider
+                        Width="250"
+                        VerticalAlignment="Center"
+                        IsMoveToPointEnabled="True"
+                        IsSnapToTickEnabled="True"
+                        Maximum="1920"
+                        Minimum="400"
+                        TickFrequency="10"
+                        Value="{Binding WindowWidthSize}" />
+                </StackPanel>
+            </cc:Card>
+
+            <!-- Theme -->
+            <Border
+                Height="64"
+                Margin="0 8 0 0"
+                CornerRadius="5 5 0 0"
+                Style="{DynamicResource SettingGroupBox}">
+                <ItemsControl Style="{StaticResource SettingGrid}">
+                    <StackPanel Style="{StaticResource TextPanel}">
+                        <TextBlock Style="{DynamicResource SettingTitleLabel}" Text="{DynamicResource theme}" />
+                    </StackPanel>
+                    <TextBlock Style="{StaticResource Glyph}">
+                        &#xe790;
+                    </TextBlock>
+                </ItemsControl>
+            </Border>
+
+            <Border
+                Margin="0"
+                Padding="0"
+                HorizontalAlignment="Stretch"
+                BorderThickness="1 0 1 1"
+                CornerRadius="0 0 5 5"
+                Style="{DynamicResource SettingGroupBox}">
+                <ListBox
+                    Margin="12"
+                    HorizontalAlignment="Center"
+                    HorizontalContentAlignment="Center"
+                    ui:ScrollViewerHelper.AutoHideScrollBars="True"
+                    Background="#ffffff"
+                    ItemsSource="{Binding Themes}"
+                    ScrollViewer.HorizontalScrollBarVisibility="Disabled"
+                    ScrollViewer.VerticalScrollBarVisibility="Disabled"
+                    SelectedItem="{Binding SelectedTheme}">
+                    <ListBox.ItemContainerStyle>
+                        <Style TargetType="ListBoxItem">
+                            <Setter Property="Background" Value="Transparent" />
+                            <Setter Property="HorizontalContentAlignment"
+                                    Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
+                            <Setter Property="VerticalContentAlignment"
+                                    Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
+                            <Setter Property="Padding" Value="0" />
+                            <Setter Property="Margin" Value="4" />
+                            <Setter Property="Template">
+                                <Setter.Value>
+                                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
+                                        <Border
+                                            x:Name="Bd"
+                                            Padding="{TemplateBinding Padding}"
+                                            Background="{DynamicResource Color12B}"
+                                            BorderBrush="{DynamicResource Color03B}"
+                                            BorderThickness="1 1 1 0"
+                                            CornerRadius="4"
+                                            SnapsToDevicePixels="true">
+                                            <Border
+                                                x:Name="Bd2"
+                                                BorderBrush="{DynamicResource Color14B}"
+                                                BorderThickness="0 0 0 2"
+                                                CornerRadius="4">
+                                                <ContentPresenter
+                                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
+                                            </Border>
+                                        </Border>
+                                        <ControlTemplate.Triggers>
+                                            <Trigger Property="IsMouseOver" Value="true">
+                                                <Setter TargetName="Bd" Property="Background"
+                                                        Value="{DynamicResource ThemeHoverButton}" />
+                                            </Trigger>
+                                            <Trigger Property="IsSelected" Value="true">
+                                                <Setter TargetName="Bd" Property="Background"
+                                                        Value="{DynamicResource ToggleSwitchFillOn}" />
+                                                <Setter TargetName="Bd2" Property="BorderThickness" Value="0" />
+                                                <Setter TargetName="Bd2" Property="TextElement.Foreground"
+                                                        Value="{DynamicResource Color02B}" />
+                                            </Trigger>
+                                        </ControlTemplate.Triggers>
+                                    </ControlTemplate>
+                                </Setter.Value>
+                            </Setter>
+                        </Style>
+                    </ListBox.ItemContainerStyle>
+                    <ListBox.Template>
+                        <!--  For Scroll Wheel inside listbox area  -->
+                        <ControlTemplate>
+                            <ItemsPresenter />
+                        </ControlTemplate>
+                    </ListBox.Template>
+                    <ListBox.ItemTemplate>
+                        <DataTemplate>
+                            <Grid
+                                Width="Auto"
+                                Height="34"
+                                Margin="0">
+                                <TextBlock
+                                    x:Name="ThemeName"
+                                    Margin="0"
+                                    Padding="14 12"
+                                    HorizontalAlignment="Center"
+                                    VerticalAlignment="Center"
+                                    Focusable="True"
+                                    FontSize="12"
+                                    Text="{Binding}"
+                                    TextWrapping="Wrap" />
+                            </Grid>
+                        </DataTemplate>
+                    </ListBox.ItemTemplate>
+                    <ListBox.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <WrapPanel />
+                        </ItemsPanelTemplate>
+                    </ListBox.ItemsPanel>
+                </ListBox>
+
+            </Border>
+
+            <cc:HyperLink
+                Margin="10"
+                HorizontalAlignment="Right"
+                Uri="{Binding LinkThemeGallery}"
+                Text="{DynamicResource browserMoreThemes}" />
+
+
+            <!-- Fonts and icons -->
+            <cc:CardGroup Margin="0 30 0 0">
+                <cc:Card Icon="&#xf6b8;" Title="{DynamicResource useGlyphUI}"
+                         Sub="{DynamicResource useGlyphUIEffect}">
                     <ui:ToggleSwitch
-                        IsOn="{Binding DropShadowEffect, Mode=TwoWay}"
+                        IsOn="{Binding UseGlyphIcons}"
                         OffContent="{DynamicResource disable}"
                         OnContent="{DynamicResource enable}" />
                 </cc:Card>
 
-                <cc:Card
-                    Title="{DynamicResource windowWidthSize}"
-                    Icon="&#xe740;"
-                    Sub="{DynamicResource windowWidthSizeToolTip}">
+                <cc:Card Icon="&#xe990;" Title="{DynamicResource queryBoxFont}">
+                    <StackPanel Orientation="Horizontal">
+                        <ComboBox
+                            Width="180"
+                            IsSynchronizedWithCurrentItem="False"
+                            ItemsSource="{Binding Source={StaticResource SortedFonts}}"
+                            SelectedItem="{Binding SelectedQueryBoxFont}" />
+                        <ComboBox
+                            Width="130"
+                            Margin="10 0 0 0"
+                            ItemsSource="{Binding SelectedQueryBoxFont.FamilyTypefaces}"
+                            SelectedItem="{Binding SelectedQueryBoxFontFaces}">
+                            <ComboBox.ItemTemplate>
+                                <DataTemplate>
+                                    <ItemsControl ItemsSource="{Binding AdjustedFaceNames}">
+                                        <ItemsControl.ItemTemplate>
+                                            <DataTemplate>
+                                                <TextBlock Text="{Binding Value}" />
+                                            </DataTemplate>
+                                        </ItemsControl.ItemTemplate>
+                                    </ItemsControl>
+                                </DataTemplate>
+                            </ComboBox.ItemTemplate>
+                        </ComboBox>
+                    </StackPanel>
+                </cc:Card>
+
+                <cc:Card Icon="&#xe8fd;" Title="{DynamicResource resultItemFont}">
+                    <StackPanel Orientation="Horizontal">
+                        <ComboBox
+                            Width="180"
+                            IsSynchronizedWithCurrentItem="False"
+                            ItemsSource="{Binding Source={StaticResource SortedFonts}}"
+                            SelectedItem="{Binding SelectedResultFont}" />
+                        <ComboBox
+                            Width="130"
+                            Margin="10 0 0 0"
+                            ItemsSource="{Binding SelectedResultFont.FamilyTypefaces}"
+                            SelectedItem="{Binding SelectedResultFontFaces}">
+                            <ComboBox.ItemTemplate>
+                                <DataTemplate>
+                                    <ItemsControl ItemsSource="{Binding AdjustedFaceNames}">
+                                        <ItemsControl.ItemTemplate>
+                                            <DataTemplate>
+                                                <TextBlock Text="{Binding Value}" />
+                                            </DataTemplate>
+                                        </ItemsControl.ItemTemplate>
+                                    </ItemsControl>
+                                </DataTemplate>
+                            </ComboBox.ItemTemplate>
+                        </ComboBox>
+                    </StackPanel>
+                </cc:Card>
+            </cc:CardGroup>
+
+            <!-- Time and date -->
+            <cc:CardGroup Margin="0 24 0 0">
+                <cc:Card Icon="&#xec92;" Title="{DynamicResource Clock}">
                     <StackPanel Orientation="Horizontal">
                         <TextBlock
-                            Width="Auto"
-                            Margin="0,0,8,2"
                             VerticalAlignment="Center"
-                            Foreground="{DynamicResource Color05B}"
-                            Text="{Binding WindowWidthSize, Mode=TwoWay}"
-                            TextAlignment="Right" />
+                            FontSize="14"
+                            Foreground="{DynamicResource Color04B}"
+                            Text="{Binding ClockText}" />
+                        <ComboBox
+                            MinWidth="180"
+                            Margin="10 0 18 0"
+                            VerticalAlignment="Center"
+                            FontSize="14"
+                            ItemsSource="{Binding TimeFormatList}"
+                            SelectedItem="{Binding TimeFormat}" />
+                        <ui:ToggleSwitch
+                            IsOn="{Binding UseClock}"
+                            OffContent="{DynamicResource disable}"
+                            OnContent="{DynamicResource enable}" />
+                    </StackPanel>
+                </cc:Card>
+
+                <cc:Card Icon="&#xe787;" Title="{DynamicResource Date}">
+                    <StackPanel Orientation="Horizontal">
+                        <TextBlock
+                            VerticalAlignment="Center"
+                            FontSize="14"
+                            Foreground="{DynamicResource Color04B}"
+                            Text="{Binding DateText}" />
+                        <ComboBox
+                            MinWidth="180"
+                            Margin="10 0 18 0"
+                            VerticalAlignment="Center"
+                            FontSize="14"
+                            ItemsSource="{Binding DateFormatList}"
+                            SelectedItem="{Binding DateFormat}" />
+                        <ui:ToggleSwitch
+                            IsOn="{Binding UseDate}"
+                            OffContent="{DynamicResource disable}"
+                            OnContent="{DynamicResource enable}" />
+                    </StackPanel>
+                </cc:Card>
+            </cc:CardGroup>
+
+            <!-- Animation -->
+            <cc:CardGroup Margin="0 11 0 0">
+                <cc:Card
+                    Icon="&#xedb5;"
+                    Title="{DynamicResource Animation}"
+                    Sub="{DynamicResource AnimationTip}">
+                    <ui:ToggleSwitch
+                        IsOn="{Binding UseAnimation}"
+                        OffContent="{DynamicResource disable}"
+                        OnContent="{DynamicResource enable}" />
+                </cc:Card>
+                <cc:Card
+                    Icon="&#xe916;"
+                    Title="{DynamicResource AnimationSpeed}"
+                    Sub="{DynamicResource AnimationSpeedTip}"
+                    Visibility="{Binding UseAnimation, Converter={StaticResource BoolToVisibilityConverter}}">
+                    <StackPanel Orientation="Horizontal">
+                        <ComboBox
+                            MinWidth="160"
+                            VerticalAlignment="Center"
+                            DisplayMemberPath="Display"
+                            FontSize="14"
+                            ItemsSource="{Binding AnimationSpeeds}"
+                            SelectedValue="{Binding Settings.AnimationSpeed}"
+                            SelectedValuePath="Value" />
+
+                        <TextBox
+                            Margin="18 0 0 0"
+                            MinWidth="80"
+                            Text="{Binding Settings.CustomAnimationLength}"
+                            TextWrapping="NoWrap"
+                            Visibility="{ext:VisibleWhen
+                                         {Binding Settings.AnimationSpeed},
+                                         {x:Static userSettings:AnimationSpeeds.Custom}}" />
+                    </StackPanel>
+                </cc:Card>
+            </cc:CardGroup>
+
+            <!-- SFX -->
+            <cc:CardGroup Margin="0 11 0 0">
+                <cc:Card Icon="&#xe7f5;" Title="{DynamicResource SoundEffect}"
+                         Sub="{DynamicResource SoundEffectTip}">
+                    <ui:ToggleSwitch
+                        IsOn="{Binding UseSound}"
+                        OffContent="{DynamicResource disable}"
+                        OnContent="{DynamicResource enable}" />
+                </cc:Card>
+                <cc:Card Icon="&#xe994;" Title="{DynamicResource SoundEffectVolume}"
+                         Sub="{DynamicResource SoundEffectVolumeTip}"
+                         Visibility="{Binding UseSound, Converter={StaticResource BoolToVisibilityConverter}}">
+                    <StackPanel Orientation="Horizontal">
+                        <TextBlock
+                            Margin="0 0 8 0"
+                            VerticalAlignment="Center"
+                            Text="{Binding SoundEffectVolume}" />
+
                         <Slider
                             Width="250"
                             VerticalAlignment="Center"
                             IsMoveToPointEnabled="True"
                             IsSnapToTickEnabled="True"
-                            Maximum="1920"
-                            Minimum="400"
-                            TickFrequency="10"
-                            Value="{Binding WindowWidthSize, Mode=TwoWay}" />
+                            Maximum="100"
+                            Minimum="0"
+                            TickFrequency="1"
+                            Value="{Binding SoundEffectVolume}" />
                     </StackPanel>
                 </cc:Card>
-            </StackPanel>
+            </cc:CardGroup>
 
-            <StackPanel Grid.Row="3">
-                <Border
-                    Height="64"
-                    Margin="0,8,0,0"
-                    CornerRadius="5 5 0 0"
-                    Style="{DynamicResource SettingGroupBox}">
-                    <ItemsControl Style="{StaticResource SettingGrid}">
-                        <StackPanel Style="{StaticResource TextPanel}">
-                            <TextBlock Style="{DynamicResource SettingTitleLabel}" Text="{DynamicResource theme}" />
-                        </StackPanel>
-                        <TextBlock Style="{StaticResource Glyph}">
-                            &#xe790;
-                        </TextBlock>
-                    </ItemsControl>
-                </Border>
-                <Border
-                    Margin="0,0,0,0"
-                    Padding="0"
-                    HorizontalAlignment="Stretch"
-                    BorderThickness="1,0,1,1"
-                    CornerRadius="0 0 5 5"
-                    Style="{DynamicResource SettingGroupBox}">
-                    <ListBox
-                        Margin="12,12,12,12"
-                        HorizontalAlignment="Center"
-                        HorizontalContentAlignment="Center"
-                        ui:ScrollViewerHelper.AutoHideScrollBars="True"
-                        Background="#ffffff"
-                        ItemsSource="{Binding Themes}"
-                        ScrollViewer.HorizontalScrollBarVisibility="Disabled"
-                        ScrollViewer.VerticalScrollBarVisibility="Disabled"
-                        SelectedItem="{Binding SelectedTheme}">
-                        <ListBox.ItemContainerStyle>
-                            <Style TargetType="ListBoxItem">
-                                <Setter Property="Background" Value="Transparent" />
-                                <Setter Property="HorizontalContentAlignment"
-                                        Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
-                                <Setter Property="VerticalContentAlignment"
-                                        Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
-                                <Setter Property="Padding" Value="0,0,0,0" />
-                                <Setter Property="Margin" Value="4" />
-                                <Setter Property="Template">
-                                    <Setter.Value>
-                                        <ControlTemplate TargetType="{x:Type ListBoxItem}">
-                                            <Border
-                                                x:Name="Bd"
-                                                Padding="{TemplateBinding Padding}"
-                                                Background="{DynamicResource Color12B}"
-                                                BorderBrush="{DynamicResource Color03B}"
-                                                BorderThickness="1,1,1,0"
-                                                CornerRadius="4"
-                                                SnapsToDevicePixels="true">
-                                                <Border
-                                                    x:Name="Bd2"
-                                                    BorderBrush="{DynamicResource Color14B}"
-                                                    BorderThickness="0,0,0,2"
-                                                    CornerRadius="4">
-                                                    <ContentPresenter
-                                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                                                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
-                                                </Border>
-                                            </Border>
-                                            <ControlTemplate.Triggers>
-                                                <Trigger Property="IsMouseOver" Value="true">
-                                                    <Setter TargetName="Bd" Property="Background"
-                                                            Value="{DynamicResource ThemeHoverButton}" />
-                                                </Trigger>
-                                                <Trigger Property="IsSelected" Value="true">
-                                                    <Setter TargetName="Bd" Property="Background"
-                                                            Value="{DynamicResource ToggleSwitchFillOn}" />
-                                                    <Setter TargetName="Bd2" Property="BorderThickness" Value="0" />
-                                                    <Setter TargetName="Bd2" Property="TextElement.Foreground"
-                                                            Value="{DynamicResource Color02B}" />
-                                                </Trigger>
-                                            </ControlTemplate.Triggers>
-                                        </ControlTemplate>
-                                    </Setter.Value>
-                                </Setter>
-                            </Style>
-                        </ListBox.ItemContainerStyle>
-                        <ListBox.Template>
-                            <!--  For Scroll Wheel inside listbox area  -->
-                            <ControlTemplate>
-                                <ItemsPresenter />
-                            </ControlTemplate>
-                        </ListBox.Template>
-                        <ListBox.ItemTemplate>
-                            <DataTemplate>
-                                <Grid
-                                    Width="Auto"
-                                    Height="34"
-                                    Margin="0,0,0,0">
-                                    <TextBlock
-                                        x:Name="ThemeName"
-                                        Margin="0"
-                                        Padding="14,12,14,12"
-                                        HorizontalAlignment="Center"
-                                        VerticalAlignment="Center"
-                                        Focusable="True"
-                                        FontSize="12"
-                                        Text="{Binding}"
-                                        TextWrapping="Wrap" />
-                                </Grid>
-                            </DataTemplate>
-                        </ListBox.ItemTemplate>
-                        <ListBox.ItemsPanel>
-                            <ItemsPanelTemplate>
-                                <WrapPanel />
-                            </ItemsPanelTemplate>
-                        </ListBox.ItemsPanel>
-                    </ListBox>
+            <!-- Settings color scheme -->
+            <cc:Card Icon="&#xe793;" Title="{DynamicResource ColorScheme}" Margin="0 11 0 0">
+                <ComboBox
+                    MinWidth="180"
+                    DisplayMemberPath="Display"
+                    FontSize="14"
+                    ItemsSource="{Binding ColorSchemes}"
+                    SelectedValue="{Binding Settings.ColorScheme}"
+                    SelectedValuePath="Value" />
+            </cc:Card>
 
-                </Border>
-                <Border>
-                    <TextBlock
-                        Margin="10"
-                        HorizontalAlignment="Right"
-                        DockPanel.Dock="Top">
-                        <Hyperlink NavigateUri="{Binding LinkThemeGallery, Mode=OneWay}"
-                                   RequestNavigate="Hyperlink_OnRequestNavigate">
-                            <Run Text="{DynamicResource browserMoreThemes}" />
-                        </Hyperlink>
-                    </TextBlock>
-                </Border>
-            </StackPanel>
+            <!-- Theme folder -->
+            <cc:Card Icon="&#xe838;" Title="{DynamicResource ThemeFolder}">
+                <Button
+                    MinWidth="180"
+                    Command="{Binding OpenThemesFolderCommand}"
+                    Content="{DynamicResource OpenThemeFolder}" />
+            </cc:Card>
 
-
-            <StackPanel
-                Grid.Row="4"
-                Margin="0,0,0,10"
-                Orientation="Vertical">
-
-                <Border
-                    Margin="0,30,0,0"
-                    Padding="0"
-                    Style="{DynamicResource SettingGroupBox}">
-                    <StackPanel Orientation="Vertical">
-                        <Border
-                            Margin="0"
-                            BorderThickness="0"
-                            Style="{DynamicResource SettingGroupBox}">
-                            <ItemsControl Style="{StaticResource SettingGrid}">
-                                <StackPanel Style="{StaticResource TextPanel}">
-                                    <TextBlock Style="{DynamicResource SettingTitleLabel}"
-                                               Text="{DynamicResource useGlyphUI}" />
-                                    <TextBlock Style="{DynamicResource SettingSubTitleLabel}"
-                                               Text="{DynamicResource useGlyphUIEffect}" />
-                                </StackPanel>
-                                <ui:ToggleSwitch
-                                    Grid.Row="0"
-                                    Grid.Column="2"
-                                    Margin="0,0,18,0"
-                                    IsOn="{Binding UseGlyphIcons, Mode=TwoWay}" />
-                                <TextBlock Style="{StaticResource Glyph}">
-                                    &#xf6b8;
-                                </TextBlock>
-                            </ItemsControl>
-                        </Border>
-                        <Separator
-                            Width="Auto"
-                            BorderThickness="1"
-                            Style="{StaticResource SettingSeparatorStyle}" />
-                        <Border
-                            Margin="0"
-                            BorderThickness="0"
-                            Style="{DynamicResource SettingGroupBox}">
-                            <ItemsControl Style="{StaticResource SettingGrid}">
-                                <TextBlock
-                                    Grid.Column="1"
-                                    VerticalAlignment="Center"
-                                    Style="{DynamicResource SettingTitleLabel}"
-                                    Text="{DynamicResource queryBoxFont}" />
-                                <StackPanel
-                                    Grid.Column="2"
-                                    Margin="0,0,20,0"
-                                    Orientation="Horizontal">
-                                    <ComboBox
-                                        Width="180"
-                                        Margin="20,0,0,0"
-                                        HorizontalAlignment="Left"
-                                        VerticalAlignment="Top"
-                                        IsSynchronizedWithCurrentItem="False"
-                                        ItemsSource="{Binding Source={StaticResource SortedFonts}}"
-                                        SelectedItem="{Binding SelectedQueryBoxFont}" />
-                                    <ComboBox
-                                        Width="130"
-                                        Margin="10,0,0,0"
-                                        HorizontalAlignment="Left"
-                                        VerticalAlignment="Top"
-                                        ItemsSource="{Binding SelectedQueryBoxFont.FamilyTypefaces}"
-                                        SelectedItem="{Binding SelectedQueryBoxFontFaces}">
-                                        <ComboBox.ItemTemplate>
-                                            <DataTemplate>
-                                                <ItemsControl ItemsSource="{Binding AdjustedFaceNames}">
-                                                    <ItemsControl.ItemTemplate>
-                                                        <DataTemplate>
-                                                            <TextBlock Text="{Binding Value}" />
-                                                        </DataTemplate>
-                                                    </ItemsControl.ItemTemplate>
-                                                </ItemsControl>
-                                            </DataTemplate>
-                                        </ComboBox.ItemTemplate>
-                                    </ComboBox>
-                                </StackPanel>
-                                <TextBlock Style="{StaticResource Glyph}">
-                                    &#xe990;
-                                </TextBlock>
-                            </ItemsControl>
-                        </Border>
-                        <Separator
-                            Width="Auto"
-                            BorderThickness="1"
-                            Style="{StaticResource SettingSeparatorStyle}" />
-                        <Border
-                            Margin="0"
-                            BorderThickness="0"
-                            Style="{DynamicResource SettingGroupBox}">
-                            <ItemsControl Style="{StaticResource SettingGrid}">
-                                <TextBlock
-                                    Grid.Column="1"
-                                    VerticalAlignment="Center"
-                                    Style="{DynamicResource SettingTitleLabel}"
-                                    Text="{DynamicResource resultItemFont}" />
-                                <StackPanel
-                                    Grid.Column="2"
-                                    Margin="0,0,20,0"
-                                    Orientation="Horizontal">
-                                    <ComboBox
-                                        Width="180"
-                                        Margin="20,-2,0,0"
-                                        HorizontalAlignment="Left"
-                                        VerticalAlignment="Top"
-                                        IsSynchronizedWithCurrentItem="False"
-                                        ItemsSource="{Binding Source={StaticResource SortedFonts}}"
-                                        SelectedItem="{Binding SelectedResultFont}" />
-                                    <ComboBox
-                                        Width="130"
-                                        Margin="10,-2,0,0"
-                                        HorizontalAlignment="Left"
-                                        VerticalAlignment="Top"
-                                        ItemsSource="{Binding SelectedResultFont.FamilyTypefaces}"
-                                        SelectedItem="{Binding SelectedResultFontFaces}">
-                                        <ComboBox.ItemTemplate>
-                                            <DataTemplate>
-                                                <ItemsControl ItemsSource="{Binding AdjustedFaceNames}">
-                                                    <ItemsControl.ItemTemplate>
-                                                        <DataTemplate>
-                                                            <TextBlock Text="{Binding Value}" />
-                                                        </DataTemplate>
-                                                    </ItemsControl.ItemTemplate>
-                                                </ItemsControl>
-                                            </DataTemplate>
-                                        </ComboBox.ItemTemplate>
-                                    </ComboBox>
-                                </StackPanel>
-                                <TextBlock Style="{StaticResource Glyph}">
-                                    &#xe8fd;
-                                </TextBlock>
-                            </ItemsControl>
-                        </Border>
-                    </StackPanel>
-                </Border>
-
-                <StackPanel>
-
-                    <Border
-                        Margin="0,24,0,12"
-                        Padding="0"
-                        Style="{DynamicResource SettingGroupBox}">
-                        <StackPanel Orientation="Vertical">
-                            <Border
-                                Margin="0"
-                                BorderThickness="0"
-                                Style="{DynamicResource SettingGroupBox}">
-                                <ItemsControl Style="{StaticResource SettingGrid}">
-                                    <StackPanel Style="{StaticResource TextPanel}">
-                                        <TextBlock Style="{DynamicResource SettingTitleLabel}"
-                                                   Text="{DynamicResource Clock}" />
-                                    </StackPanel>
-                                    <StackPanel
-                                        Grid.Row="0"
-                                        Grid.Column="2"
-                                        Orientation="Horizontal">
-                                        <TextBlock
-                                            Margin="0,0,10,0"
-                                            VerticalAlignment="Center"
-                                            FontSize="14"
-                                            Foreground="{DynamicResource Color04B}"
-                                            Text="{Binding ClockText}" />
-                                        <ComboBox
-                                            MinWidth="180"
-                                            Margin="0,0,18,0"
-                                            VerticalAlignment="Center"
-                                            FontSize="14"
-                                            ItemsSource="{Binding TimeFormatList}"
-                                            SelectedItem="{Binding TimeFormat}" />
-                                        <ui:ToggleSwitch
-                                            Margin="0,0,18,0"
-                                            IsOn="{Binding UseClock, Mode=TwoWay}"
-                                            OffContent="{DynamicResource disable}"
-                                            OnContent="{DynamicResource enable}" />
-                                    </StackPanel>
-                                    <TextBlock Style="{StaticResource Glyph}">
-                                        &#xec92;
-                                    </TextBlock>
-                                </ItemsControl>
-                            </Border>
-                            <Separator
-                                Width="Auto"
-                                BorderThickness="1"
-                                Style="{StaticResource SettingSeparatorStyle}" />
-                            <Border
-                                Margin="0"
-                                BorderThickness="0"
-                                Style="{DynamicResource SettingGroupBox}">
-                                <ItemsControl Style="{StaticResource SettingGrid}">
-                                    <StackPanel Style="{StaticResource TextPanel}">
-                                        <TextBlock Style="{DynamicResource SettingTitleLabel}"
-                                                   Text="{DynamicResource Date}" />
-                                    </StackPanel>
-                                    <StackPanel
-                                        Grid.Row="0"
-                                        Grid.Column="2"
-                                        Orientation="Horizontal">
-                                        <TextBlock
-                                            Margin="0,0,10,0"
-                                            VerticalAlignment="Center"
-                                            FontSize="14"
-                                            Foreground="{DynamicResource Color04B}"
-                                            Text="{Binding DateText}" />
-                                        <ComboBox
-                                            MinWidth="180"
-                                            Margin="0,0,18,0"
-                                            VerticalAlignment="Center"
-                                            FontSize="14"
-                                            ItemsSource="{Binding DateFormatList}"
-                                            SelectedItem="{Binding DateFormat}" />
-                                        <ui:ToggleSwitch
-                                            Margin="0,0,18,0"
-                                            IsOn="{Binding UseDate, Mode=TwoWay}"
-                                            OffContent="{DynamicResource disable}"
-                                            OnContent="{DynamicResource enable}" />
-                                    </StackPanel>
-                                    <TextBlock Style="{StaticResource Glyph}">
-                                        &#xe787;
-                                    </TextBlock>
-                                </ItemsControl>
-                            </Border>
-                        </StackPanel>
-                    </Border>
-
-                    <Border
-                        Margin="0,12,0,12"
-                        Padding="0"
-                        Style="{DynamicResource SettingGroupBox}">
-                        <StackPanel Orientation="Vertical">
-                            <Border
-                                Margin="0"
-                                BorderThickness="0"
-                                Style="{DynamicResource SettingGroupBox}">
-                                <ItemsControl Style="{StaticResource SettingGrid}">
-                                    <StackPanel Style="{StaticResource TextPanel}">
-                                        <TextBlock Style="{DynamicResource SettingTitleLabel}"
-                                                   Text="{DynamicResource Animation}" />
-                                        <TextBlock Style="{DynamicResource SettingSubTitleLabel}"
-                                                   Text="{DynamicResource AnimationTip}" />
-                                    </StackPanel>
-                                    <ui:ToggleSwitch
-                                        x:Name="Animation"
-                                        Grid.Row="0"
-                                        Grid.Column="2"
-                                        Margin="0,0,18,0"
-                                        IsOn="{Binding UseAnimation, Mode=TwoWay}"
-                                        OffContent="{DynamicResource disable}"
-                                        OnContent="{DynamicResource enable}" />
-                                    <TextBlock Style="{StaticResource Glyph}">
-                                        &#xedb5;
-                                    </TextBlock>
-                                </ItemsControl>
-                            </Border>
-                            <Separator
-                                Width="Auto"
-                                BorderThickness="1"
-                                Style="{StaticResource SettingSeparatorStyle}" />
-                            <Border Margin="0" BorderThickness="0">
-                                <Border.Style>
-                                    <Style BasedOn="{StaticResource SettingGroupBox}" TargetType="Border">
-                                        <Setter Property="Visibility" Value="Collapsed" />
-                                        <Style.Triggers>
-                                            <DataTrigger Binding="{Binding ElementName=Animation, Path=IsOn}"
-                                                         Value="True">
-                                                <Setter Property="Visibility" Value="Visible" />
-                                            </DataTrigger>
-                                        </Style.Triggers>
-                                    </Style>
-                                </Border.Style>
-
-                                <ItemsControl Style="{StaticResource SettingGrid}">
-                                    <StackPanel Style="{StaticResource TextPanel}">
-                                        <TextBlock Style="{DynamicResource SettingTitleLabel}"
-                                                   Text="{DynamicResource AnimationSpeed}" />
-                                        <TextBlock Style="{DynamicResource SettingSubTitleLabel}"
-                                                   Text="{DynamicResource AnimationSpeedTip}" />
-                                    </StackPanel>
-                                    <StackPanel Grid.Column="2" Orientation="Horizontal">
-                                        <ComboBox
-                                            x:Name="AnimationSpeed"
-                                            MinWidth="160"
-                                            Margin="0,0,18,0"
-                                            VerticalAlignment="Center"
-                                            DisplayMemberPath="Display"
-                                            FontSize="14"
-                                            ItemsSource="{Binding AnimationSpeeds}"
-                                            SelectedValue="{Binding Settings.AnimationSpeed}"
-                                            SelectedValuePath="Value" />
-                                        <StackPanel Margin="0,0,18,0" Orientation="Horizontal">
-                                            <StackPanel.Style>
-                                                <Style TargetType="StackPanel">
-                                                    <Setter Property="Visibility" Value="Collapsed" />
-                                                    <Style.Triggers>
-                                                        <DataTrigger
-                                                            Binding="{Binding ElementName=AnimationSpeed, Path=SelectedValue}"
-                                                            Value="{x:Static userSettings:AnimationSpeeds.Custom}">
-                                                            <Setter Property="Visibility" Value="Visible" />
-                                                        </DataTrigger>
-                                                    </Style.Triggers>
-                                                </Style>
-                                            </StackPanel.Style>
-                                            <TextBox
-                                                Height="35"
-                                                MinWidth="80"
-                                                Text="{Binding Settings.CustomAnimationLength}"
-                                                TextWrapping="NoWrap" />
-                                        </StackPanel>
-                                    </StackPanel>
-                                    <TextBlock Style="{StaticResource Glyph}">
-                                        &#xe916;
-                                    </TextBlock>
-                                </ItemsControl>
-                            </Border>
-                        </StackPanel>
-                    </Border>
-
-                    <Border
-                        Margin="0,12,0,12"
-                        Padding="0"
-                        Style="{DynamicResource SettingGroupBox}">
-                        <StackPanel Orientation="Vertical">
-                            <Border
-                                Margin="0"
-                                BorderThickness="0"
-                                Style="{DynamicResource SettingGroupBox}">
-                                <ItemsControl Style="{StaticResource SettingGrid}">
-                                    <StackPanel Style="{StaticResource TextPanel}">
-                                        <TextBlock Style="{DynamicResource SettingTitleLabel}"
-                                                   Text="{DynamicResource SoundEffect}" />
-                                        <TextBlock Style="{DynamicResource SettingSubTitleLabel}"
-                                                   Text="{DynamicResource SoundEffectTip}" />
-                                    </StackPanel>
-                                    <ui:ToggleSwitch
-                                        x:Name="SoundEffect"
-                                        Grid.Row="0"
-                                        Grid.Column="2"
-                                        Margin="0,0,18,0"
-                                        IsOn="{Binding UseSound, Mode=TwoWay}"
-                                        OffContent="{DynamicResource disable}"
-                                        OnContent="{DynamicResource enable}" />
-                                    <TextBlock Style="{StaticResource Glyph}">
-                                        &#xe7f5;
-                                    </TextBlock>
-                                </ItemsControl>
-                            </Border>
-                            <Separator
-                                Width="Auto"
-                                BorderThickness="1"
-                                Style="{StaticResource SettingSeparatorStyle}" />
-                            <Border Margin="0" BorderThickness="0">
-                                <Border.Style>
-                                    <Style BasedOn="{StaticResource SettingGroupBox}" TargetType="Border">
-                                        <Setter Property="Visibility" Value="Collapsed" />
-                                        <Style.Triggers>
-                                            <DataTrigger Binding="{Binding ElementName=SoundEffect, Path=IsOn}"
-                                                         Value="True">
-                                                <Setter Property="Visibility" Value="Visible" />
-                                            </DataTrigger>
-                                        </Style.Triggers>
-                                    </Style>
-                                </Border.Style>
-
-                                <ItemsControl Style="{StaticResource SettingGrid}">
-                                    <StackPanel Style="{StaticResource TextPanel}">
-                                        <TextBlock Style="{DynamicResource SettingTitleLabel}"
-                                                   Text="{DynamicResource SoundEffectVolume}" />
-                                        <TextBlock Style="{DynamicResource SettingSubTitleLabel}"
-                                                   Text="{DynamicResource SoundEffectVolumeTip}" />
-                                    </StackPanel>
-                                    <StackPanel Grid.Column="2" Orientation="Horizontal">
-                                        <TextBlock
-                                            Width="Auto"
-                                            Margin="0,0,8,2"
-                                            VerticalAlignment="Center"
-                                            Foreground="{DynamicResource Color05B}"
-                                            Text="{Binding ElementName=SoundEffectValue, Path=Value, UpdateSourceTrigger=PropertyChanged}"
-                                            TextAlignment="Right" />
-                                        <Slider
-                                            Name="SoundEffectValue"
-                                            Width="250"
-                                            Margin="0,0,18,0"
-                                            VerticalAlignment="Center"
-                                            IsMoveToPointEnabled="True"
-                                            IsSnapToTickEnabled="True"
-                                            Maximum="100"
-                                            Minimum="0"
-                                            TickFrequency="1"
-                                            Value="{Binding SoundEffectVolume, Mode=TwoWay}" />
-                                    </StackPanel>
-                                    <TextBlock Style="{StaticResource Glyph}">
-                                        &#xe994;
-                                    </TextBlock>
-                                </ItemsControl>
-                            </Border>
-                        </StackPanel>
-                    </Border>
-
-                    <Border Margin="0,12,0,12" Style="{DynamicResource SettingGroupBox}">
-                        <ItemsControl Style="{StaticResource SettingGrid}">
-                            <StackPanel Style="{StaticResource TextPanel}">
-                                <TextBlock Style="{DynamicResource SettingTitleLabel}"
-                                           Text="{DynamicResource ColorScheme}" />
-                            </StackPanel>
-                            <ComboBox
-                                x:Name="ColorSchemeComboBox"
-                                Grid.Column="2"
-                                MinWidth="180"
-                                Margin="0,0,18,0"
-                                DisplayMemberPath="Display"
-                                FontSize="14"
-                                ItemsSource="{Binding ColorSchemes}"
-                                SelectedValue="{Binding Settings.ColorScheme}"
-                                SelectedValuePath="Value" />
-                            <TextBlock Style="{StaticResource Glyph}">
-                                &#xe793;
-                            </TextBlock>
-                        </ItemsControl>
-                    </Border>
-
-                    <Border Margin="0,0,0,0" Style="{DynamicResource SettingGroupBox}">
-                        <ItemsControl Style="{StaticResource SettingGrid}">
-                            <StackPanel Style="{StaticResource TextPanel}">
-                                <TextBlock Style="{DynamicResource SettingTitleLabel}"
-                                           Text="{DynamicResource ThemeFolder}" />
-                            </StackPanel>
-                            <Button
-                                Grid.Column="2"
-                                MinWidth="180"
-                                Margin="0,0,18,0"
-                                HorizontalAlignment="Center"
-                                Command="{Binding OpenThemesFolderCommand}"
-                                Content="{DynamicResource OpenThemeFolder}" />
-                            <TextBlock Style="{StaticResource Glyph}">
-                                &#xe838;
-                            </TextBlock>
-                        </ItemsControl>
-                    </Border>
-                    <Border>
-                        <TextBlock
-                            Margin="10,10,10,18"
-                            HorizontalAlignment="Right"
-                            DockPanel.Dock="Top">
-                            <Hyperlink NavigateUri="{Binding LinkHowToCreateTheme, Mode=OneWay}"
-                                       RequestNavigate="Hyperlink_OnRequestNavigate">
-                                <Run Text="{DynamicResource howToCreateTheme}" />
-                            </Hyperlink>
-                        </TextBlock>
-                    </Border>
-                </StackPanel>
-            </StackPanel>
-        </Grid>
+            <!-- How to create theme link -->
+            <cc:HyperLink
+                Margin="10 10 10 28"
+                HorizontalAlignment="Right"
+                Uri="{Binding LinkHowToCreateTheme}"
+                Text="{DynamicResource howToCreateTheme}" />
+        </StackPanel>
     </ScrollViewer>
 </ui:Page>
diff --git a/Flow.Launcher/SettingPages/Views/SettingsPaneTheme.xaml.cs b/Flow.Launcher/SettingPages/Views/SettingsPaneTheme.xaml.cs
index ca7943db1..72b2a01ca 100644
--- a/Flow.Launcher/SettingPages/Views/SettingsPaneTheme.xaml.cs
+++ b/Flow.Launcher/SettingPages/Views/SettingsPaneTheme.xaml.cs
@@ -22,10 +22,4 @@ public partial class SettingsPaneTheme : Page
 
         base.OnNavigatedTo(e);
     }
-
-    private void Hyperlink_OnRequestNavigate(object sender, RequestNavigateEventArgs e)
-    {
-        App.API.OpenUrl(e.Uri);
-        e.Handled = true;
-    }
 }