Flow.Launcher icon indicating copy to clipboard operation
Flow.Launcher copied to clipboard

BUG: Recent Update Broke Some Acrylic/Blur Themes

Open skiIItissue opened this issue 6 months ago • 25 comments

Checks

  • [x] I have checked that this issue has not already been reported.

  • [x] I am using the latest version of Flow Launcher.

Problem Description

I've been using the OnsetGlaze (Acrylic/Glassmorphism) theme for a couple of months now, and after a recent update its background has become pitch black. I tried modifying the .xaml file, however, given I'm not qualified enough to fix the code myself, I didn't succeed.

So in an attempt to fix this I tried using another theme called Acrylic for Flow Launcher. That did fix the background, but now the Flow window displays double corners, which to my understanding is not intended. I believe there's a good chance it's tied to the recent semi-transparent corners bug fix.


On a side note, Acrylic/Glassmorphism themes seem to look less transparent. However, I'm too used to the transparency of the OnsetGlaze theme which is now fully opaque, so I can't reasonably compare. Also, please let me know if it's impossible to tweak the transparency in general (without modyfing the .xaml) or if I'm missing something.

To Reproduce

  1. Download and install either the "OnsetGlaze" or the "Acrylic for Flow Launcher" theme
  2. Set either as a theme in Flow Launcher settings
  3. Open Flow Launcher

Screenshots

OnsetGlaze:

Image

What it should look like:

Image


Acrylic for Flow Launcher (notice the double corners):

Image

What it should look like:

Image

Flow Launcher Version

1.20.0

Windows Build Number

10.0.26100.4061

Error Log

N/A

skiIItissue avatar Jun 03 '25 21:06 skiIItissue

Broken Blur++ on Win 10

this is the same theme on v1.19.5 vs v1.20.0 on win 10

with the blur being ignore the transparency of the background make flow unreadable when\if there's a lot going on in the background.

my win 11 install apply's a different blur affect altogether. i'll have to follow up with a screen shot for that later.

Image

Image

indigofairyx avatar Jun 03 '25 22:06 indigofairyx

Same issue. I was using Bullet Acrylic and now the transparency is broken after updating.

Image

mgittelman avatar Jun 03 '25 23:06 mgittelman

Having the same issue, using the onsetGlaze theme. Also, the slide up animation doesn't work, it simply plays the clicking sound effect and pops up. Image

Viniuau avatar Jun 04 '25 00:06 Viniuau

Also, the slide up animation doesn't work, it simply plays the clicking sound effect and pops up.

Great catch, haven't even noticed this. On my end the animation is gone too.

skiIItissue avatar Jun 04 '25 01:06 skiIItissue

To add to this point:

On a side note, Acrylic/Glassmorphism themes seem to look less transparent

I got transparency w/ blur working by creating my own placeholder theme using official tools on the Flow Launcher website. I made the background fully transparent, and it reflects in the code:

<Setter Property="Background" Value="#00000000"/>


So, here's a comparison between the website preview and how it looks in the actual app:

Image

Image On a yet another side note, I made sure to replace all accent colors with either white or violet (especially on shortcuts and subtitles) while tweaking their transparency, but getting yellows and pinks. If I leave them fully opaque, the colors are as they should be. It is a separate issue, and still, I'm not going to pretend like I know what I'm doing. I might be just missing an inconspicuous setting somewhere, or it may be an actual issue that occurs when trying to make shortcut and/or subtitle elements transparent.

Comparing a 0% opacity theme and 0% opacity windows terminal

Image


I realize that the small differences between website preview and the actual desktop window are inevitable. However, I can say with full certainty – the background was never this gray. I know this, because background having almost no tint was the exact reason I chose OnsetGlaze rather than any other Acrylic theme.

skiIItissue avatar Jun 04 '25 02:06 skiIItissue

Hi guys, since the implementation method for acrylic/blur themes has changed. existing external themes need to be adjusted accordingly. (This information is provided in the theme creation documentation.) The window movement animation was also removed for the same reason. Please try switching to a built-in blur theme (such as Windows11 or Circle) and test with acrylic mode enabled. If you encounter any issues, let us know.

Previously, Flow rendered blur effects manually, but this caused issues where the blur area extended beyond the window’s rounded corners. Starting from version 1.12, Flow switched to using OS-provided acrylic and other DWM effects. With this approach, fully transparent designs are no longer possible—only slightly dark or light background modes are allowed by default, with a subtle tint applied on top. This behavior is determined by the OS, and we chose this method because we believe it represents a proper implementation of blur.

onesounds avatar Jun 04 '25 03:06 onesounds

Hey, thanks for a quick reply. That makes sense. Be that as it may, it's unfortunate to see fully transparent designs go. Would be great to see it as an option in the settings, even with improper corners. Though I understand it would likely be too tedious to implement along with it being simply inessential.

And just to be sure: as I have shown, fully transparent backgrounds are in fact possible in Windows, natively in the Terminal app. Am I correct to assume that this functionality is unavailable for third-party apps? Thanks again.

skiIItissue avatar Jun 04 '25 04:06 skiIItissue

I have no idea how the terminal managed to implement it like that. 😂 For now, I'll share the modified version of OnsetGlaze that I’ve edited.

Image

<!--
    Name: OnsetGlazeEdited
    IsDark: True
    HasBlur: True
-->
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:system="clr-namespace:System;assembly=mscorlib"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="pack://application:,,,/Themes/Base.xaml" />
    </ResourceDictionary.MergedDictionaries>
    <system:Boolean x:Key="ThemeBlurEnabled">True</system:Boolean>
    <system:String x:Key="SystemBG">Dark</system:String>
    <Color x:Key="LightBG">#CEFAFAFA</Color>
    <Color x:Key="DarkBG">#05000000</Color>
    <Style
        BasedOn="{StaticResource BaseGlyphStyle}"
        TargetType="{x:Type TextBlock}"
        x:Key="ItemGlyph">
        <Setter Property="Foreground" Value="#ffffff" />
    </Style>
    <Style
        BasedOn="{StaticResource BaseQueryBoxStyle}"
        TargetType="{x:Type TextBox}"
        x:Key="QueryBoxStyle">
        <Setter Property="Padding" Value="0,4,50,0" />
        <Setter Property="Foreground" Value="#FFFFFFFF" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="FontSize" Value="18" />
        <Setter Property="Height" Value="38" />
    </Style>
    <Style
        BasedOn="{StaticResource BaseQuerySuggestionBoxStyle}"
        TargetType="{x:Type TextBox}"
        x:Key="QuerySuggestionBoxStyle">
        <Setter Property="Padding" Value="0,4,50,0" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Height" Value="38" />
        <Setter Property="FontSize" Value="18" />
        <Setter Property="Foreground" Value="LightGray" />
    </Style>
    <Style
        BasedOn="{StaticResource BaseWindowBorderStyle}"
        TargetType="{x:Type Border}"
        x:Key="WindowBorderStyle">
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="BorderBrush" Value="#444444" />
        <Setter Property="Background">
            <Setter.Value>
                <SolidColorBrush Color="Black" Opacity="0.3" />
            </Setter.Value>
        </Setter>
        <Setter Property="CornerRadius" Value="8" />
        <Setter Property="UseLayoutRounding" Value="True" />
    </Style>
    <Style
        BasedOn="{StaticResource BaseWindowStyle}"
        TargetType="{x:Type Window}"
        x:Key="WindowStyle">
        <Setter Property="Background">
            <Setter.Value>
                <SolidColorBrush Color="Black" Opacity="0.2" />
            </Setter.Value>
        </Setter>
    </Style>
    <Style
        BasedOn="{StaticResource BasePendingLineStyle}"
        TargetType="{x:Type Line}"
        x:Key="PendingLineStyle" />
    <Style
        BasedOn="{StaticResource BaseItemTitleStyle}"
        TargetType="{x:Type TextBlock}"
        x:Key="ItemTitleStyle">
        <Setter Property="Foreground" Value="#bebec1" />
    </Style>
    <Style
        BasedOn="{StaticResource BaseItemSubTitleStyle}"
        TargetType="{x:Type TextBlock}"
        x:Key="ItemSubTitleStyle">
        <Setter Property="Foreground" Value="#bebec1" />
    </Style>
    <Style
        BasedOn="{StaticResource BaseSeparatorStyle}"
        TargetType="{x:Type Rectangle}"
        x:Key="SeparatorStyle">
        <Setter Property="Fill" Value="#bebec1" />
        <Setter Property="Height" Value="1" />
        <Setter Property="Margin" Value="0,0,0,8" />
    </Style>
    <Style x:Key="HighlightStyle" />
    <Style
        BasedOn="{StaticResource BaseItemTitleSelectedStyle}"
        TargetType="{x:Type TextBlock}"
        x:Key="ItemTitleSelectedStyle">
        <Setter Property="Foreground" Value="#ffffff" />
    </Style>
    <Style
        BasedOn="{StaticResource BaseItemSubTitleSelectedStyle}"
        TargetType="{x:Type TextBlock}"
        x:Key="ItemSubTitleSelectedStyle">
        <Setter Property="Foreground" Value="#bebec1" />
    </Style>
    <SolidColorBrush x:Key="ItemSelectedBackgroundColor">#19c9c9fb</SolidColorBrush>
    <Style
        BasedOn="{StaticResource BaseThumbStyle}"
        TargetType="{x:Type Thumb}"
        x:Key="ThumbStyle">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Border
                        Background="#ffffff"
                        BorderBrush="Transparent"
                        BorderThickness="0"
                        CornerRadius="2"
                        DockPanel.Dock="Right"
                        Opacity="0.2" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style
        BasedOn="{StaticResource BaseScrollBarStyle}"
        TargetType="{x:Type ScrollBar}"
        x:Key="ScrollBarStyle">
        <Setter Property="Background" Value="#a0a0a0" />
    </Style>
    <Style
        BasedOn="{StaticResource BaseSearchIconStyle}"
        TargetType="{x:Type Path}"
        x:Key="SearchIconStyle">
        <Setter Property="Fill" Value="#bebec1" />
        <Setter Property="Width" Value="24" />
        <Setter Property="Height" Value="24" />
    </Style>
    <Style TargetType="{x:Type Canvas}" x:Key="SearchIconPosition">
        <Setter Property="Background" Value="Transparent" />
        <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 TargetType="{x:Type TextBlock}" x:Key="ItemHotkeyStyle">
        <Setter Property="FontSize" Value="12" />
        <Setter Property="Foreground" Value="#bebec1" />
    </Style>
    <Style TargetType="{x:Type TextBlock}" x:Key="ItemHotkeySelectedStyle">
        <Setter Property="FontSize" Value="12" />
        <Setter Property="Foreground" Value="#bebec1" />
    </Style>
    <Style TargetType="{x:Type TextBlock}" x:Key="ItemGlyphSelectedStyle">
        <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
        BasedOn="{StaticResource ClockPanel}"
        TargetType="{x:Type StackPanel}"
        x:Key="ClockPanel">
        <Setter Property="Margin" Value="0,0,54,0" />
    </Style>
    <Style
        BasedOn="{StaticResource BaseClockBox}"
        TargetType="{x:Type TextBlock}"
        x:Key="ClockBox">
        <Setter Property="Foreground" Value="#bebec1" />
    </Style>
    <Style
        BasedOn="{StaticResource BaseDateBox}"
        TargetType="{x:Type TextBlock}"
        x:Key="DateBox">
        <Setter Property="Foreground" Value="#bebec1" />
    </Style>
    <Style
        BasedOn="{StaticResource BasePreviewBorderStyle}"
        TargetType="{x:Type Border}"
        x:Key="PreviewBorderStyle">
        <Setter Property="Margin" Value="0,0,10,8" />
        <Setter Property="BorderBrush" Value="#bebec1" />
    </Style>
    <Style
        BasedOn="{StaticResource BasePreviewItemTitleStyle}"
        TargetType="{x:Type TextBlock}"
        x:Key="PreviewItemTitleStyle">
        <Setter Property="Foreground" Value="#ffffff" />
    </Style>
    <Style
        BasedOn="{StaticResource BasePreviewItemSubTitleStyle}"
        TargetType="{x:Type TextBlock}"
        x:Key="PreviewItemSubTitleStyle">
        <Setter Property="Foreground" Value="#bebec1" />
    </Style>
    <Style
        BasedOn="{StaticResource BasePreviewGlyph}"
        TargetType="{x:Type TextBlock}"
        x:Key="PreviewGlyph">
        <Setter Property="Foreground" Value="#bebec1" />
    </Style>
</ResourceDictionary>

onesounds avatar Jun 04 '25 04:06 onesounds

Thank you kindly for sharing. It will do for now haha

skiIItissue avatar Jun 04 '25 04:06 skiIItissue

For now, I won't close this issue, as other users might encounter the same problem. Except for ONSET GLAZE, the mentioned themes—Bullet (based on Windows 11) and Acrylic for Flow Launcher (based on the Circle theme)—will not be modified separately. These themes now all support acrylic effects, so please try using one of the built-in themes. If anyone else needs help with a previously used theme, feel free to let us know.

onesounds avatar Jun 04 '25 05:06 onesounds

By the way, I'm using ExplorerBlurMica which makes Windows Explorer support Acrylic, Mica and Blur effects, and flawlessly so. Acrylic at 0% opacity is fully transparent, has proper looking corners with the blur not bleeding over the edges, as well as adjustable background colors and alpha through the config file. I've glanced over the code at the repository, but I couldn't find anything obviously responsible for the Acrylic implementation.

ExplorerBlurMica alongside the Terminal

Image

https://github.com/Maplespe/ExplorerBlurMica

So, if this is of any help, I invite you to check it out. Might shed some light on how it was implemented there, potentially helping to implement it in the Flow Launcher.

skiIItissue avatar Jun 04 '25 05:06 skiIItissue

I tested it using the ExplorerBlurMica code as a reference and confirmed that implementation is possible... however, I discovered a few issues. In actual use, windows that are nearly transparent can cause some problems. For now, I’ll do some more testing to see if it’s feasible while keeping the 1.20.0 structure intact.

onesounds avatar Jun 04 '25 09:06 onesounds

Broken Blur++ on Win 10

this is the same theme on v1.19.5 vs v1.20.0 on win 10

with the blur being ignore the transparency of the background make flow unreadable when\if there's a lot going on in the background.

my win 11 install apply's a different blur affect altogether. i'll have to follow up with a screen shot for that later.

Image

Image

I THOUGHT I WAS GOING INSANE LMAOOO I COULDN'T READ ANYTHING

vdawg3 avatar Jun 06 '25 14:06 vdawg3

Hey, after I updated from v 1.19.5 to 1.20.1 Blur effects stopped working.

A theme with blur built from the Theme Builder and placed in 1.20.1 UserData\Themes (I'm using portable) have no blur shown, yet when copied over to the same directory under 1.19.5 blur does appear, leading to the conclusion that the issue is not a .xaml setting being missed.

I'm on Windows 10 with Nvidia drivers version 576.40, if that helps. I'll try updating the drivers too, if that does anything I'll reply back.

Fuzzycc avatar Jun 15 '25 22:06 Fuzzycc

@Fuzzycc The following content must be placed at the very top of the theme file.

<!--
    Name: BlurTheme 
    IsDark: False 
    HasBlur: True
-->

Refer to the link below: https://github.com/Flow-Launcher/Flow.Launcher/blob/58a47aa35db0e11f876f0f089d94597c7e7b79c6/Flow.Launcher/Themes/Win11Light.xaml#L4 In addition to the ThemeBlurEnabled key, the following properties are also required:

<system:Boolean x:Key="ThemeBlurEnabled">True</system:Boolean>
<system:String x:Key="SystemBG">Light</system:String>
<Color x:Key="LightBG">#CEFAFAFA</Color>
<Color x:Key="DarkBG">#D6202020</Color>

Please add these two sets of properties and test again. If the issue persists, please share the theme file you created.

onesounds avatar Jun 16 '25 05:06 onesounds

@onesounds I have followed the mentioned guidelines and added the following to the theme file, but it did not work. I then copied the file to 1.19.5's theme folder and the blur work. I then created a new xaml file, simply copy-pasting from the link you have provided (Win11Light) and it had no blur (back to 1.20.1), instead it was a fully opaque color. (I do not know if perhaps that is the intended behavior for this theme)

I attempted to turn on transparency in Windows 10's settings, but it did not prove to do affect things.

Perhaps things have broken for Windows 10, but this is just a random thought as I am in no position to judge because I'm just an end-user.

This is the theme file Fuzzycc/FlowLauncherUI/Themes/Tinted Glass - Standard Blur - Accent

This is also the file directly uploaded here: (changed to .txt to upload)

Tinted Glass - Standard Blur - Accent.txt

Having Blur or not is not a big deal nor a deal breaker for me, so I appreciate the effort and help, but please don't tire yourself over it if it is too tiresome. 👍👍👍 Thank you

Fuzzycc avatar Jun 17 '25 18:06 Fuzzycc

Starting from version 1.20.0, Blur themes are supported only on Windows 11. On Windows 10, if a Blur theme is selected, a notice is shown in the Backdrop settings indicating that the effect is not supported. As a result, the Backdrop effect is forced to "None" on Windows 10.

onesounds avatar Jun 18 '25 03:06 onesounds

I see, thank you for the clarification.

Fuzzycc avatar Jun 18 '25 13:06 Fuzzycc

Starting from version 1.20.0, Blur themes are supported only on Windows 11. On Windows 10, if a Blur theme is selected, a notice is shown in the Backdrop settings indicating that the effect is not supported. As a result, the Backdrop effect is forced to "None" on Windows 10.

Why is this? It worked before so why abandon Win10?

Gurrrra avatar Jun 18 '25 18:06 Gurrrra

@Gurrrra The difference stems from the fact that the current blur implementation has changed compared to the previous one. The older version of the blur effect did not rely on the OS's DWM (Desktop Window Manager), so it behaved differently from the standard acrylic windows seen in other applications. This led to several issues, such as the blur not covering rounded corners and other rendering inconsistencies.

By switching to the DWM-based effect used by the OS, we introduced the need to change the theme format and encountered some limitations. However, this also brought several improvements. (Users who have tried the previous version may remember problems like rendering delays or the lack of shadows in the blur theme.) We decided that the benefits of adopting the system-native blur outweighed the drawbacks of the older implementation and the limitations it imposed.

We initially tested the new blur effect on Windows 10 during development. While it wasn't entirely impossible, there were noticeable behavioral differences compared to Windows 11. Considering the additional work required to handle these differences and the potential for increased issues, we ultimately chose to disable blur support on Windows 10. The fact that official support for Windows 10 is ending soon also influenced my decision. (Supporting it under the new blur system would essentially be a form of backward compatibility.)

If we were building a simple application without a theming system, we likely would have supported blur on Windows 10 as well. However, because our app includes a flexible and complex theming system, the internal architecture is far more intricate than a typical application.

Summary: The cost was higher than expected.

onesounds avatar Jun 19 '25 10:06 onesounds

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 60 days.\n\nAlternatively this issue can be kept open by adding one of the following labels:\nkeep-fresh

github-actions[bot] avatar Aug 19 '25 02:08 github-actions[bot]

This issue was closed because it has been stale for 7 days with no activity. If you feel this issue still needs attention please feel free to reopen.

github-actions[bot] avatar Aug 27 '25 02:08 github-actions[bot]

I use the 2.0 version, made a custom theme, and encountered the same problem. I have tried it with disabling DWM BlugGlass and restart DWM, but with no success,

Image

Ghost-Miner avatar Sep 11 '25 15:09 Ghost-Miner

I have such glitch in search input on all acrylic/Mica/Mica Alt themes. Example is from official Windows 11 theme. Version 2.0.1. Win 24H2 Alt text

airfortech avatar Oct 01 '25 04:10 airfortech

I have such glitch in search input on all acrylic/Mica/Mica Alt themes. Example is from official Windows 11 theme. Version 2.0.1. Win 24H2 Alt text

i did Encounter same issue because i use windhawk "Translucent windows" solved by Excluding the process

Image

medo2132112 avatar Oct 05 '25 12:10 medo2132112