Skip to content
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

Improve theme.toml #1228

Closed
1 task
imsi32 opened this issue Jun 27, 2024 · 9 comments
Closed
1 task

Improve theme.toml #1228

imsi32 opened this issue Jun 27, 2024 · 9 comments
Labels
feature New feature request

Comments

@imsi32
Copy link

imsi32 commented Jun 27, 2024

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?

  • Yes, I'll give it a shot

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.

@imsi32 imsi32 added the feature New feature request label Jun 27, 2024
@sxyazi
Copy link
Owner

sxyazi commented Jun 28, 2024

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 sxyazi closed this as not planned Won't fix, can't repro, duplicate, stale Jun 28, 2024
@sxyazi
Copy link
Owner

sxyazi commented Jun 28, 2024

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
Copy link
Author

imsi32 commented Jun 28, 2024

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
Copy link
Author

imsi32 commented Jun 28, 2024

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
Copy link
Owner

sxyazi commented Jun 28, 2024

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
Copy link
Owner

sxyazi commented Jun 28, 2024

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, #149.

@sxyazi sxyazi reopened this Jun 28, 2024
@sxyazi sxyazi changed the title Lualine-like Statusline Configuration Improve theme.toml Jun 28, 2024
@imsi32
Copy link
Author

imsi32 commented Jun 28, 2024

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.

@sxyazi
Copy link
Owner

sxyazi commented Sep 2, 2024

Tracked by #51

Copy link

github-actions bot commented Oct 3, 2024

I'm going to lock this issue because it has been closed for 30 days. ⏳
This helps our maintainers find and focus on the active issues. If you have found a problem that seems similar to this, please open a new issue and complete the issue template so we can capture all the details necessary to investigate further.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Oct 3, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
feature New feature request
Projects
None yet
Development

No branches or pull requests

2 participants