Change Combobox design

Adjust Colors

Author: onesounds

Flow.Launcher/Resources/CustomControlTemplate.xaml

@@ -755,25 +755,41 @@
                 <ControlTemplate TargetType="ComboBoxItem">
                     <Border
                         x:Name="LayoutRoot"
+                        Margin="0 2 0 2"
                         Background="{TemplateBinding Background}"
                         BorderBrush="{TemplateBinding BorderBrush}"
                         BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="4"
                         SnapsToDevicePixels="True">
-                        <ContentPresenter
-                            x:Name="ContentPresenter"
-                            Margin="{TemplateBinding Padding}"
-                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
-                            TextElement.Foreground="{TemplateBinding Foreground}" />
+                        <Grid>
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="Auto" />
+                                <ColumnDefinition />
+                            </Grid.ColumnDefinitions>
+                            <Border
+                                x:Name="ComboBullet"
+                                Grid.Column="0"
+                                Width="3"
+                                Height="14"
+                                Background="Transparent"
+                                CornerRadius="2" />
+                            <ContentPresenter
+                                x:Name="ContentPresenter"
+                                Grid.Column="1"
+                                Margin="{TemplateBinding Padding}"
+                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
+                                TextElement.Foreground="{TemplateBinding Foreground}" />
+                        </Grid>
                     </Border>
                     <ControlTemplate.Triggers>
                         <MultiTrigger>
                             <MultiTrigger.Conditions>
                                 <Condition Property="IsSelected" Value="False" />
                                 <Condition Property="IsMouseOver" Value="True" />
                             </MultiTrigger.Conditions>
-                            <Setter TargetName="LayoutRoot" Property="Background" Value="{DynamicResource ComboBoxItemBackgroundPointerOver}" />
+                            <Setter TargetName="LayoutRoot" Property="Background" Value="{DynamicResource CustomComboItemHoverBG}" />
                             <Setter TargetName="LayoutRoot" Property="BorderBrush" Value="{DynamicResource ComboBoxItemBorderBrushPointerOver}" />
                             <Setter TargetName="ContentPresenter" Property="TextElement.Foreground" Value="{DynamicResource ComboBoxItemForegroundPointerOver}" />
                         </MultiTrigger>
@@ -792,7 +808,8 @@
                                 <Condition Property="IsSelected" Value="True" />
                                 <Condition Property="IsFocused" Value="True" />
                             </MultiTrigger.Conditions>
-                            <Setter TargetName="LayoutRoot" Property="Background" Value="{DynamicResource ComboBoxItemBackgroundSelected}" />
+                            <Setter TargetName="ComboBullet" Property="Background" Value="{StaticResource SystemControlBackgroundAccentBrush}" />
+                            <Setter TargetName="LayoutRoot" Property="Background" Value="{DynamicResource CustomComboItemHoverBG}" />
                             <Setter TargetName="LayoutRoot" Property="BorderBrush" Value="{DynamicResource ComboBoxItemBorderBrushSelected}" />
                             <Setter TargetName="ContentPresenter" Property="TextElement.Foreground" Value="{DynamicResource ComboBoxItemForegroundSelected}" />
                         </MultiTrigger>
@@ -802,7 +819,8 @@
                                 <Condition Property="IsSelected" Value="True" />
                                 <Condition Property="IsFocused" Value="False" />
                             </MultiTrigger.Conditions>
-                            <Setter TargetName="LayoutRoot" Property="Background" Value="{DynamicResource ComboBoxItemBackgroundSelectedUnfocused}" />
+                            <Setter TargetName="ComboBullet" Property="Background" Value="{StaticResource SystemControlBackgroundAccentBrush}" />
+                            <Setter TargetName="LayoutRoot" Property="Background" Value="{DynamicResource CustomComboItemHoverBG}" />
                             <Setter TargetName="LayoutRoot" Property="BorderBrush" Value="{DynamicResource ComboBoxItemBorderBrushSelectedUnfocused}" />
                             <Setter TargetName="ContentPresenter" Property="TextElement.Foreground" Value="{DynamicResource ComboBoxItemForegroundSelectedUnfocused}" />
                         </MultiTrigger>
@@ -822,7 +840,7 @@
                                 <Condition Property="IsSelected" Value="True" />
                                 <Condition Property="IsMouseOver" Value="True" />
                             </MultiTrigger.Conditions>
-                            <Setter TargetName="LayoutRoot" Property="Background" Value="{DynamicResource ComboBoxItemBackgroundSelectedPointerOver}" />
+                            <Setter TargetName="LayoutRoot" Property="Background" Value="{DynamicResource CustomComboItemSelectedHoverBG}" />
                             <Setter TargetName="LayoutRoot" Property="BorderBrush" Value="{DynamicResource ComboBoxItemBorderBrushSelectedPointerOver}" />
                             <Setter TargetName="ContentPresenter" Property="TextElement.Foreground" Value="{DynamicResource ComboBoxItemForegroundSelectedPointerOver}" />
                         </MultiTrigger>
@@ -1124,10 +1142,10 @@
                                 <Border
                                     x:Name="PopupBorder"
                                     HorizontalAlignment="Stretch"
-                                    Background="{DynamicResource PopUpBorderBG}"
-                                    CornerRadius="{DynamicResource OverlayCornerRadius}">
+                                    Background="{DynamicResource CustomPopUpBorderBG}"
+                                    CornerRadius="5">
                                     <Border
-                                        Padding="{DynamicResource ComboBoxDropdownBorderPadding}"
+                                        Padding="5"
                                         BorderBrush="{DynamicResource CustomComboBorder}"
                                         BorderThickness="{DynamicResource ComboBoxDropdownBorderThickness}"
                                         CornerRadius="{Binding ElementName=PopupBorder, Path=CornerRadius}">
@@ -1138,7 +1156,7 @@
                                             IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                                             VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
                                             <ItemsPresenter
-                                                Margin="{DynamicResource ComboBoxDropdownContentMargin}"
+                                                Margin="0"
                                                 KeyboardNavigation.DirectionalNavigation="Contained"
                                                 SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                                         </ScrollViewer>

Flow.Launcher/Resources/Dark.xaml

@@ -20,6 +20,7 @@
     <SolidColorBrush x:Key="ClockDateForeground" Color="#26FFFFFF" />
     <Color x:Key="ItemSelectedBackgroundColorBrush">#198F8F8F</Color>
 
+    <SolidColorBrush x:Key="BasicSystemAccentColor" Color="{m:DynamicColor SystemAccentColorLight1}" />
 
     <SolidColorBrush x:Key="Color00B" Color="#2b2b2b" />
     <SolidColorBrush x:Key="Color01B" Color="#202020" />
@@ -159,9 +160,14 @@
     <m:StaticResource x:Key="CustomComboOutline" ResourceKey="Color13B" />
     <m:StaticResource x:Key="CustomComboInline" ResourceKey="Color21B" />
     <m:StaticResource x:Key="PopUpBorderBG" ResourceKey="Color07B" />
+    <SolidColorBrush x:Key="CustomPopUpBorderBG" Color="#373737" />
     <SolidColorBrush x:Key="CustomComboBorder" Color="#3f3f3f" />
     <m:StaticResource x:Key="CustomComboHoverBG" ResourceKey="Color22B" />
     <m:StaticResource x:Key="CustomComboPressedBG" ResourceKey="Color23B" />
+
+    <SolidColorBrush x:Key="CustomComboItemHoverBG" Color="#4E4E4E" />
+    <SolidColorBrush x:Key="CustomComboItemSelectedHoverBG" Color="#484848" />
+
     <m:StaticResource x:Key="CustomComboPressedOutLine" ResourceKey="Color19B" />
     <m:StaticResource x:Key="CustomComboPressedText" ResourceKey="Color08B" />
     <m:StaticResource x:Key="CustomComboDisabledBG" ResourceKey="Color07B" />
@@ -172,7 +178,7 @@
 
     <Thickness x:Key="CustomComboOutlineThickness">1,1,1,1</Thickness>
     <Thickness x:Key="CustomComboInlineThickness">0,0,0,0</Thickness>
-    <Thickness x:Key="PressedCustomComboOutlineThickness">1,1,1,0</Thickness>
+    <Thickness x:Key="PressedCustomComboOutlineThickness">1,1,1,1</Thickness>
     <Thickness x:Key="DisabledCustomComboOutlineThickness">1,1,1,1</Thickness>
 
 

Flow.Launcher/Resources/Light.xaml

@@ -20,6 +20,8 @@
     <SolidColorBrush x:Key="ClockDateForeground" Color="#44000000" />
     <Color x:Key="ItemSelectedBackgroundColorBrush">#7EFFFFFF</Color>
 
+    <SolidColorBrush x:Key="BasicSystemAccentColor" Color="{m:DynamicColor SystemAccentColor}" />
+
     <SolidColorBrush x:Key="Color00B" Color="#CEFAFAFA" />
     <SolidColorBrush x:Key="Color01B" Color="#f3f3f3" />
     <SolidColorBrush x:Key="Color02B" Color="#ffffff" />
@@ -153,12 +155,17 @@
     <m:StaticResource x:Key="CustomComboOutline" ResourceKey="Color13B" />
     <m:StaticResource x:Key="CustomComboInline" ResourceKey="Color21B" />
     <m:StaticResource x:Key="PopUpBorderBG" ResourceKey="Color07B" />
+    <SolidColorBrush x:Key="CustomPopUpBorderBG" Color="#f6f6f6" />
     <SolidColorBrush
         x:Key="CustomComboBorder"
         Opacity="0.14"
         Color="#000000" />
     <m:StaticResource x:Key="CustomComboHoverBG" ResourceKey="Color07B" />
     <m:StaticResource x:Key="CustomComboPressedBG" ResourceKey="Color07B" />
+
+    <SolidColorBrush x:Key="CustomComboItemHoverBG" Color="#E5E5E5" />
+    <SolidColorBrush x:Key="CustomComboItemSelectedHoverBG" Color="#D9D9D9" />
+
     <m:StaticResource x:Key="CustomComboPressedOutLine" ResourceKey="Color13B" />
     <m:StaticResource x:Key="CustomComboPressedText" ResourceKey="Color08B" />
     <m:StaticResource x:Key="CustomComboDisabledBG" ResourceKey="Color07B" />

Flow.Launcher/SettingPages/Views/SettingsPaneGeneral.xaml

@@ -194,6 +194,7 @@
 
                 <cc:Card Title="{DynamicResource lastQueryMode}" Sub="{DynamicResource lastQueryModeToolTip}">
                     <ComboBox
+                        MinWidth="210"
                         DisplayMemberPath="Display"
                         ItemsSource="{Binding LastQueryModes}"
                         SelectedValue="{Binding Settings.LastQueryMode}"

Flow.Launcher/Themes/Win11Light.xaml

@@ -31,7 +31,7 @@
         <Setter Property="Width" Value="4" />
         <Setter Property="Height" Value="38" />
         <Setter Property="CornerRadius" Value="2" />
-        <Setter Property="Background" Value="{StaticResource SystemAccentColorLight1Brush}" />
+        <Setter Property="Background" Value="{DynamicResource BasicSystemAccentColor}" />
     </Style>
     <Style
         x:Key="ItemGlyph"