Add preview images to the themes menu

[tahayvr]

This PR adds a new script for elephant to display theme preview images in the menu.

Still trying to figure out how to disable the icons so they don't show up. Sharing this as a draft for feedback/help.

[dhh]

Oh yes, would love to get previews! Maybe @abenz1267 has a way for us to turn off icons but keep the image previews?

[abenz1267]

You can create a new item layout file and remove the icons in there.

Walker also allows creating actual grid layouts in git... If you prefer that over the preview pane.

[dhh]

Actual grid would be pretty sweet if we can get the aesthetics right with spacing/padding/text centering! Especially if there's four-way navigation with the arrows? Does the grid also still have filtering via input?

[abenz1267]

You'd need to create a item_menus:omarchythemes.xml and do what you want in there. You'd simply copy&paste the item.xml from the default theme and just remove the icon/image stuff.

[abenz1267]

Actual grid would be pretty sweet if we can get the aesthetics right with spacing/padding/text centering! Especially if there's four-way navigation with the arrows? Does the grid also still have filtering via input?

You can navigate in all directions via self-defined keybinds, arrows by default. It does not affect the regular search in any way.

This is the new symbols layout as an example.

[dhh]

Would love that! @tahayvr please do feel free to explore this. What I've noticed on other grids is that it's crucial that the previews are the same size and the text is properly aligned. Otherwise it can look messy quickly. Also curious to see whether our stock preview.png's work well if we have a 3x4 grid. Think we'll just have to feel it out.

[abenz1267]

Performance might be an issue. Ofc with the preview pane you only load 1 image at a time and not... all.

So you might wanna create actual fitting thumbnails.

[abenz1267]

i mean: just removing Icon = "applications-graphics" already gets rid of the icon btw.

[dhh]

Happy just to start with the preview pane version minus the icon. Then we could experiment with full grid in round 2.

[tahayvr]

i mean: just removing Icon = "applications-graphics" already gets rid of the icon btw.

This worked for removing the icons.

[dhh]

We'll need theme names to be human readable (no snake case, capitalization). And we'll need even spacing from the last character to the preview as there is from the first character to the left border and the preview to the right border. But otherwise this looks very promising!

[tahayvr]

One issue is that our previews don't have the same aspect ratio. I can fix this for built-in themes (update the files), but for installed community themes, it's out of our hands.

[dhh]

I think that's fine, actually. We should put out some guidelines for how to look the best with the extra themes.

But yeah, this now looks fantastic 🤘

[dhh]

One thing we should do is fix all the current preview.pngs. They're not all the same size/layout. We should just have the same applications open on all the themes and then take new screenshots.

Also, I fixed so the width is constant, but the preview is currently moving when I filter down the list. Would be great if we could fix that offset somehow.

[tahayvr]

I think the wide ones (16:9 ratio like Osaka Jade's preview) look better. I'll update the files with consistent size and layout.

[dhh]

I just did a new set. Will add.

[dhh]

Only thing missing is to keep the menu stable when you're filtering. Right now there's some zooming and moving going on.

[dhh]

Also, need to have a placeholder image for themes that do not ship with a preview.png, like monochrome: https://github.com/Swarnim114/omarchy-monochrome-theme

[LukasTrust]

Hello,
why not use a background image as a fallback if no preview image is found?
It could look something like this:

This way, there's always at least some visual preview for each theme, even if a dedicated preview file isn't available.

Edit: Here is the code i wrote, if you want to copy it.
-- Try to locate a preview image
local preview_cmd = "find -L '" .. theme_dir .. "/" .. theme_name ..
"' -maxdepth 2 -type f \( -name 'preview.png' -o -name 'preview.jpg' \) 2>/dev/null | head -n 1"
local handle = io.popen(preview_cmd)
local preview_path = handle:read("*l")
handle:close()

-- If preview image not found, look for the first image in backgrounds/
if not preview_path or preview_path == "" then
local backgrounds_cmd = "find -L '" .. theme_dir .. "/" .. theme_name ..
"/backgrounds' " ..
"-type f \( -iname '.png' -o -iname '.jpg' -o -iname '*.jpeg' \) 2>/dev/null | head -n 1"
local bg_handle = io.popen(backgrounds_cmd)
preview_path = bg_handle:read("*l")
bg_handle:close()
end

-- Now use preview_path as the Preview image

[dhh]

Good idea 👍

[tahayvr]

I updated the script to use first bg image as fallback for preview files.

[tahayvr]

Also replaced the spaces at the end of theme names with a 10px padding to the preview box. now the spacing between the image and the menu borders looks better.

[dhh]

Two small nits:

1. Menu is doing a very slight height adjustment right after opening.
2. We get a bit of a weird zoom effect on the image when you filter down to a shorter name.

Not sure we have control over #2, though? Maybe that's hardcoded? Is there a way to control the width of the preview image @abenz1267?

[abenz1267]

not at the moment

[dhh]

I fixed the height thing. Here's the slightly odd zoom issue. When/if Walker gets a way to control that we can incorporate:

screenrecording-2025-11-18_17-16-02.mp4

[dhh]

@tahayvr I don't see the background fallback working? Could you try with the monochrome theme: https://github.com/Swarnim114/omarchy-monochrome-theme.git

[dhh]

@tahayvr The padding around the preview image also looks off. Slimmer sides than top:

[tahayvr]

@tahayvr I don't see the background fallback working? Could you try with the monochrome theme: https://github.com/Swarnim114/omarchy-monochrome-theme.git

Did you restart walker?

[tahayvr]

@tahayvr The padding around the preview image also looks off. Slimmer sides than top:

I removed '@background' from '.preview' to get rid of that weird dark frame around the image. Also think the padding change was useless since we can't keep the image position fixed when images have different ratios and sizes.