mr-pennyworth/alfred-extra-pane

Transparent Alfred themes aren't supported

Closed this issue · 9 comments

I just downloaded the newest release alfred-better-dictionaries, but I've been unable to get the extra pane to show up at all. I can see that the application shows up in Activity Monitor, and I can even watch the cpu usage go up when I use the workflow.

M2 Macbook
macOS 13.6.1
Alfred 5.5 [2257]
alfred-better-dictionaries 0.2.14

Quitting Alfred and restarting it gets the pane to show up, but it's not matching the theme properly

Screenshot 2024-06-27 at 1 23 00 PM

This is a custom theme but the side pane looks the same with the default themes

Closing AlfredExtraPane from Activity Monitor got the panel to show up and be readable, but it reverted back to gray after a couple lookups. I closed AlfredExtraPane again, which fixed it, then I tried to break it intentionally, but couldn't. Finally, as I was trying to take a screenshot (since it still wasn't matching and looked the same regardless of theme), it reverted to gray and has stayed that way. Now, restarting either Alfred or AlfredExtraPane seems to have no effect.

Thanks for the report @willdhorn!
Strange bug! 🤔
Can you share the theme with me?
(Right click on the theme, and then Export as File...)
image

Sure! Github won't let me attach it as file, but here's the json:

{
  "alfredtheme" : {
    "result" : {
      "textSpacing" : 4,
      "subtext" : {
        "size" : 16,
        "colorSelected" : "#00C0ABFF",
        "font" : "Avenir Light Oblique",
        "color" : "#96ACB777"
      },
      "shortcut" : {
        "size" : 23,
        "colorSelected" : "#FF286DFF",
        "font" : "Avenir Black",
        "color" : "#ACBEC5FF"
      },
      "backgroundSelected" : "#1B272CFF",
      "text" : {
        "size" : 24,
        "colorSelected" : "#00D5BDFF",
        "font" : "Avenir Medium",
        "color" : "#ACBEC5FF"
      },
      "iconPaddingHorizontal" : 14,
      "roundness" : 10,
      "paddingVertical" : 4,
      "iconSize" : 40
    },
    "search" : {
      "backgroundSelected" : "#577E8CFF",
      "paddingHorizontal" : 14,
      "spacing" : 9,
      "text" : {
        "size" : 30,
        "colorSelected" : "#FEFFFFFF",
        "font" : "GoMono Nerd Font",
        "color" : "#FEFFFFFF"
      },
      "background" : "#1B272CFF",
      "roundness" : 10,
      "paddingVertical" : 4
    },
    "window" : {
      "color" : "#1836414F",
      "paddingHorizontal" : 5,
      "width" : 673,
      "borderPadding" : 0,
      "borderColor" : "#131313FF",
      "blur" : 0,
      "roundness" : 14,
      "paddingVertical" : 5
    },
    "credit" : "Will",
    "visualEffectMode" : 2,
    "separator" : {
      "color" : "#223238FF",
      "thickness" : 1
    },
    "scrollbar" : {
      "color" : "#FF286DFF",
      "thickness" : 2
    },
    "name" : "MaterialLike"
  }
}

Thanks @willdhorn!
I installed the theme and I see the same issue that you're having.
The extra pane doesn't support transparency.
Lemme see if I can (from most preferred to least preferred):

  1. Add support for transparency.
  2. Display a warning when a transparent theme is detected.
  3. Add the limitation to the readme.

Using this place as an image pastebin 🤷🏻‍♂️
image
image
image
image
image

Hi @mr-pennyworth, can you please share the workflows on the screenshots that work with Alfred ExtraPane? They look awesome!

@snam24 those screenshots are for "Google Search" workflow.
For details, check out the tutorial: https://github.com/mr-pennyworth/alfred-extra-pane#tutorial-search-google-as-you-type

Here's the workflow:
Google Search.zip