Alfred and pywal

[albert-ying]

Hi - sorry for putting this off-topic message here. I saw you tried to set alfred theme dynamically to match the theme generated by pywal. I'm wondering is that successful? Could you share some information on how to achieve that?

Thank you!

[typkrft]

Sure thing! Hope this helps!

1. Create a Theme in Alfred so that it generates a theme.json in ~/Library/Application\ Support/Alfred/Alfred.alfredpreferences/themes/THEMEFOLDER
2. Create a pywal template based on the theme.json file.
3. Run pywal. This will generate a theme using your template which you can find in ~/.cache/wal
4. Symlink that the generated theme back to ln -s ~/.cache/wal/YOUR_THEME ~/Library/Application\ Support/Alfred/Alfred.alfredpreferences/themes/THEME_FOLDER/theme.json
5. Optional: Bind running Pywal and restarting Alfred to a key with SKHD.

My pywal template as an example.

{{
    "alfredtheme" : {{
      "result" : {{
        "textSpacing" : 5,
        "subtext" : {{
          "size" : 12,
          "colorSelected" : "#FFFFFFFF",
          "font" : "VictorMono Nerd Font",
          "color" : "#FFFFFF7E"
        }},
        "shortcut" : {{
          "size" : 16,
          "colorSelected" : "#FFFFFFFF",
          "font" : "VictorMono Nerd Font",
          "color" : "{color6}FF"
        }},
        "backgroundSelected" : "{color2}8B",
        "text" : {{
          "size" : 18,
          "colorSelected" : "#FFFFFFFF",
          "font" : "VictorMono Nerd Font",
          "color" : "#FFFFFFCB"
        }},
        "iconPaddingHorizontal" : 4,
        "paddingVertical" : 3,
        "iconSize" : 40
      }},
      "search" : {{
        "paddingVertical" : 5,
        "background" : "#00000000",
        "spacing" : 8,
        "text" : {{
          "size" : 34,
          "colorSelected" : "#FFFFFFFF",
          "font" : "VictorMono Nerd Font",
          "color" : "#FFFFFFFF"
        }},
        "backgroundSelected" : "#45A9B3FF"
      }},
      "window" : {{
        "color" : "{color4}87",
        "paddingHorizontal" : 9,
        "width" : 671,
        "borderPadding" : 0,
        "borderColor" : "#0000007F",
        "blur" : 28,
        "roundness" : 10,
        "paddingVertical" : 8
      }},
      "credit" : "Brandon Shockley",
      "separator" : {{
        "color" : "#CBCBCBF3",
        "thickness" : 0
      }},
      "scrollbar" : {{
        "color" : "E5",
        "thickness" : 2
      }},
      "name" : "Wal"
    }}
  }}

And the Cached Version that's generated by pywal and symlinked back to your Alfred theme.

{
    "alfredtheme" : {
      "result" : {
        "textSpacing" : 5,
        "subtext" : {
          "size" : 12,
          "colorSelected" : "#FFFFFFFF",
          "font" : "VictorMono Nerd Font",
          "color" : "#FFFFFF7E"
        },
        "shortcut" : {
          "size" : 16,
          "colorSelected" : "#FFFFFFFF",
          "font" : "VictorMono Nerd Font",
          "color" : "#3DB0BCFF"
        },
        "backgroundSelected" : "#5E53A98B",
        "text" : {
          "size" : 18,
          "colorSelected" : "#FFFFFFFF",
          "font" : "VictorMono Nerd Font",
          "color" : "#FFFFFFCB"
        },
        "iconPaddingHorizontal" : 4,
        "paddingVertical" : 3,
        "iconSize" : 40
      },
      "search" : {
        "paddingVertical" : 5,
        "background" : "#00000000",
        "spacing" : 8,
        "text" : {
          "size" : 34,
          "colorSelected" : "#FFFFFFFF",
          "font" : "VictorMono Nerd Font",
          "color" : "#FFFFFFFF"
        },
        "backgroundSelected" : "#45A9B3FF"
      },
      "window" : {
        "color" : "#5F5CDF87",
        "paddingHorizontal" : 9,
        "width" : 671,
        "borderPadding" : 0,
        "borderColor" : "#0000007F",
        "blur" : 28,
        "roundness" : 10,
        "paddingVertical" : 8
      },
      "credit" : "Brandon Shockley",
      "separator" : {
        "color" : "#CBCBCBF3",
        "thickness" : 0
      },
      "scrollbar" : {
        "color" : "E5",
        "thickness" : 2
      },
      "name" : "Wal"
    }
  }

[albert-ying]

@typkrft Thank you! I will try it later. Also curious what else MacOS app did you managed to get worked with pywal. Now I have item2, vscode, Firefox (just found your theme yesterday, it's amazing), and zathura. Is there anything else?

[albert-ying]

It works! Thank you so much!

[typkrft]

Awseome! Glad it worked out for you. I use pywal for my spacebar and limelight/yabai setups. But you can use it all over the place. Discord, Vtop, nvim, vscode, and tons of cli programs, anywhere theme settings are stored in a easily accessed file.

[albert-ying]

It looks awesome, thank you! Some additional questions regarding to the poison theme itself:

1. I really like the behavior of the poison when there is only one tab, which hides everything. Is it possible to get the same behavior when multiple tabs are on (hide tabs)? Maybe through a shortcut or only show tabs when the mouse is on (like a zen mode).

2. Will this theme work on other browsers with few tweaks (for example, Vivaldi)?

[typkrft]

I am not really sure how Vivaldi works so I don't suspect it would work just dropped in. Probably a fair amount would have to be rewritten if not all of it. If I get time this week I'll see if I can create another version that hides all the tabs, but there wouldn't be a shortcut, because that would require much more than CSS. I need to do some updating on this theme regardless.

You might be able to create a vivaldi theme by sourcing the wal templates in a similar manner as Alfred. Also if you are not using pywalfox you should be.

[albert-ying]

Cool! I'm looking forward to that! It is fine if the tabs could not be toggled, as there are various ways to visualize the tabs provided by different plugins (e.g., b in tridactyl).

I'm using pywalfox. TBH, I just switched from Chrome to FF for the pywal support and this theme (I really hate the "traffic lights" on the window and Chrome doesn't allow me to remove it).

[typkrft]

You can play around with these. I am not aware of how to show the tabs how ever if you use this. You can still control tab between them, or maybe get around it with an extension.

You only need the #TabsToolbar section, but I've included other elements from a Stack Answer.

#TabsToolbar {
    visibility: collapse;
}

#titlebar {
    margin-bottom: -25px !important;
}

#titlebar-buttonbox {
    height: 32px !important;
}

#nav-bar {
    margin-right: 42px;
}

#main-window[sizemode="maximized"] #nav-bar {
    margin-right: 42px;
}

[albert-ying]

Thank you! It works. I now use the tree style tabs extension to temporarily toggle tabs from the side bar. So far so good! I will close this issue now!

[albert-ying]

Hi, just want to share this:

I tried your CSS modification for a while. The main problem is that I'm not able to toggle the address bar and toolbar when hovering over the tab. So I played with the css file for a while and figured out a workaround. I call it the minimal tabs which remains a pywal themed line on the top to indicate the tab. And I'm still able to toggle the address bar when I need to interact with some extension buttons.

The css code

#TabsToolbar {height: 6px !important;}
.tab-text {opacity: 0 !important;}
.tab-icon-image{display:none !important;}

Feel free to use it if you like!

[typkrft]

Hey thanks! It looks great by the way. Feel free to fork it and post it here https://firefoxcss-store.github.io/.

If you're interested, give this a spin. It combines the URL and Tab bar into one line and the is a better implantation overall. Still working on some theming odds and ends and cleaning up the file. This may or may not be useful to you if you are using Tree Style Tabs though.

EDIT: Code Removed. See comment below.

[typkrft]

Just in case anyone sees that code above and its broken state. Use this instead F L Y E R F O X

[albert-ying]

Hi, are you still using this Alfred theme script? It seems that it stop working since last update?

[typkrft]

I am not. I've settled into a few themes I like. But it should work still. I'm on the latest and just created a new folder here ~/Library/Application\ Support/Alfred/Alfred.alfredpreferences/themes/test played around with a theme and placed it in there and alfred picked it up without even restarting. Maybe create a theme in alfred to see if the template changed or something. This is a working theme you could compare to the template being generated.

{
  "alfredtheme" : {
    "result" : {
      "textSpacing" : 5,
      "subtext" : {
        "size" : 12,
        "colorSelected" : "#F5BF77FF",
        "font" : "VictorMono Nerd Font",
        "color" : "#C2A5E6FF"
      },
      "shortcut" : {
        "size" : 16,
        "colorSelected" : "#F5BF77FF",
        "font" : "VictorMono Nerd Font",
        "color" : "#55516EFF"
      },
      "backgroundSelected" : "#3C8EAEFF",
      "text" : {
        "size" : 18,
        "colorSelected" : "#F8F8F2FF",
        "font" : "VictorMono Nerd Font",
        "color" : "#F8F8F27F"
      },
      "iconPaddingHorizontal" : 4,
      "roundness" : 0,
      "paddingVertical" : 3,
      "iconSize" : 40
    },
    "search" : {
      "backgroundSelected" : "#A3CCFEFF",
      "paddingHorizontal" : 8,
      "spacing" : 4,
      "text" : {
        "size" : 34,
        "colorSelected" : "#000000FF",
        "font" : "VictorMono Nerd Font",
        "color" : "#F8F8F2FF"
      },
      "background" : "#282A3600",
      "roundness" : 0,
      "paddingVertical" : 5
    },
    "window" : {
      "color" : "#29263EFF",
      "paddingHorizontal" : 4,
      "width" : 778,
      "borderPadding" : 0,
      "borderColor" : "#0000007F",
      "blur" : 32,
      "roundness" : 3,
      "paddingVertical" : 4
    },
    "credit" : "Zeno Rocha",
    "separator" : {
      "color" : "#CBCBCBF3",
      "thickness" : 0
    },
    "scrollbar" : {
      "color" : "#FF79C6FF",
      "thickness" : 2
    },
    "name" : "Dracula"
  }
}

[albert-ying]

Oh I think it is because I changed the preference syncing location -- false alarm, thank you for your quick response!

Best, Albert

On Tue, Jun 28, 2022 at 11:35 PM Brandon @.***> wrote:

I am not. I've settled into a few themes I like. But it should work still. I'm on the latest and just created a new folder here ~/Library/Application\ Support/Alfred/Alfred.alfredpreferences/themes/test played around with a theme and placed it in there and alfred picked it up without even restarting. Maybe create a theme in alfred to see if the template changed or something. This is a working theme you could compare to the template being generated.

{ "alfredtheme" : { "result" : { "textSpacing" : 5, "subtext" : { "size" : 12, "colorSelected" : "#F5BF77FF", "font" : "VictorMono Nerd Font", "color" : "#C2A5E6FF" }, "shortcut" : { "size" : 16, "colorSelected" : "#F5BF77FF", "font" : "VictorMono Nerd Font", "color" : "#55516EFF" }, "backgroundSelected" : "#3C8EAEFF", "text" : { "size" : 18, "colorSelected" : "#F8F8F2FF", "font" : "VictorMono Nerd Font", "color" : "#F8F8F27F" }, "iconPaddingHorizontal" : 4, "roundness" : 0, "paddingVertical" : 3, "iconSize" : 40 }, "search" : { "backgroundSelected" : "#A3CCFEFF", "paddingHorizontal" : 8, "spacing" : 4, "text" : { "size" : 34, "colorSelected" : "#000000FF", "font" : "VictorMono Nerd Font", "color" : "#F8F8F2FF" }, "background" : "#282A3600", "roundness" : 0, "paddingVertical" : 5 }, "window" : { "color" : "#29263EFF", "paddingHorizontal" : 4, "width" : 778, "borderPadding" : 0, "borderColor" : "#0000007F", "blur" : 32, "roundness" : 3, "paddingVertical" : 4 }, "credit" : "Zeno Rocha", "separator" : { "color" : "#CBCBCBF3", "thickness" : 0 }, "scrollbar" : { "color" : "#FF79C6FF", "thickness" : 2 }, "name" : "Dracula" } }

— Reply to this email directly, view it on GitHub https://github.com/typkrft/Poison-Firefox-Theme/issues/2#issuecomment-1169498089, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOIS5MVIPGDHE5MJ7UDWTNTVRPAANANCNFSM5AQ7IRRQ . You are receiving this because you modified the open/close state.Message ID: @.***>