sxyazi / yazi

💥 Blazing fast terminal file manager written in Rust, based on async I/O.
https://yazi-rs.github.io
MIT License
11.43k stars 266 forks source link

Improve `theme.toml` #1228

Open imsi32 opened 3 days ago

imsi32 commented 3 days ago

Please describe the problem you're trying to solve

Hi, recently I found yazi and I really like it so I decided to configure it to similar to my neovim preferences where I use lualine as my statustline. However, the customization system of the yazi is too strict that I couldn't even made one symbolic sided sections in both side of the statusline. For example, my bottom statusline looks like this in lualine: lualine Unlike this: yazi_line Secondly, seperator_style also affects text near them and foreground color of this texts is connect to the color of the mode which may cause unreadable text in some modes in some color schemes like this: un-set Thirdly, in most modern and old system tabs are listed in top-left corner of the screen which fills really strange in yazi where it is in right corner with other markers like selected, copied, etc. Moreover, it does not show multiple markers same time like selected and copied. tabs

Would you be willing to contribute this feature?

Describe the solution you'd like

As a new beginner user of yazi, I humbly request a better statusline configuration. To do that I do not recommend my listed issues fixed one by one because preferences changes vary to vary thus while it fix my problem, others still occurs other issues. Because of this, the system for the statusline must be flexible so I recommend lualine's system of configuration where each corner divided to 3 section and you can put zero, one or more component in them whatever you like. As a result, user of the yazi can use their app with their preferences.

Additional context

My last issue unlike other issues is more related to the color management of the modes. In my lualine config, I put components in 4 corner of my screen to change colors when I change mode for example, in the top-left corner there is tabs, in the top-right corner there is clock, in the bottom-left corner there is mode name and in the bottom-right corner there is place of the cursor. In other words, I can change the color of any components whenever I change the mode. This is done by in theme design like this.

sxyazi commented 3 days ago

However, the customization system of the yazi is too strict that I couldn't even made one symbolic sided sections in both side of the statusline

That's intentional, theme.toml is designed to provide users with a simple configuration facade, while more advanced customization is handled by the Lua plugin system - you can rewrite most of the UI to your liking using Lua, and here are some examples https://yazi-rs.github.io/docs/tips.

As for "Lualine-like Statusline Configuration", I don't have plans to add it directly to Yazi, but I'd love to see someone take an interest and implement it as a UI plugin. Yazi would just provide the necessary layout APIs, similar to how Neovim and Lualine work.

Closing as not in the plan

sxyazi commented 3 days ago

seperator_style also affects text near them and foreground color of this texts is connect to the color of the mode which may cause unreadable text in some modes in some color schemes like this

Perhaps we could improve the existing theme.toml by breaking it into multiple fields, but I'm not quite sure how to design it. This issue was also mentioned in another issue, but we need a better design. I'd be happy to discuss it further here if you're interested.

imsi32 commented 3 days ago

I will be glad if I can be any help. I think it will be good to divide that secondary area from mode area. Because it is connected with the mode area, adding normal, set and unset properties for that secondary area will be necessary.

Moreover, I think the main issue is with the separators as it has not already been using its style in separator close to the mode area. There are few things that can be done:

  1. Straightforward option, adding each and every possible to its own style which means for 3 mode, 2 area and 2 side, there will be total of 12 style.
  2. If sides (open and close) considered as a one in style section, it will reduce the total of styles to 6.
  3. If mode area's separators left as it is, there wouldn't need for that area's separator with styles. Thus, it will reduce the total of styles to 3. More specifically, secondary area's normal, set and unset mode's separators.
  4. If secondary area's separators styles works like the current mode area's separators style, separators will not need style properties.
  5. Another approach is adding properties for separator. If some properties like separator_follow_mode and separator_follow_secondary which are take boolean values exist, they can be used as a bridge between 4th option and 1st or 2nd option.
  6. If the modes are not considered it can greatly reduce the number of styles needed. Which means the other options can be applied without considering following modes styles.

In the end, I would recommend 4th because it is simplest one and will fill the needs for nearly all users. For comparing with lualine, I couldn't find a way to specifically set a unique color to separators. From what I understand it uses the component which are connected with it similar to the 4th option.

imsi32 commented 3 days ago

And for the color choosing, I would recommend using black as in terminal 16 colors in main area's foreground color and secondary area's background color as default. That's because unless user use light theme, it will be really best option. However, if the user selected their background color as black, the secondary area will mixed with the background. Also, it cannot have bright blue color because I checked some color schemes in here and I saw that most of the bright black color is not good with colors. Thus, I tried some colors in lualine with gruvbox color scheme and I think using black in both area's foreground, bright white in secondary area's background and mode area's background color as currently mode colors. It will be similar to this: blue_white_black

sxyazi commented 2 days ago

I would recommend 4th because it is simplest one and will fill the needs for nearly all users

What do they look like in the configuration file - how to name them? Naming has always been a headache for me.

sxyazi commented 2 days ago

That's because unless user use light theme

We can't ignore users with light themes, which is why I chose bright blue and bright red as backgrounds - I found that these colors adapt better to most terminals' default light and dark themes.

If we don't consider light theme users, then there's no need to use 16 colors; instead, we can use 256 colors, which usually yields better results. In fact, Yazi initially used 256 colors, but it was a disaster for light theme users, https://github.com/sxyazi/yazi/issues/149.

imsi32 commented 2 days ago

Here the before and after of the theme.toml file: Before: before

After 1st: after

After 2nd: after0

I don't know how it will affect if the name of the attributes changes. Thus, I also added a picture of version where mode area's attributes do not change.

The separators style is deleted as they will not be need.

I checked colors contract between each other in some websites and I also find a good examples in here. I think most distinct ones are white and black both foreground and background.

Like in the images, I think using black in both area's foreground, bright white in secondary area's background and mode area's background color as mode colors. However, as you pointed out if light theme user considered, in mode colors yellow and green colors should not be used because they are bright colors. Thus, changing the yellow color to red, purple, or cyan needs to be considered.