Experimental theme support

[idursun]

I've done some work to enable theming support in jjui recently. My initial goal was to allow changing the foreground colour of some parts of the UI but it quickly evolved into something bigger than that. I spent way more time than I'd like to admit purely because it was so much fun!

I wrote an wiki page entry to explain how it works here: https://github.com/idursun/jjui/wiki/Themes

The most fun part for me was to prompt LLMs to come up with colour palettes based on the description in the wiki page.

Here's another example with "water" theme:

text = "#c0caf5"
dimmed = "#565f89"
"title" = { fg = "#73daca", bold = true }
error = "#f7768e"
success = "#9ece6a"
change_id = "#7aa2f7"
border = "#414868"

"selected" = { fg = "#c0caf5", bg = "#292e42", bold = true }
"menu selected" = { fg = "#c0caf5", bg = "#414868" }
"details selected" = { bg = "#792d41" }
"matched" = { fg = "#ff9e64", underline = true, bold = true }
"menu matched" = { fg = "#ff9e64", bold = true }

"shortcut" = { fg = "#ff9e64", bold = true }
"menu shortcut" = { fg = "#ff9e64" }
"help shortcut" = { fg = "#ff9e64" }
"status shortcut" = { fg = "#ff9e64" }

"source_marker" = { fg = "#1a1b26", bg = "#e0af68" }
"target_marker" = { fg = "#1a1b26", bg = "#f7768e" }

"status title" = { fg = "#1a1b26", bg = "#7aa2f7", bold = true }
"menu title" = { fg = "#1a1b26", bg = "#bb9af7", bold = true }

"confirmation text" = { fg = "#bb9af7", bold = true }
"confirmation selected" = { fg = "#1a1b26", bg = "#9ece6a", bold = true }
"confirmation dimmed" = "#565f89"
"help title" = { fg = "#73daca", bold = true, underline = true }
"help text" = "#c0caf5"
"revset title" = { fg = "#bb9af7" }
"revset text" = { fg = "#c0caf5" }
"details added" = "#9ece6a"
"details deleted" = "#f7768e"
"details modified" = "#e0af68"
"details renamed" = "#7aa2f7"

"preview" = { fg = "#c0caf5" }

Curious to hear your thoughts.

[vic]

looks amazing! Thanks for working on this.

Would be good to also have screenshots on the Themes wiki page.

One thing I'm wondering now, toml does not have something like "import" another file right ?
we'd have to implement that ourselves, I guess. I'm thinking I'd like to have different toml
files for each theme and then toggle them by switching the import line on the main jjui config toml.

We could also have a separate repo of themes based on base16 colors (or contribute a templates to these theme-generators for generating jjui toml files).

Do we have terminal color detection ? so you can specify a default light and dark theme ?

[idursun]

Hey, thanks!

[ui]
theme = "your-theme"

will load the theme file from $JJUI_CONFIG_FOLDER/themes/your-theme.toml. You can point your configuration to different files.

There's a colour detection, and if a theme is not specified jjui will load the default theme, which has a light and dark theme variant. Light is picked if the terminal has a light background and vice versa.

We could also have a separate repo of themes based on base16 colors (or contribute a templates to these theme-generators for generating jjui toml files).

Sure, but we can also use the wiki for people to share their themes, with a screenshot and the theme file.

[zerowidth]

Would you be open to including light and dark as selectors in the theme system? I often toggle between light and dark mode and losing the highlight_light/highlight_dark means I can't get a less obtrusive selection background.

Alternatively, allow a separate dark and light theme to be specified in the main config. I could do overrides that way too.

EDIT: #201

[vic]

Hey, I created a repo of (currently 462) jjui themes generated from base16 and base24 color schemes.

Here: https://github.com/vic/tinted-jjui

We can edit the template whenever the style format changes.

[idursun]

wow, that's pretty cool! Thanks for this @vic

Looks like it is all auto generated, which is great because theming system might change a little bit here and there.

[vic]

Yes, they are automatically generated from a template. And yes, we can adapt it as soon as we have changes on the theme system. :)

I've just improved support for dark/light variants on themes that support them and also better base24 colors handling.

[vic]

Most themes in there have recognizable names, so I don't think we have to bother with generating images, there's also a gallery from the tinted project that I linked in the repo readme, just if people want to look at colors or search for their favourite theme.