Alfred 4.3 Pre-release: Big Sur Theming Improvements

[Vero]

Alfred 4.3 is now in pre-release with gorgeous improvements to theming.

 

We've added the ability to choose a native macOS Visual Effect view to back Alfred's window, which makes it easy to create native-looking themes, as well as more control over rounded corners.

 

We've created a couple of themes as examples, but I'm sure you'll create some fabulous themes too!

• Light Experimental theme
• Dark Experimental theme

 

Below are the key things to check out when creating themes in 4.3. Please read all the way to the end of this post for a few important notes!  

 

1. Set your base Visual Effect to light or dark under the Window Blur icon in the top left of the theme preview

 

 

This will define the base of your theme to be brighter or darker. The macOS Visual Effect view is designed to be used with no additional colour, however you can still set your theme's background colour, so you can get some really interesting tints.

 

Your best bet to get a colour tint is to set the window colour, and turn down the opacity. In the included themes, the dark version has a low opacity black background set. The light theme has a low opacity white background set. An opacity of 30-35% seems to give the best readability in most situations.

 

2. Rounded corners can be tweaked for the whole window, the search box and the selected result

 

Hover over any corner of the field you're interested in and drag to set the corner roundness.

 

3. A few important notes

 

• This feature is still in development, so there may be some more or less visible changes over the next little while
• The "Share on alfredapp.com" feature isn't yet suitable for these themes, as the site isn't set up to understand the new theme settings If you want to share your theme with a friend, use the "Export as file..." option instead.
• As usual, check out the change log in the Update tab of the preferences to see the full list of changes in this pre-release

 

 And now for some pretty pictures, here are the two themes in their full glory!

 

 

 

Cheers,

Vero

 

[Vero]

Also, feel free to share your new themes taking advantage of the Visual Effect here - we'd love to see them!

 

If you share them as individual threads, please make sure that you mention that they require 4.3+

 

Cheers,
Vero

[tzm41]

This is great! Looks perfect to me. Now if the icon can also get a makeover 😇 

[Chris Messina]

Some requests/issues...!

 

Here is the preview in the Alfred Appearance config:

 

 

But here is the actual window, which has an additional border highlight on it...? Shouldn't Alfred reflect that border in its preview?

 

 

I would also like the ability to round the scrollbar, to make it look like this (see how square these ends look in the first screenshot):

 

 

And when it comes to the result separator, it would be nice if it narrowed in width to match the result roundness, or else you're left with ugly looking lines that jut out:

 

 

Otherwise, exciting stuff!

Edited November 30, 2020 by chris
removed extraneous image

[Andrew]

@chris the borders is something I'm aware of and something I'll have to _simulate_ in the theme editor. Up until now, Alfred uses the same renderer for the theme editor as the actual window, but macOS adds those window borders when you set a visual effect view as the content view of an NSWindow. In the theme editor, I'm using the visual effects view, but as a view, so macOS doesn't render the borders.

 

I'm in two minds whether to either simulate it, or just add a note saying that macOS may add a border depending on configuration.

 

I'll add a note about the roundness on the scrollbar and also reduced separators, both valid additions 

[Osdril]

These themes look great!

Will they become the new standard "macOS" and "macOS Dark" themes now that Big Sur is out?

[Chris Messina]

@Andrew may I request that the corner radius be allowed to be 50% of the height of the search field (so that I can have a completely round search area)? I am trying to recreate this UI:

 

 

However, I can only get to this roundness (1)(2). It would also be nice if I could control the search text indent so I could more easily align the text with the icons.

 

Additionally, when I'm using a rounded area for the search text, the selected search text background overlaps the rounded edges in an awkward way (3).

 

 

Thanks!

[Andrew]

@chris I've relaxed the rounded corner constrains for the next build so you can have more rounded corners. Note that macOS may artificially constrain corners for visual effect views in odd ways if you make the rounded corners too large (in Alfred default no-results input box, with a short view).

 

I'll add a note to look at allowing horizontal search box padding too, as I agree that this is more significant now that you can round the corners.

[Andrew]

@chris if you update to the 4.3 b1199 pre-release, you can now set more rounded corners, and also add horizontal padding for the search field.

 

Also, the separator width now automatically lines up with the selected result roundness, which matches the macOS Spotlight visual behaviour, and Alfred automatically adds roundness to larger scroll indicators to better match macOS scrollbars.

[Chris Messina]

1 hour ago, Andrew said:

you can now set more rounded corners, and also add horizontal padding for the search field

 

Gorgeous!!

 

Rounded search box with indented text:

 

Rounded scrollbar:

 

Aligned horizontal separators:

Edited December 8, 2020 by chris

[mickaphd]

Hey @chrisdo you plan to share your themes? I'm not saying that Vero's ones are not good (!) but yours look great!

[Chris Messina]

2 hours ago, mickaphd said:

Hey @chrisdo you plan to share your themes? I'm not saying that Vero's ones are not good (!) but yours look great!

 

Oh! Thanks! They're all available on GitHub!

 

https://github.com/chrismessina?tab=repositories&q=theme

[Jono]

I'm wondering if what I'm wanting to achieve is possible 🤔

 

Here's my current theme

 

 

 

I was wanting to make the horizontal line at the top (just under the search field) a different opacity to all the others below it, and also full width like Spotlight.

 

 

Is that possible?

 

…also, the background colour for the selected text seems pretty high at the top. Is there any way to reduce that? 🙂

Edited December 13, 2020 by Jono

[Andrew]

@Jono this isn't possible, but I'll keep it in mind for if Alfred's theming gets a future overhaul

[Jono]

OK, thanks @Andrew!

[AndreProducer]

This may be a dumb question, but @Vero in the description posted themes that are named Experimental, I wonder why they are called experimental and whether there are versions of those exact two that are not experimental. 

Edited October 24, 2021 by AndreProducer

[Vero]

@AndreProducer At the time of the original posts in this thread, we were still experimenting with Visual Effect, but this is now part of Alfred's theming and working well.  

 

The themes would be the same, just with the Experimental word removed, so you can just grab those safely.

 

Cheers,
Vero

[Belfong]

I just want to add that those new roundness made Alfred look so sexy! Thank you!