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

Make fleet-dark accurate to the official theme #5605

Merged
merged 4 commits into from
Feb 6, 2023

Conversation

kirawi
Copy link
Member

@kirawi kirawi commented Jan 20, 2023

Objective

The current palette for the theme didn't use the official palette, and some scopes used the wrong colors. The contrast between the cursorline and comments also caused eye strain.

Solution

I copied the palette from dark.json in the themes folder, and reworked the theme to reflect the official one. I'm a bit displeased with the color for type.enum.variant, which the official theme doesn't highlight, as well as the contrast between variables.builtin and the background (for which I preferred the old color).

Fleet vs. new fleet-dark (top) vs. old fleet-dark (bottom)

Capture
Capture1


Changelog

updated fleet-dark's palette to be identical to the one in the official theme

@kirawi
Copy link
Member Author

kirawi commented Jan 20, 2023

\cc @krfl

@kirawi kirawi added the A-theme Area: Theme and appearence related label Jan 20, 2023
@archseer
Copy link
Member

Comparison screenshots?

@kirawi
Copy link
Member Author

kirawi commented Jan 20, 2023

Yep, I've updated the description with them.

@kirawi kirawi marked this pull request as ready for review January 20, 2023 15:15
@kirawi kirawi added the S-waiting-on-review Status: Awaiting review from a maintainer. label Jan 20, 2023
@krfl
Copy link
Contributor

krfl commented Jan 21, 2023

@kirawi Thank you for taking the time to do all this work.

I have three comments:

  1. The light grey background on the horizontal divider used by the pickers looks a little out of place compared to the rest of the theme.

Horizontal divider

  1. The curly underlines were just changed in Change built-in themes to use curly underlines #5419. Official Fleet uses thick straight lines to underline errors. My understanding was that all themes that uses underlines should use curly underlines and I see that these were removed by your update. If we are going to show underlines, then it's going to be a compromise. It would be great to get a final confirmation on this. @pascalkuthe?
    (old fleet_dark on the left, new fleet_dark on the right)

Screenshot 2023-01-21 at 09 08 22

  1. Please do add yourself to the list of contributors :)

@kirawi kirawi force-pushed the fleet=dark branch 2 times, most recently from c922390 to 96fc422 Compare January 21, 2023 22:20
@kirawi
Copy link
Member Author

kirawi commented Jan 21, 2023

Thanks for the review! I didn't notice the background nor the missing underline for diagnostics. Personally, I'm using Yellow 30 for ui.cursor.match because the blue was too low-contrast, but it still uses Blue in this PR.

@kirawi kirawi force-pushed the fleet=dark branch 2 times, most recently from 78c0302 to f9c0d64 Compare January 21, 2023 22:24
"diagnostic.error" = { underline = { color = "red_error", style = "curl" } }
"ui.background" = { bg = "Gray 10" } # .separator
"ui.statusline" = { fg = "Gray 120", bg = "Gray 10" } # .inactive / .normal / .insert / .select
# "ui.statusline.normal" = { fg = "lightest", bg = "darker"}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I commented out these since I didn't know what would be good colors.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
# "ui.statusline.normal" = { fg = "lightest", bg = "darker"}
"ui.statusline" = { fg = "Gray 120", bg = "Gray 20" }
"ui.statusline.insert" = { bg = "Blue 80" }
"ui.statusline.select" = { bg = "Yellow 40" }

I think it's important to separate fleet features from helix features and just make an educated guess at what people will prefer. Fleet relies heavily on blue, so I think it will be a safe and familiar color for insert mode.

Yellow 40 or Green 40 might work too. The yellow is darker and warmer and reminds me of vim, but the green might be more in the style of fleet. What do you think?

Copy link
Contributor

@krfl krfl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would very much to know whether all themes should use curly lines or not, because that's the understanding I got from #5419

Also, I think that Gray 80 for hints might be too subtle? It's not that it's hard to see or read, but I feel like it should pop a lot more.

Here i have the old theme on the left and this update on the right. Also a comparison screenshot of fleet below.
diagnostic

Screenshot 2023-01-23 at 00 36 02

@kirawi
Copy link
Member Author

kirawi commented Jan 23, 2023

IIRC curly underlines were only applied to all themes that didn't explicitly specify the line type.

@pascalkuthe
Copy link
Member

pascalkuthe commented Jan 23, 2023

I think the curly part is less important (it looks nice but for tgis theme I can see that the continous lines make sense to match the original) as long as the underlines are colored so its possible to tell whether we are looking at a warning or an error.

@kirawi
Copy link
Member Author

kirawi commented Jan 23, 2023

I checked the source again, and it looks like Gray 80 is the color Fleet uses. Do you want to diverge from the official theme and use a higher contrast color?
dark.json.txt

@krfl
Copy link
Contributor

krfl commented Jan 23, 2023

I checked the source again, and it looks like Gray 80 is the color Fleet uses. Do you want to diverge from the official theme and use a higher contrast color?
dark.json.txt

I agree that Gray 80 is correct in terms of matching what Fleet uses. I also believe that the statusbar is more important in Helix than in Fleet. The answer depends on whether you view the theme as an adaptation for Helix or as a copy of Fleet Dark.

Since I'm so torn, I'll let you decide. I will be okay either way. Promise :)

@kirawi
Copy link
Member Author

kirawi commented Jan 24, 2023

Personally, I feel that it should be accurate to the official theme so it's not jarring for users. Users can customize the theme if they prefer :P

@kirawi
Copy link
Member Author

kirawi commented Jan 24, 2023

Secondary selection highlighting is actually pretty bad, so I'll have to fix that before this could get merged.

@kirawi
Copy link
Member Author

kirawi commented Jan 24, 2023

Fixed. I misread 50 as 80.

@the-mikedavis the-mikedavis merged commit fb14913 into helix-editor:master Feb 6, 2023
@kirawi kirawi deleted the fleet=dark branch February 7, 2023 02:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A-theme Area: Theme and appearence related S-waiting-on-review Status: Awaiting review from a maintainer.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants