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.

Sign up for GitHub

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

Jump to bottom

add gruvbox skin #335

Closed
basbebe opened this issue Jan 31, 2021 · 19 comments
Closed

add gruvbox skin #335

basbebe opened this issue Jan 31, 2021 · 19 comments

Comments

@basbebe
Copy link
Contributor

basbebe commented Jan 31, 2021

I do not know if or when I would get to do this myself so I can't make any commitments.

But I would very much appreciate a gruvbox skin / theme.
@basbebe
Copy link
Contributor Author

basbebe commented Feb 3, 2021

this is how far I got until now.

I took inspiration from exa, bat and kakoune

I took codes are from gruvbox-contrib:
https://github.com/morhetz/gruvbox-contrib/blob/master/color.table

It would be great to have a gruvbox syntax theme.
I think bat uses the same library for that (?) – they included gruvbox here:
sharkdp/bat#976

	skin: {
		default: rgb(235, 219, 178) rgb(40, 40, 40) / rgb(189, 174, 147) rgb(40, 40, 40)
		tree: rgb(168, 153, 132) None / rgb(102, 92, 84) None
		file: None None / None  None Italic
		directory: rgb(69, 133, 136) None Bold / rgb(131, 165, 152) None
		exe: rgb(184, 187, 38) None
		link: rgb(104, 157, 106) None
		pruning: rgb(124, 111, 100) None Italic
		perm__: None None
		perm_r: rgb(215, 153, 33) None
		perm_w: rgb(204, 36, 29) None
		perm_x: rgb(152, 151, 26) None
		owner: rgb(215, 153, 33) None Bold
		group: rgb(215, 153, 33) None
		count: rgb(69, 133, 136) rgb(50, 48, 47)
		dates: rgb(168, 153, 132) None
		sparse: rgb(250, 189,47) None
		content_extract: rgb(168, 153, 132) None Italic
		content_match: rgb(189, 174, 147) None Bold
		git_branch: rgb(251, 241, 199) None
		git_insertions: rgb(152, 151, 26) None
		git_deletions: rgb(190, 15, 23) None
		git_status_current: rgb(60, 56, 54) None
		git_status_modified: rgb(152, 151, 26) None
		git_status_new: rgb(104, 187, 38) None Bold
		git_status_ignored: rgb(213, 196, 161) None
		git_status_conflicted: rgb(204, 36, 29) None
		git_status_other: rgb(204, 36, 29) None
		selected_line: None rgb(60, 56, 54) / None rgb(50, 48, 47)
		char_match: rgb(250, 189, 47) None
		file_error: rgb(251, 73, 52) None
		flag_label: rgb(189, 174, 147) None
		flag_value: rgb(211, 134, 155) None Bold
		input: rgb(251, 241, 199) None / rgb(189, 174, 147) None Italic
		status_error: rgb(213, 196, 161) rgb(204, 36, 29)
		status_job: rgb(250, 189, 47) rgb(60, 56, 54)
		status_normal: None rgb(50, 48, 47) / None None
		status_italic: rgb(211, 134, 155) rgb(50, 48, 47) Italic / None None
		status_bold: rgb(211, 134, 155) rgb(50, 48, 47) Bold / None None
		status_code: rgb(251, 241, 199) rgb(50, 48, 47) / None None
		status_ellipsis: rgb(251, 241, 199) rgb(50, 48, 47)  Bold / None None
		purpose_normal: None None
		purpose_italic: rgb(177, 98, 134) None Italic
		purpose_bold: rgb(177, 98, 134) None Bold
		purpose_ellipsis: None None
		scrollbar_track: rgb(80, 73, 69) None / rgb(50, 48, 47) None
		scrollbar_thumb: rgb(213, 196, 161) None / rgb(102, 92, 84) None
		help_paragraph: None None
		help_bold: rgb(214, 93, 14) None Bold
		help_italic: rgb(211, 134, 155) None Italic
		help_code: rgb(142, 192, 124) rgb(50, 48, 47)
		help_headers: rgb(254, 128, 25) None Bold
		help_table_border: rgb(80, 73, 69) None
		preview: rgb(235, 219, 178) rgb(40, 40, 40) / rgb(235, 219, 178) rgb(40, 40, 40)
		preview_line_number: rgb(124, 111, 100) None / rgb(124, 111, 100) rgb(40, 40, 40)
		preview_match: None rgb(80, 73, 69) Bold
		hex_null: rgb(189, 174, 147) None
		hex_ascii_graphic: rgb(213, 196, 161) None
		hex_ascii_whitespace: rgb(152, 151, 26) None
		hex_ascii_other: rgb(254, 128, 25) None
		hex_non_ascii: rgb(214, 93, 14) None
	}

@Canop
Copy link
Owner

Canop commented Feb 3, 2021 •
edited
Loading

I don't know if it's finished but it's definitely the basis for a very good skin!

image

image

It looks ok with the default syntect theme:

image

Among the minor things which IMO need tuning, content search doesn't feel readable enough:

image

@basbebe
Copy link
Contributor Author

basbebe commented Feb 3, 2021

Among the minor things which IMO need tuning, content search doesn't feel readable enough:

yeah I didn't want to make it too "loud" / "noisy". But some fine-tuning may be required.
Also git branch name etc.

It looks ok with the default syntect theme:

yes but I think there is also a gruvbox theme for syntect (or a port)

@Canop
Copy link
Owner

Canop commented Feb 3, 2021

A thing I notice: directories are less visible than files, at least on my screen. It makes the structure a little less visible. Contrast of directories should be greater IMO.

@Canop
Copy link
Owner

Canop commented Feb 4, 2021 •
edited
Loading

@basbebe I'd like to add your skin to the skin page of the site ( https://dystroy.org/broot/skins/ ) with a link to here so that users may discuss evolutions. Is it OK for you ?

@basbebe
Copy link
Contributor Author

basbebe commented Feb 4, 2021

A thing I notice: directories are less visible than files, at least on my screen. It makes the structure a little less visible. Contrast of directories should be greater IMO.

for me their visibility seems fine, but I guess that monitor settings (and type) play a big role here potentially as well as personal preferences and conditioning.

@basbebe I'd like to add your skin to the skin page of the site ( https://dystroy.org/broot/skins/ ) with a link to here so that users may discuss evolutions. Is it OK for you ?

sure, of course!

If I get to it, I will address the things you mentioned and also those that I still think not optimal.

And if someone else has ideas for better version, that would be great of course!

@Canop
Copy link
Owner

Canop commented Feb 4, 2021

The Gruvbox skin is now featured here: https://dystroy.org/broot/skins/

@basbebe
Copy link
Contributor Author

basbebe commented Feb 5, 2021

have an updated version, what do you think?

https://github.com/basbebe/.dotfiles/blob/master/.config/broot/conf.hjson

	skin: {
		default: rgb(235, 219, 178) rgb(40, 40, 40) / rgb(189, 174, 147) rgb(40, 40, 40)
		tree: rgb(168, 153, 132) None / rgb(102, 92, 84) None
		file: None None / None  None Italic
		directory: rgb(131, 165, 152) None Bold / rgb(69, 133, 136) None
		exe: rgb(184, 187, 38) None
		link: rgb(104, 157, 106) None
		pruning: rgb(124, 111, 100) None Italic
		perm__: None None
		perm_r: rgb(215, 153, 33) None
		perm_w: rgb(204, 36, 29) None
		perm_x: rgb(152, 151, 26) None
		owner: rgb(215, 153, 33) None Bold
		group: rgb(215, 153, 33) None
		count: rgb(69, 133, 136) rgb(50, 48, 47)
		dates: rgb(168, 153, 132) None
		sparse: rgb(250, 189,47) None
		content_extract: rgb(189, 174, 147) None Italic
		content_match: rgb(250, 189, 47) None Bold
		git_branch: rgb(250, 189, 47) None Italic
		git_insertions: rgb(152, 151, 26) None
		git_deletions: rgb(190, 15, 23) None
		git_status_current: rgb(60, 56, 54) None
		git_status_modified: rgb(152, 151, 26) None
		git_status_new: rgb(104, 187, 38) None Bold
		git_status_ignored: rgb(213, 196, 161) None
		git_status_conflicted: rgb(204, 36, 29) None
		git_status_other: rgb(204, 36, 29) None
		selected_line: None rgb(60, 56, 54) / None rgb(50, 48, 47)
		char_match: rgb(250, 189, 47) None
		file_error: rgb(251, 73, 52) None
		flag_label: rgb(189, 174, 147) None
		flag_value: rgb(211, 134, 155) None Bold
		input: rgb(251, 241, 199) None / rgb(189, 174, 147) None Italic
		status_error: rgb(213, 196, 161) rgb(204, 36, 29)
		status_job: rgb(250, 189, 47) rgb(60, 56, 54)
		status_normal: None rgb(50, 48, 47) / None None
		status_italic: rgb(211, 134, 155) rgb(50, 48, 47) Italic / None None
		status_bold: rgb(211, 134, 155) rgb(50, 48, 47) Bold / None None
		status_code: rgb(251, 241, 199) rgb(50, 48, 47) / None None
		status_ellipsis: rgb(251, 241, 199) rgb(50, 48, 47)  Bold / None None
		purpose_normal: None None
		purpose_italic: rgb(177, 98, 134) None Italic
		purpose_bold: rgb(177, 98, 134) None Bold
		purpose_ellipsis: None None
		scrollbar_track: rgb(80, 73, 69) None / rgb(50, 48, 47) None
		scrollbar_thumb: rgb(213, 196, 161) None / rgb(102, 92, 84) None
		help_paragraph: None None
		help_bold: rgb(214, 93, 14) None Bold
		help_italic: rgb(211, 134, 155) None Italic
		help_code: rgb(142, 192, 124) rgb(50, 48, 47)
		help_headers: rgb(254, 128, 25) None Bold
		help_table_border: rgb(80, 73, 69) None
		preview: rgb(235, 219, 178) rgb(40, 40, 40) / rgb(235, 219, 178) rgb(40, 40, 40)
		preview_line_number: rgb(124, 111, 100) None / rgb(124, 111, 100) rgb(40, 40, 40)
		preview_match: None rgb(80, 73, 69) Bold Underlined
 		hex_null: rgb(189, 174, 147) None
		hex_ascii_graphic: rgb(213, 196, 161) None
		hex_ascii_whitespace: rgb(152, 151, 26) None
		hex_ascii_other: rgb(254, 128, 25) None
		hex_non_ascii: rgb(214, 93, 14) None
	}

@Canop
Copy link
Owner

Canop commented Feb 5, 2021 •
edited
Loading

It's good. Maybe prettier, especially the bold blue. Hard to tell.
Content search still lacks contrast with files.
IMO it would not be a problem if content search extracts were not consistent and feel from another plane. Because there are.

@basbebe
Copy link
Contributor Author

basbebe commented Feb 5, 2021

You mean content search's colors are to close to the ones for files?

@Canop
Copy link
Owner

Canop commented Feb 5, 2021

Yes. When you're typing and reading at the same time the content search results, they don't stand out enough so that you see them all while you type.

@basbebe
Copy link
Contributor Author

basbebe commented Feb 5, 2021

what about a bright aqua (#8ec07c) for the text extract and the existing yellow for the match?

That pops out in front of the rest.

Bildschirmfoto 2021-02-05 um 21 26 49

@Canop
Copy link
Owner

Canop commented Feb 5, 2021

This looks good. Now we must see with the times how it bodes

@basbebe
Copy link
Contributor Author

basbebe commented Feb 5, 2021 

	skin: {
		default: rgb(235, 219, 178) rgb(40, 40, 40) / rgb(189, 174, 147) rgb(40, 40, 40)
		tree: rgb(168, 153, 132) None / rgb(102, 92, 84) None
		file: None None / None  None Italic
		directory: rgb(131, 165, 152) None Bold / rgb(69, 133, 136) None
		exe: rgb(184, 187, 38) None
		link: rgb(104, 157, 106) None
		pruning: rgb(124, 111, 100) None Italic
		perm__: None None
		perm_r: rgb(215, 153, 33) None
		perm_w: rgb(204, 36, 29) None
		perm_x: rgb(152, 151, 26) None
		owner: rgb(215, 153, 33) None Bold
		group: rgb(215, 153, 33) None
		count: rgb(69, 133, 136) rgb(50, 48, 47)
		dates: rgb(168, 153, 132) None
		sparse: rgb(250, 189,47) None
		content_extract: rgb(142, 192, 124) None Italic
		content_match: rgb(250, 189, 47) None Bold
		git_branch: rgb(250, 189, 47) None Italic
		git_insertions: rgb(152, 151, 26) None
		git_deletions: rgb(190, 15, 23) None
		git_status_current: rgb(60, 56, 54) None
		git_status_modified: rgb(152, 151, 26) None
		git_status_new: rgb(104, 187, 38) None Bold
		git_status_ignored: rgb(213, 196, 161) None
		git_status_conflicted: rgb(204, 36, 29) None
		git_status_other: rgb(204, 36, 29) None
		selected_line: None rgb(60, 56, 54) / None rgb(50, 48, 47)
		char_match: rgb(250, 189, 47) None
		file_error: rgb(251, 73, 52) None
		flag_label: rgb(189, 174, 147) None
		flag_value: rgb(211, 134, 155) None Bold
		input: rgb(251, 241, 199) None / rgb(189, 174, 147) None Italic
		status_error: rgb(213, 196, 161) rgb(204, 36, 29)
		status_job: rgb(250, 189, 47) rgb(60, 56, 54)
		status_normal: None rgb(50, 48, 47) / None None
		status_italic: rgb(211, 134, 155) rgb(50, 48, 47) Italic / None None
		status_bold: rgb(211, 134, 155) rgb(50, 48, 47) Bold / None None
		status_code: rgb(251, 241, 199) rgb(50, 48, 47) / None None
		status_ellipsis: rgb(251, 241, 199) rgb(50, 48, 47)  Bold / None None
		purpose_normal: None None
		purpose_italic: rgb(177, 98, 134) None Italic
		purpose_bold: rgb(177, 98, 134) None Bold
		purpose_ellipsis: None None
		scrollbar_track: rgb(80, 73, 69) None / rgb(50, 48, 47) None
		scrollbar_thumb: rgb(213, 196, 161) None / rgb(102, 92, 84) None
		help_paragraph: None None
		help_bold: rgb(214, 93, 14) None Bold
		help_italic: rgb(211, 134, 155) None Italic
		help_code: rgb(142, 192, 124) rgb(50, 48, 47)
		help_headers: rgb(254, 128, 25) None Bold
		help_table_border: rgb(80, 73, 69) None
		preview: rgb(235, 219, 178) rgb(40, 40, 40) / rgb(235, 219, 178) rgb(40, 40, 40)
		preview_line_number: rgb(124, 111, 100) None / rgb(124, 111, 100) rgb(40, 40, 40)
		preview_match: None rgb(80, 73, 69) Bold Underlined
 		hex_null: rgb(189, 174, 147) None
		hex_ascii_graphic: rgb(213, 196, 161) None
		hex_ascii_whitespace: rgb(152, 151, 26) None
		hex_ascii_other: rgb(254, 128, 25) None
		hex_non_ascii: rgb(214, 93, 14) None
	}

@Canop
Copy link
Owner

Canop commented Feb 5, 2021

In fact I think text extracts are more readable without the Italic and Bold

@basbebe
Copy link
Contributor Author

basbebe commented Feb 5, 2021

🤔

Bildschirmfoto 2021-02-05 um 21 54 59

@Canop Canop closed this as completed May 19, 2021
@yohannes
Copy link

yohannes commented Nov 8, 2021

Does anyone know how to make this work with Kitty? Looks like Kitty doesn't recognize RGB values.

@Canop
Copy link
Owner

Canop commented Nov 8, 2021 •
edited
Loading

@yohannes This Kitty ? It does seem to work for me:
image

@yohannes
Copy link

yohannes commented Nov 9, 2021

@Canop i can't figure out why it works now. Thanks for your confirmation nevertheless.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Canop @yohannes @basbebe