[Ask a question or propose a change] Problems with themes

[lemonnuggets]

Question
So I have built a theme on the theme builder site, downloaded it, and added it to the themes folder, but when I try to use that theme this pop up shows up.

I wasn't sure if I was doing something wrong or if this is a bug, so I decided to post this as a question.

[taooceros]

I believe currently the theme builder site is from wox, which is not 100% compatible with Flow. It is a limitation. Thank you!

[jjw24]

Yeah , wox theme builder is no longer compatible unfortunately. What does it look like, maybe we can update it and add it into Flow?

Always can do with more themes :)

[Zeroto521]

Well, we can build a web on the GitHub page to handle this.

So, I need to know the right file format.

[jjw24]

It uses xaml, you can use the built in themes as example:
https://www.github.com/Flow-Launcher/Flow.Launcher/tree/dev/Flow.Launcher%2FThemes%2FDarker.xaml

[taooceros]

I do think we shall update some built in theme of Flow. Most of them don't fit the design well except Darker or blackandwhite.

[lemonnuggets]

These were the themes I was trying to add. "Nord" and "Nord Darker" based on the Nord color palette is what I was going for to see which would suit my setup.

[lemonnuggets]

So I haven't used XAML before but I thought I'd play around with the theme files, by copying stuff from the pre-existing themes and dumping stuff together. For some reason when I wrote this XAML file and tried to select it, Flow Launcher settings stopped responding, and also when I'd try to open the launcher it'd just automatically close itself.

<ResourceDictionary  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="pack://application:,,,/Themes/Base.xaml"></ResourceDictionary>
</ResourceDictionary.MergedDictionaries>

<Style x:Key="QueryBoxStyle" BasedOn="{StaticResource BaseQueryBoxStyle}" TargetType="{x:Type TextBox}">
    <!-- %searchFieldBackgroundColor% -->
    <Setter Property="Background" Value="#2e3440"/>
    <!-- %searchFieldTextColor% -->
    <Setter Property="Foreground" Value="#eceff4" />
</Style>
<Style x:Key="WindowBorderStyle" BasedOn="{StaticResource BaseWindowBorderStyle}" TargetType="{x:Type Border}">
    <!-- %backgroundColor% -->
    <Setter Property="Background" Value="#4c566a"></Setter>
    <Setter Property="CornerRadius" Value="8" />
    <!-- %borderColor% -->
    <Setter Property="BorderBrush" Value="#bf616a" />
    <Setter Property="BorderThickness" Value="10" />
</Style>
<Style x:Key="WindowStyle" TargetType="{x:Type Window}" BasedOn="{StaticResource BaseWindowStyle}" >
    <Setter Property="Width" Value="520"></Setter>
</Style>
<Style x:Key="PendingLineStyle" BasedOn="{StaticResource BasePendingLineStyle}" TargetType="{x:Type Line}" >
</Style>

<!-- Item Style -->
<Style x:Key="ItemTitleStyle" BasedOn="{StaticResource BaseItemTitleStyle}" TargetType="{x:Type TextBlock}" >
    <!-- %resultTextColor% -->
    <Setter Property="Foreground" Value="#e5e9f0"></Setter>
</Style>
<Style x:Key="ItemSubTitleStyle" BasedOn="{StaticResource BaseItemSubTitleStyle}" TargetType="{x:Type TextBlock}" >
    <!-- %resultSubtextColor% -->
    <Setter Property="Foreground"  Value="#d8dee9"></Setter>
</Style>
<Style x:Key="ItemTitleSelectedStyle" BasedOn="{StaticResource BaseItemTitleSelectedStyle}" TargetType="{x:Type TextBlock}">
    <!-- %selectedResultForeground% -->
    <Setter Property="Foreground" Value="#2e3440" />
</Style>
<Style x:Key="ItemSubTitleSelectedStyle" BasedOn="{StaticResource BaseItemSubTitleSelectedStyle}" TargetType="{x:Type TextBlock}">
    <!-- %selectedSubtextForeground% -->
    <Setter Property="Foreground" Value="#4c566a" />
</Style>
<!-- %selectedResultBackgroundColor% -->
<Color x:Key="ItemSelectedBackgroundColor">#5e81ac</Color>

<!-- 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}">
                <!-- %scrollbarColor% -->
                <Border CornerRadius="2" DockPanel.Dock="Right" Background="#2e3440" BorderBrush="Transparent" BorderThickness="0" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="ScrollBarStyle" BasedOn="{StaticResource BaseScrollBarStyle}" TargetType="{x:Type ScrollBar}">
</Style>

I know that I probably made some error while screwing around with the file, but I still think there should be something that protects the user from trying to use an invalid theme and crashing the program. I don't know if that's something that would be really hard to implement or not worth the effort but thought that I should tell you about this problem.

[taooceros]

I don't think flow shall crash when an invalid theme is used. It should use the default theme instead.
I will take a try on your theme. Thank you for telling us about this!

[jjw24]

These were the themes I was trying to add. "Nord" and "Nord Darker" based on the Nord color palette is what I was going for to see which would suit my setup.

This theme looks good, reminds me of the OnePlus nord phone haha, once fixed let's add it in @lemonnuggets ?

[lemonnuggets]

Okay great! So I was able to kinda make the theme I wanted by copying the default Grey theme and changing the values. I also created a PR in case you would like to add or modify these themes (#304).
Now I was wondering if there's any way to change the Search Icon that's always there.