-
-
Notifications
You must be signed in to change notification settings - Fork 619
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Proposal] New theme definition spec #2297
Comments
I've recently been convinced that we should indeed devote more attention to this, and I'm happy to hear you'd like to take this up. My initial concern was that the UI of Zellij is very much in flux still. We'll likely be adding things to it in the future (just recently we added the swap layouts indicator on the bottom right of the screen, for example) and it might even change entirely. I would like to be able to have a spec that is coherent on the one hand as you mentioned, but also relatively future-proof (as is the case now). My suggestion for an approach here would be to provide configuration parameters for Zellij's graphical language rather than its graphical elements. An example would be |
what about some sort of hierarchical structure? so themes would provide colors for the generic stuff first and work their way down (if needed) and new features would just look correct with existing themes (most of the time) |
One of the things I'd like to do with the plugin systems is to allow plugin authors access to the Zellij UI elements. Meaning they would be able to render a For this reason I'd rather go with Otherwise - this issue is basically waiting for someone to pick it up. This would involve coming up with a spec for these requirements (mostly involving mapping the UI elements we currently have and their different states - eg. selected/unselected/etc.) and then implementing it. I would be happy to help out in the process as much as I can. |
@imsnif That makes sense, and i think UI elements should cover most cases. Because the current system of colors is really bad imo, for a few reasons; it is hard to know what each color is used for, and you can't change more specific stuff. My interest in this issue originally comes from wanting to set a different text color for the tab names then what the background is, which both use |
I just spent half an hour going back and forth trying to figure out (by bisecting), which of these color keywords is used for the border of unfocused panes, but it turns out it's none of them. I thought I was going crazy. EDIT: The color is taken from the terminal's palette! If enviroment colors (LS_COLORS?) are available to Zellij, like they appear to be here, it would be handy to be able to use them as color keywords in targeted palettes later on. |
Hey @cyberglot - are you still interested in working on this? It's of course understandable if life (or just anything else, really) got in the way, but if this is the case maybe let's see if someone else wants to have a go? |
I think at this point this issue is up for grabs. If anyone wants to work on this (be aware that this is a mid-large-ish task - so please only commit if you want to see this through), make your voice heard. |
Just as a note for anyone who is interested, apparently OSC strings may be used to change the them in standard terminal (see #2633). So even if the person wanting to find/implement a better theme spec may not want to do the OSC thing in the same time, it may be interesting to have some way to translate one to the other. Also I thay that… but I don’t know how this works so maybe I misunderstood something 😅 |
The issue with the current theming config has shown up with the new session manager #2747 . It uses the bg colour to highlight the currently selected session. Except the bg colour has been set for most themes to the colour you expect the default background to be, for nord this is #2e3440. Unsurprisingly this is the colour most people who want a consistent theme will have set the terminal background to, meaning it renders as invisible. I've changed it to be a much brighter colour so it works but it's hard to say what else uses the bg colour as it isn't very descriptive. |
It was "fixed" by using the background color because someone on discord did not see the selection on the default theme (and/or their terminal’s theme) 🤣. We all agree that a better theming is needed. But for now imsnif is working on others stuffs, I personally don’t use theme much so any proposal I could come up with will have flaws too. And the other devs don’t seems to be interested either. To advance this issue, we need a concrete proposal that imsnif (or someone else) can take, and implement "blindly". (Sure the proposal can be improved upon with discussions before that.) I like a lot the helix one as I understand it from the first message:
I think those points are a sane start. Then we will need to list every elements, maybe in the same way as the helix example:
I’m not really sure of all the elements from the top of my head, and we could have some extras for the plugins, maybe. Last thing, maybe we should also set the delimiter (the arrow, or as the Obviously, this message is not a full spec, but if you want to help, please use it as a draft if it help you ! |
Hey friends: first off thank you very much for your work on this multiplexer, since adopting it a month or so ago it's really magnified my productivity 🙇 Over the past week I've been looking into this issue and I think I will soon have something approaching a "walking skeleton" implementation of the design originally proposed up thread. The gist is (names subject to change obv):
A hypothetical KDL config using this setup could look like:
A few questions that came up in the process of working on it: Backward compatibility:It's definitely possible to keep existing user theme configurations rendering as expected on upgrade. This could be accomplished by making the default implementation for It seems less straightforward to have plugin code be backward compatible, since they make heavy use of the existing (De)serializationDeserialization from config seems to be entirely handled by the I think it's a nice UX to have the dynamic color names part of the theme block in configuration, but ideally the palette map itself would not be stored as a member of |
In the meantime can something be done about the unselected pane border color, like make it use the |
Hey @DeaconDesperado - still interested in working on this? |
@imsnif yessir, can probably have a draft pushed up in a few days. |
Nice! Let's start with just the spec, ok? Specifically just the UI components part. I'm not saying no to your other cool suggestions of color aliases and such but I'd like to start small (and also with a spec before we start coding) and work our way from there. We have also introduced UI components since this suggestion came to be, which should make the implementation a little easier: https://zellij.dev/documentation/plugin-ui-rendering#using-the-built-in-ui-components |
Sounds good, no worries. Mostly just started the implementation in the previous comments to build my own understanding: totally amenable to change. When I get back to the desk I'll draft up a specification and we can work together to refine it. |
A proposal based upon the UI Components as well as some of the comments in this thread. Hoping this is a good place to start! A few notes in the spirit of keeping it simple to start 😄 :
UI ComponentsThese correspond directly to the packaged UI components for use in plugins. Each of these settings accept five If omitted, If any of the remaining are omitted, they will default to the corresponding value of
Core componentsThese correspond to other components of the Zellij UI that would benefit from consistent styling, but don't yet have reusable UI components.
|
From reading your proposal it is unclear to me if we can set a component (lets say I bet money that most, if not everyone, who sets custom colors in both their terminal and zellij, want to have both themes match (same greens, etc.) and that would save time. |
@oredaze Definitely! (I count myself among that userbase). Might be unclear by design though presently? I want to respect @imsnif's request that we first align on enumerating the UI elements and account for how the index-based contextual colors for them would behave. The "default to your terminal" behavior described for I do think we could support your use case of explicitly setting any color to your terminal's when implementing the Configuration + KDL schema. Similar in spirit the idea of having named color aliases in the config, we could reserve a subset of names (probably the same ones from the existing |
Hey @DeaconDesperado - great (and fast!) work. Some comments:
|
|
Would you like to write up a revised spec with all our decisions (unless there are more questions?) so that you can start implementing? |
I'll rewrite it updated with these changes later today. Thanks! |
UI ComponentsThese correspond directly to the packaged UI components for use in plugins. Each of these settings accept six
If omitted, If any of the remaining are omitted, they will default to the corresponding value of
FramesThese correspond to the stroke around a pane, it's label, and the exit code messages shown in the case of As these are text / foreground only elements, they accept only five colors:
Settings:
|
Hey @DeaconDesperado - this looks great. I left some minor comments below, but I think we're good to start implementing. I suggest you start with the UI components themselves (you can test with some screens in the session-manager, though note that not everything was moved to the ui components yet), and then decide whether it will be less work to move all plugins to use the UI components or to apply these colors to the elements not yet using the UI components. Up to you though. First and foremost though - whatever we do we must make sure the current UI/UX and behavior are kept exactly the same and that old themes will still work. Let me know if you have any questions (and you are of course invited to chat about it on Discord/Matrix - my availability might be a little higher there). Good luck! Looking forward to seeing this implemented.
Some terminals don't support true color, so I think it would be best to keep the current behavior: if anything is omitted it defaults to the fixed color it has now (while these may not be the most beautiful, they were carefully chosen for readability and care was taken not to use the system colors for the same reason).
Same here. It's also good not to mix things, as a default text background for example is not the same as a default ribbon background (selected or unselected). But this might just be misunderstanding your intention. I just want to make sure we're on the same page here before the implementation. |
Agree, certainly enough here to get started on implementation, which I can spend some cycles on today
I think this might be where the previous points about the configuration implementation and the possibility of aliases become relevant? I want to be mindful that we're trying to avoid swelling the scope here but it does seem like a way we could secure backward compatibility? My expectation had been after doing some hacking that the best way to keep existing themes working would be to make the 17 existing color settings themselves named aliases that default to their assumed values. Assignments to the UI elements listed out in the specification we created could then be done by name. The default mapping for those could provide the names directly as they appear to today To use an example, the
Since black and green are the current assignments for selected base and background, and the remaining four are the set emphases. Other named colors could be added to the above since effectively the names themselves just become labels (similar to the suggestion in the OP). It does introduce another validation invariant insofar as all the named colors set must exist in the theme's palette, but this could probably be tested for early / fail fast in config parsing (and would be met by definition for existing themes per above). This also ensures support for existing configs that will lack kdl blocks for the UI assignments entirely, we can statically supply the above as a default for all the UI elements:
Agreed, will amend that. |
Hmm... I'm not 100% convinced here tbh. While I totally get this will be an elegant solution, I feel from the user's perspective it might be a bit odd. Why these specific aliases for colors? Can I make my own custom aliases? Why does I feel it will be clearer if we add the element theming on top of the previous specification so that it will override it if it exists. I also think this will be considerably less work. |
Yes, I suppose there is some risk of user's perceived ambiguity in the labels with that approach: A burden of explanation as to why historically some color names are special and appear in the example themes, that you can add new ones to the list, etc... The reason I felt a slightly inclined towards it is that the only backward-compatible alternatives I could find involve keeping the former Since that added complexity affects all plugin authors, it felt like a good case where the implementer of the styles "taking the pain early" might be a good tradeoff by pushing all the color labelling downwards into a config-only concern. Also considering the comments up thread propose a similar UX, might be desirable/familiar from some user's standpoint. That said, I certainly don't feel strongly and can draft up the version that just uses an override (assuming I've understood it correctly). It is possible my impression here might be based off a slightly outdated version of the code that made less direct usage of the reusable UI components. |
So, the protobuffers unfortunately cannot be changed - only added to (otherwise we'll be breaking the compatibility of old plugins). I really think there should be a separation between the old "legacy" themes and the new ones. I think this separation should be part of the plugin contract. I'm very much into providing color aliases to make things easier, but I don't want to mix this with the old themes. I feel it will just be more confusing and difficult to explain. |
Makes total sense, I don't know how I overlooked that consideration 😬 . I think we're aligned then and I have what's needed to make progress on this for now. Thanks! |
Looking forward to seeing this implemented! Let me know if you have any questions (here or on Discord/Matrix, as you wish). |
Sorry for the delay on this: made good progress on it so far and should have some time to wrap it up in the next week. Thanks! |
Draft PR is up! I left a (somewhat long, sorry!) outline of the open questions, maybe we can continue with review there. Thanks! |
Quick heads up: I updated the draft this week to incorporate some of the feedback. |
Thank god I found this thread. I've also spent a lot of time trying to customize ZJ and couldn't get to a result I like. I'm eager to this PR from @DeaconDesperado merged. Thanks, man! |
As pointed out in issue #2160, the theme definition spec doesn't follow any rules besides “green is the main colour for some reason”. When scrolling through the theme gallery page, I thought the same image was mistakenly being rendered for all themes. But no, they're all green-biased.
Here's some pictures of what I had to do to restore the dracula theme vibes:
(It's important to notice that the current dracula theme absolutely follows a coherent implementation given zellij's interface.)
While it works, it's highly confusing and frustrating, and I believe the dev experience here could be vastly improved. For single file configurations or scripts, I use helix, and I've just noticed that they have a pretty good spec for themes:
(code stolen from catppuccin/helix)
I believe it could be greatly improved by stealing helix's interface. I'd be happy to write down a spec that works for zellij's current UI and implement it if the authors/maintainers are happy with my suggestion.
The text was updated successfully, but these errors were encountered: