Add preview images to the themes menu (#3444)

* Add new script for themes menu

* remove icons from the themes menu

* Make theme titles human readable and add spacing at the end

* Migrate to using a link for the new menu generator

* Retain consistent width

But we still do have movement when filtering the menu down to a
shorter-than-longest name. Should try to stabilize that.

* Update all previews to 2K resolution and same dimensions

* Update script to use first bg file if theme preview file doesn't exist

* Add padding to preview box instead of spaces to theme name

* Consistent formatting/indenting

* Prevent height jump

* Revert padding change and remove background color

---------

Co-authored-by: David Heinemeier Hansson <david@hey.com>

bin/omarchy-menu

@@ -154,12 +154,7 @@ show_style_menu() {
 }
 
 show_theme_menu() {
-  theme=$(menu "Theme" "$(omarchy-theme-list)" "" "$(omarchy-theme-current)")
+  omarchy-launch-walker -m menus:omarchythemes --width 800 --minheight 400
-  if [[ "$theme" == "CNCLD" || -z "$theme" ]]; then
-    back_to show_style_menu
-  else
-    omarchy-theme-set "$theme"
-  fi
 }
 
 show_font_menu() {

default/elephant/omarchy_themes.lua

@@ -0,0 +1,70 @@
+--
+-- Dynamic Omarchy Theme Menu for Elephant/Walker
+--
+Name = "omarchythemes"
+NamePretty = "Omarchy Themes"
+
+-- The main function elephant will call
+function GetEntries()
+  local entries = {}
+  local theme_dir = os.getenv("HOME") .. "/.config/omarchy/themes"
+
+  -- First, get all theme directories
+  local find_dirs_cmd = "find -L '" .. theme_dir .. "' -mindepth 1 -maxdepth 1 -type d 2>/dev/null"
+
+  local handle = io.popen(find_dirs_cmd)
+  if not handle then
+    return entries
+  end
+
+  for theme_path in handle:lines() do
+    local theme_name = theme_path:match(".*/(.+)$")
+
+    if theme_name then
+      -- find preview image
+      local find_preview_cmd = "find -L '"
+        .. theme_path
+        .. "' -maxdepth 1 -type f \\( -name 'preview.png' -o -name 'preview.jpg' \\) 2>/dev/null | head -n 1"
+      local preview_handle = io.popen(find_preview_cmd)
+      local preview_path = nil
+
+      if preview_handle then
+        preview_path = preview_handle:read("*l")
+        preview_handle:close()
+      end
+
+      -- If no preview found, use first image from backgrounds folder
+      if not preview_path or preview_path == "" then
+        local bg_cmd = "find -L '"
+          .. theme_path
+          .. "/backgrounds' -maxdepth 1 -type f \\( -iname '*.png' -o -iname '*.jpg' -o -iname '*.jpeg' \\) 2>/dev/null | head -n 1"
+        local bg_handle = io.popen(bg_cmd)
+        if bg_handle then
+          preview_path = bg_handle:read("*l")
+          bg_handle:close()
+        end
+      end
+
+      if preview_path and preview_path ~= "" then
+        local display_name = theme_name:gsub("_", " "):gsub("%-", " ")
+        display_name = display_name:gsub("(%a)([%w_']*)", function(first, rest)
+          return first:upper() .. rest:lower()
+        end)
+        display_name = display_name .. "  "
+
+        table.insert(entries, {
+          Text = display_name,
+          Preview = preview_path,
+          PreviewType = "file",
+          Actions = {
+            activate = "omarchy-theme-set " .. theme_name,
+          },
+        })
+      end
+    end
+  end
+
+  handle:close()
+  return entries
+end
+

default/walker/themes/omarchy-default/style.css

@@ -113,5 +113,4 @@ child:selected .item-box * {
 }
 
 .preview {
-  background: @background;
 }

migrations/1763393133.sh

@@ -0,0 +1,5 @@
+echo "Link new theme picker config"
+
+mkdir -p ~/.config/elephant/menus
+ln -snf $OMARCHY_PATH/default/elephant/omarchy_themes.lua ~/.config/elephant/menus/omarchy_themes.lua
+omarchy-restart-walker