From 7f56b35d7f187cea9536ade947b6bf41a701d522 Mon Sep 17 00:00:00 2001
From: DB p <onesound@oooz.net>
Date: Wed, 23 Nov 2022 17:54:41 +0900
Subject: [PATCH] - Adjust Themes - Add Bullet Layout

---
 Flow.Launcher/MainWindow.xaml           | 119 ++++++++-------
 Flow.Launcher/ResultListBox.xaml        |  90 ++++++-----
 Flow.Launcher/Themes/Base.xaml          |  23 ++-
 Flow.Launcher/Themes/BlackAndWhite.xaml | 195 +++++++++++++++++++-----
 Flow.Launcher/Themes/Darker.xaml        | 109 ++++++++++---
 Flow.Launcher/Themes/Gray.xaml          | 127 ++++++++++-----
 Flow.Launcher/Themes/Light.xaml         |  17 ++-
 Flow.Launcher/Themes/Win11Light.xaml    |   6 +
 8 files changed, 488 insertions(+), 198 deletions(-)

diff --git a/Flow.Launcher/MainWindow.xaml b/Flow.Launcher/MainWindow.xaml
index 69e52003d..f6f52d3ef 100644
--- a/Flow.Launcher/MainWindow.xaml
+++ b/Flow.Launcher/MainWindow.xaml
@@ -184,64 +184,67 @@
         <Border MouseDown="OnMouseDown" Style="{DynamicResource WindowBorderStyle}">
             <StackPanel Orientation="Vertical">
                 <Grid>
-                    <TextBox
-                        x:Name="QueryTextSuggestionBox"
-                        IsEnabled="False"
-                        Style="{DynamicResource QuerySuggestionBoxStyle}">
-                        <TextBox.Text>
-                            <MultiBinding Converter="{StaticResource QuerySuggestionBoxConverter}">
-                                <Binding ElementName="QueryTextBox" Mode="OneTime" />
-                                <Binding ElementName="ResultListBox" Path="SelectedItem" />
-                                <Binding ElementName="QueryTextBox" Path="Text" />
-                            </MultiBinding>
-                        </TextBox.Text>
-                    </TextBox>
-                    <TextBox
-                        x:Name="QueryTextBox"
-                        AllowDrop="True"
-                        PreviewDragOver="OnPreviewDragOver"
-                        PreviewKeyUp="QueryTextBox_KeyUp"
-                        Style="{DynamicResource QueryBoxStyle}"
-                        Text="{Binding QueryText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
-                        Visibility="Visible">
-                        <TextBox.CommandBindings>
-                            <CommandBinding Command="ApplicationCommands.Copy" Executed="OnCopy" />
-                        </TextBox.CommandBindings>
-                        <TextBox.ContextMenu>
-                            <ContextMenu>
-                                <MenuItem Command="ApplicationCommands.Cut" Header="{DynamicResource cut}">
-                                    <MenuItem.Icon>
-                                        <ui:FontIcon Glyph="&#xe8c6;" />
-                                    </MenuItem.Icon>
-                                </MenuItem>
-                                <MenuItem Command="ApplicationCommands.Copy" Header="{DynamicResource copy}">
-                                    <MenuItem.Icon>
-                                        <ui:FontIcon Glyph="&#xe8c8;" />
-                                    </MenuItem.Icon>
-                                </MenuItem>
-                                <MenuItem Command="ApplicationCommands.Paste" Header="{DynamicResource paste}">
-                                    <MenuItem.Icon>
-                                        <ui:FontIcon Glyph="&#xe77f;" />
-                                    </MenuItem.Icon>
-                                </MenuItem>
-                                <Separator
-                                    Margin="0"
-                                    Padding="0,4,0,4"
-                                    Background="{DynamicResource ContextSeparator}" />
-                                <MenuItem Click="OnContextMenusForSettingsClick" Header="{DynamicResource flowlauncher_settings}">
-                                    <MenuItem.Icon>
-                                        <ui:FontIcon Glyph="&#xe713;" />
-                                    </MenuItem.Icon>
-                                </MenuItem>
-                                <MenuItem Command="{Binding EscCommand}" Header="{DynamicResource closeWindow}">
-                                    <MenuItem.Icon>
-                                        <ui:FontIcon Glyph="&#xe711;" />
-                                    </MenuItem.Icon>
-                                </MenuItem>
-                            </ContextMenu>
-                        </TextBox.ContextMenu>
-                    </TextBox>
-
+                    <Border Style="{DynamicResource QueryBoxBgStyle}">
+                        <Grid>
+                            <TextBox
+                                x:Name="QueryTextSuggestionBox"
+                                IsEnabled="False"
+                                Style="{DynamicResource QuerySuggestionBoxStyle}">
+                                <TextBox.Text>
+                                    <MultiBinding Converter="{StaticResource QuerySuggestionBoxConverter}">
+                                        <Binding ElementName="QueryTextBox" Mode="OneTime" />
+                                        <Binding ElementName="ResultListBox" Path="SelectedItem" />
+                                        <Binding ElementName="QueryTextBox" Path="Text" />
+                                    </MultiBinding>
+                                </TextBox.Text>
+                            </TextBox>
+                            <TextBox
+                                x:Name="QueryTextBox"
+                                AllowDrop="True"
+                                PreviewDragOver="OnPreviewDragOver"
+                                PreviewKeyUp="QueryTextBox_KeyUp"
+                                Style="{DynamicResource QueryBoxStyle}"
+                                Text="{Binding QueryText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
+                                Visibility="Visible">
+                                <TextBox.CommandBindings>
+                                    <CommandBinding Command="ApplicationCommands.Copy" Executed="OnCopy" />
+                                </TextBox.CommandBindings>
+                                <TextBox.ContextMenu>
+                                    <ContextMenu>
+                                        <MenuItem Command="ApplicationCommands.Cut" Header="{DynamicResource cut}">
+                                            <MenuItem.Icon>
+                                                <ui:FontIcon Glyph="&#xe8c6;" />
+                                            </MenuItem.Icon>
+                                        </MenuItem>
+                                        <MenuItem Command="ApplicationCommands.Copy" Header="{DynamicResource copy}">
+                                            <MenuItem.Icon>
+                                                <ui:FontIcon Glyph="&#xe8c8;" />
+                                            </MenuItem.Icon>
+                                        </MenuItem>
+                                        <MenuItem Command="ApplicationCommands.Paste" Header="{DynamicResource paste}">
+                                            <MenuItem.Icon>
+                                                <ui:FontIcon Glyph="&#xe77f;" />
+                                            </MenuItem.Icon>
+                                        </MenuItem>
+                                        <Separator
+                                            Margin="0"
+                                            Padding="0,4,0,4"
+                                            Background="{DynamicResource ContextSeparator}" />
+                                        <MenuItem Click="OnContextMenusForSettingsClick" Header="{DynamicResource flowlauncher_settings}">
+                                            <MenuItem.Icon>
+                                                <ui:FontIcon Glyph="&#xe713;" />
+                                            </MenuItem.Icon>
+                                        </MenuItem>
+                                        <MenuItem Command="{Binding EscCommand}" Header="{DynamicResource closeWindow}">
+                                            <MenuItem.Icon>
+                                                <ui:FontIcon Glyph="&#xe711;" />
+                                            </MenuItem.Icon>
+                                        </MenuItem>
+                                    </ContextMenu>
+                                </TextBox.ContextMenu>
+                            </TextBox>
+                        </Grid>
+                    </Border>
                     <StackPanel
                         x:Name="ClockPanel"
                         IsHitTestVisible="False"
diff --git a/Flow.Launcher/ResultListBox.xaml b/Flow.Launcher/ResultListBox.xaml
index bd6445472..a72c5478b 100644
--- a/Flow.Launcher/ResultListBox.xaml
+++ b/Flow.Launcher/ResultListBox.xaml
@@ -60,14 +60,14 @@
                         <StackPanel
                             Grid.Column="2"
                             Margin="0,0,10,0"
+                            VerticalAlignment="Center"
                             Visibility="{Binding ShowOpenResultHotkey}">
                             <TextBlock
                                 x:Name="Hotkey"
                                 Margin="12,0,12,0"
-                                Padding="0,10,0,10"
+                                Padding="0,0,0,0"
                                 HorizontalAlignment="Right"
                                 VerticalAlignment="Center"
-                                Opacity="0.8"
                                 Style="{DynamicResource ItemHotkeyStyle}">
                                 <TextBlock.Visibility>
                                     <Binding Converter="{StaticResource ResourceKey=OpenResultHotkeyVisibilityConverter}" RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=ListBoxItem}" />
@@ -80,42 +80,57 @@
                                 </TextBlock.Text>
                             </TextBlock>
                         </StackPanel>
-                        <Border
-                            Margin="9,0,0,0"
-                            BorderBrush="Transparent"
-                            BorderThickness="0">
-                            <Image
-                                x:Name="ImageIcon"
-                                Width="{Binding IconXY}"
-                                Height="{Binding IconXY}"
-                                Margin="0,0,0,0"
-                                HorizontalAlignment="Center"
-                                IsHitTestVisible="False"
-                                Source="{Binding Image, TargetNullValue={x:Null}}"
-                                Stretch="Uniform"
-                                Visibility="{Binding ShowIcon}">
-                                <Image.Clip>
-                                    <EllipseGeometry
-                                        Center="16 16"
-                                        RadiusX="{Binding IconRadius}"
-                                        RadiusY="{Binding IconRadius}" />
-                                </Image.Clip>
-                            </Image>
-                        </Border>
-                        <Border
-                            Margin="9,0,0,0"
-                            BorderBrush="Transparent"
-                            BorderThickness="0">
-                            <TextBlock
-                                x:Name="GlyphIcon"
+
+                        <Grid Grid.Column="0">
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="Auto" />
+                                <ColumnDefinition />
+                            </Grid.ColumnDefinitions>
+
+                            <Border
+                                x:Name="Bullet"
                                 Grid.Column="0"
-                                HorizontalAlignment="Center"
-                                VerticalAlignment="Center"
-                                FontFamily="{Binding Glyph.FontFamily}"
-                                Style="{DynamicResource ItemGlyph}"
-                                Text="{Binding Glyph.Glyph}"
-                                Visibility="{Binding ShowGlyph}" />
-                        </Border>
+                                Style="{DynamicResource BulletStyle}" />
+
+                            <Border
+                                Grid.Column="1"
+                                Margin="9,0,0,0"
+                                BorderBrush="Transparent"
+                                BorderThickness="1">
+                                <Image
+                                    x:Name="ImageIcon"
+                                    Width="{Binding IconXY}"
+                                    Height="{Binding IconXY}"
+                                    Margin="0,0,0,0"
+                                    HorizontalAlignment="Center"
+                                    IsHitTestVisible="False"
+                                    Source="{Binding Image, TargetNullValue={x:Null}}"
+                                    Stretch="Uniform"
+                                    Visibility="{Binding ShowIcon}">
+                                    <Image.Clip>
+                                        <EllipseGeometry
+                                            Center="16 16"
+                                            RadiusX="{Binding IconRadius}"
+                                            RadiusY="{Binding IconRadius}" />
+                                    </Image.Clip>
+                                </Image>
+                            </Border>
+                            <Border
+                                Grid.Column="1"
+                                Margin="9,0,0,0"
+                                BorderBrush="Transparent"
+                                BorderThickness="0">
+                                <TextBlock
+                                    x:Name="GlyphIcon"
+                                    HorizontalAlignment="Center"
+                                    VerticalAlignment="Center"
+                                    FontFamily="{Binding Glyph.FontFamily}"
+                                    Style="{DynamicResource ItemGlyph}"
+                                    Text="{Binding Glyph.Glyph}"
+                                    Visibility="{Binding ShowGlyph}" />
+                            </Border>
+                        </Grid>
+
                         <Grid
                             Grid.Column="1"
                             Margin="6,0,10,0"
@@ -171,6 +186,7 @@
             <!--  a result item height is 52 including margin  -->
             <DataTemplate.Triggers>
                 <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}, Path=IsSelected}" Value="True">
+                    <Setter TargetName="Bullet" Property="Style" Value="{DynamicResource ItemBulletSelectedStyle}" />
                     <Setter TargetName="Title" Property="Style" Value="{DynamicResource ItemTitleSelectedStyle}" />
                     <Setter TargetName="SubTitle" Property="Style" Value="{DynamicResource ItemSubTitleSelectedStyle}" />
                     <Setter TargetName="Hotkey" Property="Style" Value="{DynamicResource ItemHotkeySelectedStyle}" />
diff --git a/Flow.Launcher/Themes/Base.xaml b/Flow.Launcher/Themes/Base.xaml
index 4f82f3a1d..19a285f9e 100644
--- a/Flow.Launcher/Themes/Base.xaml
+++ b/Flow.Launcher/Themes/Base.xaml
@@ -3,20 +3,32 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:system="clr-namespace:System;assembly=mscorlib"
     xmlns:userSettings="clr-namespace:Flow.Launcher.Infrastructure.UserSettings;assembly=Flow.Launcher.Infrastructure">
-    <CornerRadius x:Key="ItemRadius">8</CornerRadius>
+    <CornerRadius x:Key="ItemRadius">0</CornerRadius>
     <Thickness x:Key="ItemMargin">0</Thickness>
     <Thickness x:Key="ResultMargin">0</Thickness>
     <!--  Further font customisations are dynamically loaded in Theme.cs  -->
+
+    <Style x:Key="BaseBulletStyle" TargetType="{x:Type Border}" />
+    <Style
+        x:Key="BulletStyle"
+        BasedOn="{StaticResource BaseBulletStyle}"
+        TargetType="{x:Type Border}" />
+    <Style
+        x:Key="ItemBulletSelectedStyle"
+        BasedOn="{StaticResource BaseBulletStyle}"
+        TargetType="{x:Type Border}" />
+
     <Style x:Key="BaseQueryBoxStyle" TargetType="{x:Type TextBox}">
         <Setter Property="BorderThickness" Value="0" />
         <Setter Property="FontSize" Value="28" />
         <Setter Property="FontWeight" Value="Regular" />
         <Setter Property="Margin" Value="16,7,16,7" />
         <Setter Property="Padding" Value="0,4,68,0" />
-        <Setter Property="Background" Value="#2F2F2F" />
+        <Setter Property="Background" Value="Transparent" />
         <Setter Property="Height" Value="48" />
         <Setter Property="Foreground" Value="#E3E0E3" />
         <Setter Property="CaretBrush" Value="#E3E0E3" />
+        <Setter Property="VerticalAlignment" Value="Center" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="HorizontalAlignment" Value="Stretch" />
         <Setter Property="Stylus.IsFlicksEnabled" Value="False" />
@@ -50,6 +62,13 @@
     </Style>
 
     <!--  Further font customisations are dynamically loaded in Theme.cs  -->
+    <Style x:Key="BaseQueryBoxBgStyle" TargetType="{x:Type Border}">
+        <Setter Property="Margin" Value="0,2,0,0" />
+    </Style>
+    <Style
+        x:Key="QueryBoxBgStyle"
+        BasedOn="{StaticResource BaseQueryBoxBgStyle}"
+        TargetType="{x:Type Border}" />
     <Style
         x:Key="BaseQuerySuggestionBoxStyle"
         BasedOn="{StaticResource BaseQueryBoxStyle}"
diff --git a/Flow.Launcher/Themes/BlackAndWhite.xaml b/Flow.Launcher/Themes/BlackAndWhite.xaml
index 395f5d614..750298f69 100644
--- a/Flow.Launcher/Themes/BlackAndWhite.xaml
+++ b/Flow.Launcher/Themes/BlackAndWhite.xaml
@@ -1,53 +1,178 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:system="clr-namespace:System;assembly=mscorlib">
+
     <ResourceDictionary.MergedDictionaries>
-        <ResourceDictionary Source="Base.xaml" />
+        <ResourceDictionary Source="pack://application:,,,/Themes/Base.xaml" />
     </ResourceDictionary.MergedDictionaries>
-    <Style x:Key="ItemGlyph"  BasedOn="{StaticResource BaseGlyphStyle}" TargetType="{x:Type TextBlock}">
-        <Setter Property="Foreground" Value="#ffffff" />
+    <Style
+        x:Key="BulletStyle"
+        BasedOn="{StaticResource BaseBulletStyle}"
+        TargetType="{x:Type Border}">
+        <Setter Property="Width" Value="4" />
+        <Setter Property="Height" Value="40" />
+        <Setter Property="Background" Value="Transparent" />
     </Style>
-    <Style x:Key="QueryBoxStyle" BasedOn="{StaticResource BaseQueryBoxStyle}" TargetType="{x:Type TextBox}">
-        <Setter Property="Background" Value="#000000" />
-        <Setter Property="Foreground" Value="#ffffff" />
+    <Style
+        x:Key="ItemBulletSelectedStyle"
+        BasedOn="{StaticResource BaseBulletStyle}"
+        TargetType="{x:Type Border}">
+        <Setter Property="Width" Value="4" />
+        <Setter Property="Height" Value="40" />
+        <Setter Property="Background" Value="#58c2b4" />
     </Style>
-    <Style x:Key="QuerySuggestionBoxStyle" BasedOn="{StaticResource BaseQuerySuggestionBoxStyle}" TargetType="{x:Type TextBox}">
-        <Setter Property="Background" Value="#000000" />
-        <Setter Property="Foreground" Value="#8f8f8f" />
+
+    <Style
+        x:Key="ItemGlyph"
+        BasedOn="{StaticResource BaseGlyphStyle}"
+        TargetType="{x:Type TextBlock}">
+        <Setter Property="Foreground" Value="#bbc1c3" />
     </Style>
-    <Style x:Key="WindowBorderStyle" BasedOn="{StaticResource BaseWindowBorderStyle}" TargetType="{x:Type Border}">
-        <Setter Property="CornerRadius" Value="4" />
+    <Style
+        x:Key="QueryBoxStyle"
+        BasedOn="{StaticResource BaseQueryBoxStyle}"
+        TargetType="{x:Type TextBox}">
+        <Setter Property="CaretBrush" Value="#336766" />
+        <Setter Property="Foreground" Value="#e7e9eb" />
+        <Setter Property="FontSize" Value="18" />
+        <Setter Property="Height" Value="38" />
+    </Style>
+
+    <Style
+        x:Key="QuerySuggestionBoxStyle"
+        BasedOn="{StaticResource BaseQuerySuggestionBoxStyle}"
+        TargetType="{x:Type TextBox}">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="Height" Value="38" />
+        <Setter Property="FontSize" Value="18" />
+        <Setter Property="Foreground" Value="#768084" />
+    </Style>
+
+    <Style
+        x:Key="WindowBorderStyle"
+        BasedOn="{StaticResource BaseWindowBorderStyle}"
+        TargetType="{x:Type Border}">
         <Setter Property="BorderThickness" Value="1" />
-        <Setter Property="BorderBrush" Value="#494949" />
-        <Setter Property="Background" Value="#000000" />
+        <Setter Property="BorderBrush" Value="#09181e" />
+        <Setter Property="Background" Value="#0f1f26" />
+        <Setter Property="CornerRadius" Value="6" />
+        <Setter Property="UseLayoutRounding" Value="True" />
     </Style>
-    <Style x:Key="WindowStyle" TargetType="{x:Type Window}" BasedOn="{StaticResource BaseWindowStyle}" />
-    <Style x:Key="PendingLineStyle" BasedOn="{StaticResource BasePendingLineStyle}" TargetType="{x:Type Line}">
-        <Setter Property="Stroke" Value="White" />
+    <Style
+        x:Key="WindowStyle"
+        BasedOn="{StaticResource BaseWindowStyle}"
+        TargetType="{x:Type Window}" />
+    <Style
+        x:Key="PendingLineStyle"
+        BasedOn="{StaticResource BasePendingLineStyle}"
+        TargetType="{x:Type Line}" />
+
+    <!--  Item Style  -->
+    <Style
+        x:Key="ItemTitleStyle"
+        BasedOn="{StaticResource BaseItemTitleStyle}"
+        TargetType="{x:Type TextBlock}">
+        <Setter Property="Foreground" Value="#eff2f2" />
     </Style>
-    <Style x:Key="ItemTitleStyle" BasedOn="{StaticResource BaseItemTitleStyle}" TargetType="{x:Type TextBlock}">
-        <Setter Property="Foreground" Value="#FFFFF8" />
+    <Style
+        x:Key="ItemSubTitleStyle"
+        BasedOn="{StaticResource BaseItemSubTitleStyle}"
+        TargetType="{x:Type TextBlock}">
+        <Setter Property="FontSize" Value="12" />
+        <Setter Property="Foreground" Value="#768084" />
     </Style>
-    <Style x:Key="ItemSubTitleStyle" BasedOn="{StaticResource BaseItemSubTitleStyle}" TargetType="{x:Type TextBlock}">
-        <Setter Property="Foreground" Value="#8f8f8f" />
+    <Style
+        x:Key="SeparatorStyle"
+        BasedOn="{StaticResource BaseSeparatorStyle}"
+        TargetType="{x:Type Rectangle}">
+        <Setter Property="Fill" Value="#1e292f" />
+        <Setter Property="Height" Value="1" />
+        <Setter Property="Margin" Value="0,0,0,4" />
     </Style>
-    <Style x:Key="ItemTitleSelectedStyle" BasedOn="{StaticResource BaseItemTitleSelectedStyle}" TargetType="{x:Type TextBlock}">
-        <Setter Property="Foreground" Value="#FFFFF8" />
+    <Style x:Key="HighlightStyle" />
+    <Style
+        x:Key="ItemTitleSelectedStyle"
+        BasedOn="{StaticResource BaseItemTitleSelectedStyle}"
+        TargetType="{x:Type TextBlock}">
+        <Setter Property="Foreground" Value="#eff2f2" />
     </Style>
-    <Style x:Key="ItemSubTitleSelectedStyle" BasedOn="{StaticResource BaseItemSubTitleSelectedStyle}" TargetType="{x:Type TextBlock}">
-        <Setter Property="Foreground" Value="#8f8f8f" />
+    <Style
+        x:Key="ItemSubTitleSelectedStyle"
+        BasedOn="{StaticResource BaseItemSubTitleSelectedStyle}"
+        TargetType="{x:Type TextBlock}">
+        <Setter Property="FontSize" Value="12" />
+        <Setter Property="Foreground" Value="#768084" />
     </Style>
-    <SolidColorBrush x:Key="ItemSelectedBackgroundColor">#494949</SolidColorBrush>
-    <Style x:Key="ThumbStyle" BasedOn="{StaticResource BaseThumbStyle}" TargetType="{x:Type Thumb}" />
-    <Style x:Key="ScrollBarStyle" BasedOn="{StaticResource BaseScrollBarStyle}" TargetType="{x:Type ScrollBar}" />
-    <Style x:Key="HighlightStyle">
-        <Setter Property="Inline.FontWeight" Value="Bold" />
+    <SolidColorBrush x:Key="ItemSelectedBackgroundColor">#1e292f</SolidColorBrush>
+
+    <!--  button style in the middle of the scrollbar  -->
+    <Style
+        x:Key="ThumbStyle"
+        BasedOn="{StaticResource BaseThumbStyle}"
+        TargetType="{x:Type Thumb}">
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type Thumb}">
+                    <Border
+                        Background="#768084"
+                        BorderBrush="Transparent"
+                        BorderThickness="0"
+                        CornerRadius="2"
+                        DockPanel.Dock="Right" />
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
     </Style>
+    <Style
+        x:Key="ScrollBarStyle"
+        BasedOn="{StaticResource BaseScrollBarStyle}"
+        TargetType="{x:Type ScrollBar}" />
+    <Style
+        x:Key="SearchIconStyle"
+        BasedOn="{StaticResource BaseSearchIconStyle}"
+        TargetType="{x:Type Path}">
+        <Setter Property="Fill" Value="#57c0b2" />
+        <Setter Property="Width" Value="24" />
+        <Setter Property="Height" Value="24" />
+    </Style>
+    <Style x:Key="SearchIconPosition" TargetType="{x:Type Canvas}">
+        <Setter Property="Background" Value="#0f1f26" />
+        <Setter Property="Width" Value="32" />
+        <Setter Property="Height" Value="32" />
+        <Setter Property="Margin" Value="0,8,8,0" />
+        <Setter Property="HorizontalAlignment" Value="Right" />
+    </Style>
+
     <Style x:Key="ItemHotkeyStyle" TargetType="{x:Type TextBlock}">
-        <Setter Property="FontSize" Value="15" />
-        <Setter Property="Foreground" Value="#b2b2b2" />
+        <Setter Property="FontSize" Value="12" />
+        <Setter Property="Foreground" Value="#9da1aa" />
     </Style>
     <Style x:Key="ItemHotkeySelectedStyle" TargetType="{x:Type TextBlock}">
-        <Setter Property="FontSize" Value="15" />
-        <Setter Property="Foreground" Value="#b2b2b2" />
+        <Setter Property="FontSize" Value="12" />
+        <Setter Property="Foreground" Value="#ffffff" />
+    </Style>
+    <Style x:Key="ItemGlyphSelectedStyle" TargetType="{x:Type TextBlock}">
+        <Setter Property="Foreground" Value="#58c2b4" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="HorizontalAlignment" Value="Center" />
+        <Setter Property="Width" Value="25" />
+        <Setter Property="Height" Value="25" />
+        <Setter Property="FontSize" Value="25" />
+    </Style>
+    <CornerRadius x:Key="ItemRadius">0</CornerRadius>
+    <Thickness x:Key="ItemMargin">0</Thickness>
+    <Thickness x:Key="ResultMargin">0 0 0 4</Thickness>
+    <Style
+        x:Key="ClockBox"
+        BasedOn="{StaticResource BaseClockBox}"
+        TargetType="{x:Type TextBlock}">
+        <Setter Property="Foreground" Value="#57c0b2" />
+    </Style>
+    <Style
+        x:Key="DateBox"
+        BasedOn="{StaticResource BaseDateBox}"
+        TargetType="{x:Type TextBlock}">
+        <Setter Property="Foreground" Value="#57c0b2" />
     </Style>
 </ResourceDictionary>
\ No newline at end of file
diff --git a/Flow.Launcher/Themes/Darker.xaml b/Flow.Launcher/Themes/Darker.xaml
index b255c4d9e..afbc9c048 100644
--- a/Flow.Launcher/Themes/Darker.xaml
+++ b/Flow.Launcher/Themes/Darker.xaml
@@ -2,6 +2,7 @@
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:system="clr-namespace:System;assembly=mscorlib">
+
     <ResourceDictionary.MergedDictionaries>
         <ResourceDictionary Source="pack://application:,,,/Themes/Base.xaml" />
     </ResourceDictionary.MergedDictionaries>
@@ -9,32 +10,41 @@
         x:Key="ItemGlyph"
         BasedOn="{StaticResource BaseGlyphStyle}"
         TargetType="{x:Type TextBlock}">
-        <Setter Property="Foreground" Value="#ffffff" />
+        <Setter Property="Foreground" Value="#6a7181" />
     </Style>
     <Style
         x:Key="QueryBoxStyle"
         BasedOn="{StaticResource BaseQueryBoxStyle}"
         TargetType="{x:Type TextBox}">
-        <Setter Property="SelectionBrush" Value="#6e6e6e" />
-        <Setter Property="SelectionBrush" Value="#4D4D4D" />
+        <Setter Property="Foreground" Value="#fbfdff" />
+        <Setter Property="FontSize" Value="18" />
+        <Setter Property="Height" Value="38" />
     </Style>
 
     <Style
         x:Key="QuerySuggestionBoxStyle"
         BasedOn="{StaticResource BaseQuerySuggestionBoxStyle}"
         TargetType="{x:Type TextBox}">
-        <Setter Property="Foreground" Value="#8f8f8f" />
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="Height" Value="38" />
+        <Setter Property="FontSize" Value="18" />
+        <Setter Property="Foreground" Value="#253041" />
     </Style>
+
     <Style
         x:Key="WindowBorderStyle"
         BasedOn="{StaticResource BaseWindowBorderStyle}"
-        TargetType="{x:Type Border}" />
-
+        TargetType="{x:Type Border}">
+        <Setter Property="BorderThickness" Value="1" />
+        <Setter Property="BorderBrush" Value="#111828" />
+        <Setter Property="Background" Value="#111828" />
+        <Setter Property="CornerRadius" Value="8" />
+        <Setter Property="UseLayoutRounding" Value="True" />
+    </Style>
     <Style
         x:Key="WindowStyle"
         BasedOn="{StaticResource BaseWindowStyle}"
         TargetType="{x:Type Window}" />
-
     <Style
         x:Key="PendingLineStyle"
         BasedOn="{StaticResource BasePendingLineStyle}"
@@ -44,54 +54,105 @@
     <Style
         x:Key="ItemTitleStyle"
         BasedOn="{StaticResource BaseItemTitleStyle}"
-        TargetType="{x:Type TextBlock}" />
+        TargetType="{x:Type TextBlock}">
+        <Setter Property="Foreground" Value="#6a7181" />
+    </Style>
     <Style
         x:Key="ItemSubTitleStyle"
         BasedOn="{StaticResource BaseItemSubTitleStyle}"
         TargetType="{x:Type TextBlock}">
-        <Setter Property="Foreground" Value="#8f8f8f" />
+        <Setter Property="Foreground" Value="#5f6673" />
     </Style>
+    <Style
+        x:Key="SeparatorStyle"
+        BasedOn="{StaticResource BaseSeparatorStyle}"
+        TargetType="{x:Type Rectangle}">
+        <Setter Property="Fill" Value="#202938" />
+        <Setter Property="Height" Value="1" />
+        <Setter Property="Margin" Value="0,0,0,8" />
+    </Style>
+    <Style x:Key="HighlightStyle" />
     <Style
         x:Key="ItemTitleSelectedStyle"
         BasedOn="{StaticResource BaseItemTitleSelectedStyle}"
         TargetType="{x:Type TextBlock}">
-        <Setter Property="Cursor" Value="Arrow" />
+        <Setter Property="Foreground" Value="#ffffff" />
     </Style>
     <Style
         x:Key="ItemSubTitleSelectedStyle"
         BasedOn="{StaticResource BaseItemSubTitleSelectedStyle}"
         TargetType="{x:Type TextBlock}">
-        <Setter Property="Foreground" Value="#8f8f8f" />
-        <Setter Property="Cursor" Value="Arrow" />
-    </Style>
-    <SolidColorBrush x:Key="ItemSelectedBackgroundColor">#4d4d4d</SolidColorBrush>
-    <Style
-        x:Key="ItemImageSelectedStyle"
-        BasedOn="{StaticResource BaseItemImageSelectedStyle}"
-        TargetType="{x:Type Image}">
-        <Setter Property="Cursor" Value="Arrow" />
+        <Setter Property="Foreground" Value="#5f6673" />
     </Style>
+    <SolidColorBrush x:Key="ItemSelectedBackgroundColor">#202938</SolidColorBrush>
 
     <!--  button style in the middle of the scrollbar  -->
     <Style
         x:Key="ThumbStyle"
         BasedOn="{StaticResource BaseThumbStyle}"
-        TargetType="{x:Type Thumb}" />
-
+        TargetType="{x:Type Thumb}">
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type Thumb}">
+                    <Border
+                        Background="#202938"
+                        BorderBrush="Transparent"
+                        BorderThickness="0"
+                        CornerRadius="2"
+                        DockPanel.Dock="Right" />
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
     <Style
         x:Key="ScrollBarStyle"
         BasedOn="{StaticResource BaseScrollBarStyle}"
         TargetType="{x:Type ScrollBar}" />
+    <Style
+        x:Key="SearchIconStyle"
+        BasedOn="{StaticResource BaseSearchIconStyle}"
+        TargetType="{x:Type Path}">
+        <Setter Property="Fill" Value="#202938" />
+        <Setter Property="Width" Value="24" />
+        <Setter Property="Height" Value="24" />
+    </Style>
+    <Style x:Key="SearchIconPosition" TargetType="{x:Type Canvas}">
+        <Setter Property="Background" Value="#111828" />
+        <Setter Property="Width" Value="32" />
+        <Setter Property="Height" Value="32" />
+        <Setter Property="Margin" Value="0,8,8,0" />
+        <Setter Property="HorizontalAlignment" Value="Right" />
+    </Style>
+
+    <Style x:Key="ItemHotkeyStyle" TargetType="{x:Type TextBlock}">
+        <Setter Property="FontSize" Value="12" />
+        <Setter Property="Foreground" Value="#5f6673" />
+    </Style>
+    <Style x:Key="ItemHotkeySelectedStyle" TargetType="{x:Type TextBlock}">
+        <Setter Property="FontSize" Value="12" />
+        <Setter Property="Foreground" Value="#5f6673" />
+    </Style>
+    <Style x:Key="ItemGlyphSelectedStyle" TargetType="{x:Type TextBlock}">
+        <Setter Property="Foreground" Value="#ffffff" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="HorizontalAlignment" Value="Center" />
+        <Setter Property="Width" Value="25" />
+        <Setter Property="Height" Value="25" />
+        <Setter Property="FontSize" Value="25" />
+    </Style>
+    <CornerRadius x:Key="ItemRadius">8</CornerRadius>
+    <Thickness x:Key="ItemMargin">10 0 10 0</Thickness>
+    <Thickness x:Key="ResultMargin">0 0 0 10</Thickness>
     <Style
         x:Key="ClockBox"
         BasedOn="{StaticResource BaseClockBox}"
         TargetType="{x:Type TextBlock}">
-        <Setter Property="Foreground" Value="#6e6e6e" />
+        <Setter Property="Foreground" Value="#5f6673" />
     </Style>
     <Style
         x:Key="DateBox"
         BasedOn="{StaticResource BaseDateBox}"
         TargetType="{x:Type TextBlock}">
-        <Setter Property="Foreground" Value="#6e6e6e" />
+        <Setter Property="Foreground" Value="#5f6673" />
     </Style>
-</ResourceDictionary>
+</ResourceDictionary>
\ No newline at end of file
diff --git a/Flow.Launcher/Themes/Gray.xaml b/Flow.Launcher/Themes/Gray.xaml
index 1cacc8ec2..435beb78b 100644
--- a/Flow.Launcher/Themes/Gray.xaml
+++ b/Flow.Launcher/Themes/Gray.xaml
@@ -1,36 +1,63 @@
-<?xml version="1.0" encoding="UTF-8" ?>
-<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:system="clr-namespace:System;assembly=mscorlib">
+
     <ResourceDictionary.MergedDictionaries>
         <ResourceDictionary Source="pack://application:,,,/Themes/Base.xaml" />
     </ResourceDictionary.MergedDictionaries>
     <Style
-        x:Key="QueryBoxStyle"
-        BasedOn="{StaticResource BaseQueryBoxStyle}"
-        TargetType="{x:Type TextBox}">
-        <Setter Property="Background" Value="LightGray" />
-        <Setter Property="Foreground" Value="#222222" />
+        x:Key="BulletStyle"
+        BasedOn="{StaticResource BaseBulletStyle}"
+        TargetType="{x:Type Border}">
+        <Setter Property="Width" Value="4" />
+        <Setter Property="Height" Value="42" />
+        <Setter Property="Background" Value="Transparent" />
+    </Style>
+    <Style
+        x:Key="ItemBulletSelectedStyle"
+        BasedOn="{StaticResource BaseBulletStyle}"
+        TargetType="{x:Type Border}">
+        <Setter Property="Width" Value="4" />
+        <Setter Property="Height" Value="42" />
+        <Setter Property="CornerRadius" Value="2" />
+        <Setter Property="Background" Value="#8897ea" />
     </Style>
     <Style
         x:Key="ItemGlyph"
         BasedOn="{StaticResource BaseGlyphStyle}"
         TargetType="{x:Type TextBlock}">
-        <Setter Property="Foreground" Value="#000000" />
+        <Setter Property="Foreground" Value="#2b2b2e" />
+        <Setter Property="Margin" Value="-4 0 0 0" />
     </Style>
+    <Style
+        x:Key="QueryBoxStyle"
+        BasedOn="{StaticResource BaseQueryBoxStyle}"
+        TargetType="{x:Type TextBox}">
+        <Setter Property="Foreground" Value="#999aa3" />
+        <Setter Property="FontSize" Value="18" />
+        <Setter Property="Height" Value="38" />
+    </Style>
+
     <Style
         x:Key="QuerySuggestionBoxStyle"
         BasedOn="{StaticResource BaseQuerySuggestionBoxStyle}"
         TargetType="{x:Type TextBox}">
-        <Setter Property="Background" Value="LightGray" />
-        <Setter Property="Foreground" Value="#b8b8b8" />
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="Height" Value="38" />
+        <Setter Property="FontSize" Value="18" />
+        <Setter Property="Foreground" Value="#d9d9d9" />
     </Style>
 
     <Style
         x:Key="WindowBorderStyle"
         BasedOn="{StaticResource BaseWindowBorderStyle}"
         TargetType="{x:Type Border}">
-        <Setter Property="BorderBrush" Value="LightGray" />
-        <Setter Property="BorderThickness" Value="2" />
-        <Setter Property="Background" Value="LightGray" />
+        <Setter Property="BorderThickness" Value="1" />
+        <Setter Property="BorderBrush" Value="#e2e2e2" />
+        <Setter Property="Background" Value="#fffeff" />
+        <Setter Property="CornerRadius" Value="8" />
+        <Setter Property="UseLayoutRounding" Value="True" />
     </Style>
     <Style
         x:Key="WindowStyle"
@@ -40,40 +67,44 @@
         x:Key="PendingLineStyle"
         BasedOn="{StaticResource BasePendingLineStyle}"
         TargetType="{x:Type Line}" />
+
+    <!--  Item Style  -->
     <Style
         x:Key="ItemTitleStyle"
         BasedOn="{StaticResource BaseItemTitleStyle}"
         TargetType="{x:Type TextBlock}">
-        <Setter Property="Foreground" Value="#333333" />
-        <Setter Property="FontWeight" Value="Bold" />
-    </Style>
-    <Style
-        x:Key="ItemNumberStyle"
-        BasedOn="{StaticResource BaseItemNumberStyle}"
-        TargetType="{x:Type TextBlock}">
-        <Setter Property="Foreground" Value="#A6A6A6" />
+        <Setter Property="Foreground" Value="#2b2b2e" />
     </Style>
     <Style
         x:Key="ItemSubTitleStyle"
         BasedOn="{StaticResource BaseItemSubTitleStyle}"
         TargetType="{x:Type TextBlock}">
-        <Setter Property="Foreground" Value="#818181" />
-        <Setter Property="FontSize" Value="13" />
+        <Setter Property="Foreground" Value="#949394" />
     </Style>
+    <Style
+        x:Key="SeparatorStyle"
+        BasedOn="{StaticResource BaseSeparatorStyle}"
+        TargetType="{x:Type Rectangle}">
+        <Setter Property="Fill" Value="#f6f5f9" />
+        <Setter Property="Height" Value="1" />
+        <Setter Property="Margin" Value="0,0,0,8" />
+    </Style>
+    <Style x:Key="HighlightStyle" />
     <Style
         x:Key="ItemTitleSelectedStyle"
         BasedOn="{StaticResource BaseItemTitleSelectedStyle}"
         TargetType="{x:Type TextBlock}">
-        <Setter Property="Foreground" Value="White" />
+        <Setter Property="Foreground" Value="#2b2b2e" />
     </Style>
     <Style
         x:Key="ItemSubTitleSelectedStyle"
         BasedOn="{StaticResource BaseItemSubTitleSelectedStyle}"
         TargetType="{x:Type TextBlock}">
-        <Setter Property="Foreground" Value="Silver" />
-        <Setter Property="FontSize" Value="13" />
+        <Setter Property="Foreground" Value="#949394" />
     </Style>
-    <SolidColorBrush x:Key="ItemSelectedBackgroundColor">#787878</SolidColorBrush>
+    <SolidColorBrush x:Key="ItemSelectedBackgroundColor">#f1f1f1</SolidColorBrush>
+
+    <!--  button style in the middle of the scrollbar  -->
     <Style
         x:Key="ThumbStyle"
         BasedOn="{StaticResource BaseThumbStyle}"
@@ -82,7 +113,7 @@
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type Thumb}">
                     <Border
-                        Background="#eeeeee"
+                        Background="#d9d9d9"
                         BorderBrush="Transparent"
                         BorderThickness="0"
                         CornerRadius="2"
@@ -91,39 +122,55 @@
             </Setter.Value>
         </Setter>
     </Style>
-
     <Style
         x:Key="ScrollBarStyle"
         BasedOn="{StaticResource BaseScrollBarStyle}"
-        TargetType="{x:Type ScrollBar}">
-        <Setter Property="Width" Value="3" />
-    </Style>
+        TargetType="{x:Type ScrollBar}" />
     <Style
         x:Key="SearchIconStyle"
         BasedOn="{StaticResource BaseSearchIconStyle}"
         TargetType="{x:Type Path}">
-        <Setter Property="Fill" Value="#a4a4a4" />
+        <Setter Property="Fill" Value="#d9d9d9" />
+        <Setter Property="Width" Value="24" />
+        <Setter Property="Height" Value="24" />
+    </Style>
+    <Style x:Key="SearchIconPosition" TargetType="{x:Type Canvas}">
+        <Setter Property="Background" Value="#fffeff" />
         <Setter Property="Width" Value="32" />
         <Setter Property="Height" Value="32" />
+        <Setter Property="Margin" Value="0,8,8,0" />
+        <Setter Property="HorizontalAlignment" Value="Right" />
     </Style>
+
     <Style x:Key="ItemHotkeyStyle" TargetType="{x:Type TextBlock}">
-        <Setter Property="FontSize" Value="15" />
-        <Setter Property="Foreground" Value="#a3a3a3" />
+        <Setter Property="FontSize" Value="12" />
+        <Setter Property="Foreground" Value="#87888b" />
     </Style>
     <Style x:Key="ItemHotkeySelectedStyle" TargetType="{x:Type TextBlock}">
-        <Setter Property="FontSize" Value="15" />
-        <Setter Property="Foreground" Value="#a3a3a3" />
+        <Setter Property="FontSize" Value="12" />
+        <Setter Property="Foreground" Value="#87888b" />
     </Style>
+    <Style x:Key="ItemGlyphSelectedStyle" TargetType="{x:Type TextBlock}">
+        <Setter Property="Foreground" Value="#808dd5" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="HorizontalAlignment" Value="Center" />
+        <Setter Property="Width" Value="25" />
+        <Setter Property="Height" Value="25" />
+        <Setter Property="FontSize" Value="25" />
+    </Style>
+    <CornerRadius x:Key="ItemRadius">5</CornerRadius>
+    <Thickness x:Key="ItemMargin">10 0 10 0</Thickness>
+    <Thickness x:Key="ResultMargin">0 0 0 10</Thickness>
     <Style
         x:Key="ClockBox"
         BasedOn="{StaticResource BaseClockBox}"
         TargetType="{x:Type TextBlock}">
-        <Setter Property="Foreground" Value="#818181" />
+        <Setter Property="Foreground" Value="#87888b" />
     </Style>
     <Style
         x:Key="DateBox"
         BasedOn="{StaticResource BaseDateBox}"
         TargetType="{x:Type TextBlock}">
-        <Setter Property="Foreground" Value="#818181" />
+        <Setter Property="Foreground" Value="#87888b" />
     </Style>
-</ResourceDictionary>
+</ResourceDictionary>
\ No newline at end of file
diff --git a/Flow.Launcher/Themes/Light.xaml b/Flow.Launcher/Themes/Light.xaml
index 489aa05eb..555eb458b 100644
--- a/Flow.Launcher/Themes/Light.xaml
+++ b/Flow.Launcher/Themes/Light.xaml
@@ -17,7 +17,6 @@
         BasedOn="{StaticResource BaseQueryBoxStyle}"
         TargetType="{x:Type TextBox}">
         <Setter Property="Foreground" Value="#999aa3" />
-        <Setter Property="Background" Value="red" />
         <Setter Property="FontSize" Value="18" />
         <Setter Property="Height" Value="38" />
     </Style>
@@ -36,7 +35,8 @@
         x:Key="WindowBorderStyle"
         BasedOn="{StaticResource BaseWindowBorderStyle}"
         TargetType="{x:Type Border}">
-        <Setter Property="BorderThickness" Value="0" />
+        <Setter Property="BorderThickness" Value="1" />
+        <Setter Property="BorderBrush" Value="#e2e2e2" />
         <Setter Property="Background" Value="White" />
         <Setter Property="CornerRadius" Value="8" />
         <Setter Property="UseLayoutRounding" Value="True" />
@@ -117,6 +117,7 @@
         <Setter Property="Height" Value="24" />
     </Style>
     <Style x:Key="SearchIconPosition" TargetType="{x:Type Canvas}">
+        <Setter Property="Background" Value="White" />
         <Setter Property="Width" Value="32" />
         <Setter Property="Height" Value="32" />
         <Setter Property="Margin" Value="0,8,8,0" />
@@ -142,4 +143,16 @@
     <CornerRadius x:Key="ItemRadius">8</CornerRadius>
     <Thickness x:Key="ItemMargin">10 0 10 0</Thickness>
     <Thickness x:Key="ResultMargin">0 0 0 10</Thickness>
+    <Style
+        x:Key="ClockBox"
+        BasedOn="{StaticResource BaseClockBox}"
+        TargetType="{x:Type TextBlock}">
+        <Setter Property="Foreground" Value="#999aa3" />
+    </Style>
+    <Style
+        x:Key="DateBox"
+        BasedOn="{StaticResource BaseDateBox}"
+        TargetType="{x:Type TextBlock}">
+        <Setter Property="Foreground" Value="#999aa3" />
+    </Style>
 </ResourceDictionary>
\ No newline at end of file
diff --git a/Flow.Launcher/Themes/Win11Light.xaml b/Flow.Launcher/Themes/Win11Light.xaml
index df6d20bb4..4c58681d7 100644
--- a/Flow.Launcher/Themes/Win11Light.xaml
+++ b/Flow.Launcher/Themes/Win11Light.xaml
@@ -11,6 +11,12 @@
         TargetType="{x:Type TextBlock}">
         <Setter Property="Foreground" Value="#000000" />
     </Style>
+    <Style
+        x:Key="ItemGlyphSelectedStyle"
+        BasedOn="{StaticResource BaseGlyphStyle}"
+        TargetType="{x:Type TextBlock}">
+        <Setter Property="Foreground" Value="#000000" />
+    </Style>
     <Style
         x:Key="QueryBoxStyle"
         BasedOn="{StaticResource BaseQueryBoxStyle}"