Jump to content

Alfred 4.3 Pre-release: Big Sur Theming Improvements


Vero
 Share

Recommended Posts

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!

 

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

 

window-blur-prefs.png

 

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!

 

big sur light.png

 

big sur dark.png

 

Cheers,

Vero

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Some requests/issues...!

 

Here is the preview in the Alfred Appearance config:

 

2084372752_CleanShot2020-11-29at22_16_44.png.abab4c1bdf55c5b878f46c911fd2bb92.png

 

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

 

1419571572_CleanShot2020-11-29at22_12.52@2x.thumb.png.112652e4339478750583b3b50a53059e.png

 

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):

 

2068240556_CleanShot2020-11-29at22_15.26@2x.png.d766b45ad9e14a6cff4e54f962bea278.png

 

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:

 

image.png.8d5789adc51f02790b80b681ced2eaa2.png

 

Otherwise, exciting stuff!

Edited by chris
removed extraneous image
Link to comment
Share on other sites

@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 :)

Link to comment
Share on other sites

@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:

 

IMG_1652.thumb.jpg.75ddd996d26597023d072382d2402625.jpg

 

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).

 

1832990401_CleanShot2020-12-05at19_47.14@2x.thumb.png.320d110e87bc8d8e000ca432846f6e36.png

 

Thanks!

Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

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

 

Here's my current theme

 

332722785_themealfred2.jpg.33cbbe6539cd626441f5cd752b769942.jpg

 

 

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.

 

2003634690_themespotlight.jpg.3b9450b5b39eeb0317d0e0dbe55d1e0e.jpg

 

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 by Jono
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...