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

hard to read on light background #33

Closed
bugabinga opened this issue May 1, 2019 · 10 comments
Closed

hard to read on light background #33

bugabinga opened this issue May 1, 2019 · 10 comments

Comments

@bugabinga
Copy link

In terminal emulators with light backgrounds, most of onefetchs output is unreadable.

@o2sh
Copy link
Owner

o2sh commented May 3, 2019

Yeah, unfortunately as dark colors don't show well on black background, light colors are hard to read on white background.

I don't see how i could please everyone...

Thx for your feedback @bugabinga

@bugabinga
Copy link
Author

bugabinga commented May 3, 2019

I don't see how i could please everyone...

That would be hard indeed :)

However, how about these alternatives:
Offer flags for dark/light colors

$ onefetch --color=auto|light|dark|none

Maybe there is a way to use the default colors of the terminal emulator, though I admit, I don't know.

@skyfaller
Copy link

skyfaller commented Feb 22, 2022

One possible solution is to have a theme that uses ansi colors, as bat does:

Delta uses more or less the same solution because it uses bat themes: dandavison/delta#447 (comment)

Is creating an ansi theme or using bat's ansi theme possible for onefetch?

@o2sh o2sh reopened this Feb 22, 2022
@spenserblack
Copy link
Collaborator

spenserblack commented Feb 23, 2022

Themes definitely sounds like a fun idea! I would consider it a new feature instead of a resolution to this issue. Mainly because I consider this issue resolved already due to the below points.

  • onefetch supports defining your own colors via command-line options
  • isn't this more of an issue of terminal configuration than onefetch output? Out of curiosity I tried onefetch --true-color never with Gruvbox Light, and it looked fine to me

Since bat and delta's themes are for syntax highlighting, I think our themes would be slightly different. No ASCII has more than 9 colors currently (swift.ascii has 9, all shades of red though). I think it would be better if this could be accomplished without changing the language macro rule and calls, which are quite long.

define_languages! {
{ Ada, Programming, "ada.ascii", define_colors!( [Color::White, Color::Cyan, Color::Blue] : [Color::TrueColor{r:255, g:255, b:255}, Color::TrueColor{r:0, g:24, b:201}, Color::TrueColor{r:12, g:10, b:124}] ) },
{ Assembly, Programming, "assembly.ascii", define_colors!( [Color::Cyan] ) },
{ AutoHotKey, Programming, "autohotkey.ascii", define_colors!( [Color::White, Color::Green] : [Color::TrueColor{r:255, g:255, b:255}, Color::TrueColor{r: 0x11, g: 0x98, b: 0x10}]) },
{ Bash, Programming, "bash.ascii", define_colors!( [Color::White] ) },
{ C, Programming, "c.ascii", define_colors!( [Color::Cyan, Color::Blue, Color::Blue, Color::White] : [Color::TrueColor{r:93, g:108, b:191}, Color::TrueColor{r:41, g:54, b:147}, Color::TrueColor{r:57, g:73, b:170}, Color::TrueColor{r:255, g:255, b:255}] ) },
{ Clojure, Programming, "clojure.ascii", define_colors!( [Color::Cyan, Color::Green] ) },
{ CMake, Programming, "cmake.ascii", define_colors!( [Color::Blue, Color::Green, Color::Red, Color::Black] ) },
{ CoffeeScript, Programming, "coffeescript.ascii", define_colors!( [Color::Red] ) },
{ Coq, Programming, "coq.ascii", define_colors!( [Color::Yellow, Color::White] : [Color::TrueColor {r:191, g:140, b:94}, Color::TrueColor {r:213, g:190, b:153}] ) },
{ Cpp, Programming, "cpp.ascii", define_colors!( [Color::Cyan, Color::Blue, Color::Blue, Color::White] : [Color::TrueColor{r:100, g:154, b:210}, Color::TrueColor{r:0, g:66, b:131}, Color::TrueColor{r:0, g:89, b:157}, Color::TrueColor{r:255, g:255, b:255}] ), "c++" },
{ Crystal, Programming, "crystal.ascii", define_colors!( [Color::White, Color::Black] ) },
{ CSharp, Programming, "csharp.ascii", define_colors!( [Color::Blue, Color::Magenta, Color::Magenta, Color::White] : [Color::TrueColor{r:155, g:79, b:151}, Color::TrueColor{r:103, g:33, b:122}, Color::TrueColor{r:128, g:55, b:136}, Color::TrueColor{r:255, g:255, b:255}] ), "c#" },
{ Css, Markup, "css.ascii", define_colors!( [Color::Blue, Color::White] ) },
{ D, Programming, "d.ascii", define_colors!( [Color::Red] ) },
{ Dart, Programming, "dart.ascii", define_colors!( [Color::Blue, Color::Cyan, Color::Blue ] : [Color::TrueColor{ r:0, g:163, b:231 }, Color::TrueColor{ r:66, g:223, b:205 }, Color::TrueColor{ r:1, g:89, b:125 }] ) },
{ Dockerfile, Programming, "dockerfile.ascii", define_colors!( [Color::Cyan, Color::White, Color::Cyan] ) },
{ Elisp, Programming, "emacslisp.ascii", define_colors!( [Color::Magenta, Color::White] ), "emacs-lisp" },
{ Elixir, Programming, "elixir.ascii", define_colors!( [Color::Magenta] ) },
{ Elm, Programming, "elm.ascii", define_colors!( [Color::Blue, Color::Green, Color::Yellow, Color::Cyan] ) },
{ Emojicode, Programming, "emojicode.ascii", define_colors!( [Color::Green, Color::Magenta, Color::Magenta, Color::Magenta] : [Color::TrueColor{r:119, g:178, b:85}, Color::TrueColor{r:146, g:102, b:204}, Color::TrueColor{r:170, g:141, b:216}, Color::TrueColor{r:116, g:78, b:170}] ) },
{ Erlang, Programming, "erlang.ascii", define_colors!( [Color::Red] ) },
{ Fish, Programming, "fish.ascii", define_colors!( [Color::Red, Color::Yellow] ) },
{ Forth, Programming, "forth.ascii", define_colors!( [Color::Red] ) },
{ FortranModern, Programming, "f90.ascii", define_colors!( [Color::White, Color::Green, Color::Cyan, Color::Yellow, Color::Red] ), "fortran" },
{ FortranLegacy, Programming, "f77.ascii", define_colors!( [Color::White, Color::Green, Color::Cyan, Color::Yellow, Color::Red] ), "fortran-legacy" },
{ FSharp, Programming, "fsharp.ascii", define_colors!( [Color::Cyan, Color::Cyan] ), "f#" },
{ GdScript, Programming, "gdscript.ascii", define_colors!( [Color::Cyan, Color::White] : [Color::TrueColor{ r:69, g:141, b:192 }, Color::TrueColor{ r:255, g:255, b:255}] ) },
{ Go, Programming, "go.ascii", define_colors!( [Color::Cyan, Color::White, Color::Yellow] : [Color::TrueColor{ r:116, g:205, b:221 }, Color::TrueColor{ r:255, g:255, b:255 }, Color::TrueColor{ r:246, g:210, b:162 }] ) },
{ Graphql, Data, "graphql.ascii", define_colors!( [Color::Magenta] ) },
{ Groovy, Programming, "groovy.ascii", define_colors!( [Color::Cyan, Color::White] ) },
{ Haskell, Programming, "haskell.ascii", define_colors!( [Color::Cyan, Color::Magenta, Color::Blue] : [Color::TrueColor{ r:69, g:58, b:98 }, Color::TrueColor{ r:94, g:80, b:134 }, Color::TrueColor{ r:143, g:78, b:139 }] ) },
{ Haxe, Programming, "haxe.ascii", define_colors!( [Color::Yellow, Color::Yellow, Color::Yellow] : [Color::TrueColor{ r: 250, g: 178, b: 11 }, Color::TrueColor{ r:246, g:153, b:18 }, Color::TrueColor{ r: 244, g: 114, b: 22 }] ) },
{ Hcl, Programming, "hcl.ascii", define_colors!( [Color::Magenta, Color::Magenta] : [Color::TrueColor{ r: 95, g: 67, b: 233 }, Color::TrueColor{ r: 64, g: 64, b: 178 }] ) },
{ HolyC, Programming, "holyc.ascii", define_colors!( [Color::Yellow, Color::Cyan, Color::White] : [Color::TrueColor{ r:251, g:254 ,b:103}, Color::TrueColor{ r:11, g:68 ,b:157}, Color::TrueColor{ r:255, g:255 ,b:255} ]) },
{ Html, Markup, "html.ascii", define_colors!( [Color::Red, Color::White] ) },
{ Idris, Programming, "idris.ascii", define_colors!( [Color::Red] ) },
{ Java, Programming, "java.ascii", define_colors!( [Color::Red, Color::Blue] : [Color::TrueColor{ r:244, g:67 ,b:54}, Color::TrueColor{ r:22, g:101 ,b:192} ] ) },
{ JavaScript, Programming, "javascript.ascii", define_colors!( [Color::Yellow] : [Color::TrueColor{ r:236, g:230 ,b:83} ]) },
{ Json, Data, "json.ascii", define_colors!( [Color::White, Color::Black] ) },
{ Jsonnet, Programming, "jsonnet.ascii", define_colors!( [Color::White, Color::Black] ) },
{ Jsx, Programming, "jsx.ascii", define_colors!( [Color::Yellow] ) },
{ Julia, Programming, "julia.ascii", define_colors!( [Color::White, Color::Blue, Color::Green, Color::Red, Color::Magenta] ) },
{ Jupyter, Programming, "jupyter.ascii", define_colors!( [Color::White, Color::Yellow, Color::White] : [Color::TrueColor{ r:255, g:255 ,b:255}, Color::TrueColor{ r:255, g:112 ,b:15}, Color::TrueColor{ r:158, g:158 ,b:158} ] ), "jupyter-notebooks" },
{ Kotlin, Programming, "kotlin.ascii", define_colors!( [Color::Blue, Color::Yellow, Color::Magenta] ) },
{ Lisp, Programming, "lisp.ascii", define_colors!( [Color::White] ) },
{ Lua, Programming, "lua.ascii", define_colors!( [Color::Blue, Color::White, Color::White] : [Color::TrueColor{ r:46, g:0 ,b:127}, Color::TrueColor{ r:128, g:128 ,b:128}, Color::TrueColor{ r:255, g:255 ,b:255} ] ) },
{ LLVM, Programming, "llvm.ascii", define_colors!( [Color::Red] : [Color::TrueColor{ r:152, g:1 ,b:46}] ) },
{ Markdown, Prose, "markdown.ascii", define_colors!( [Color::White, Color::Red] ) },
{ Nim, Programming, "nim.ascii", define_colors!( [Color::Yellow, Color::White] ) },
{ Nix, Programming, "nix.ascii", define_colors!( [Color::Cyan, Color::Blue] ) },
{ ObjectiveC, Programming, "objectivec.ascii", define_colors!( [Color::Cyan, Color::Blue] ), "objective-c" },
{ OCaml, Programming, "ocaml.ascii", define_colors!( [Color::Yellow] ) },
{ Org, Prose, "org.ascii", define_colors!( [Color::Green, Color::Red, Color::White] ) },
{ Perl, Programming, "perl.ascii", define_colors!( [Color::Cyan] ) },
{ Php, Programming, "php.ascii", define_colors!( [Color::Magenta, Color::Blue, Color::Cyan, Color::White] ) },
{ PowerShell, Programming, "powershell.ascii", define_colors!( [Color::Blue, Color::White] : [Color::TrueColor{ r:49, g:108, b:185}, Color::TrueColor{ r:255, g:255, b:255} ] ) },
{ Processing, Programming, "processing.ascii", define_colors!( [Color::Blue, Color::White] : [Color::TrueColor{ r:80, g:80 ,b:80}, Color::TrueColor{ r:255, g:255 ,b:255} ] ) },
{ Prolog, Programming, "prolog.ascii", define_colors!( [Color::White] ) },
{ Protobuf, Programming, "protobuf.ascii", define_colors!( [Color::Red, Color::Blue, Color::Green, Color::Yellow] ), "protocol-buffers" },
{ PureScript, Programming, "purescript.ascii", define_colors!( [Color::White] ) },
{ Python, Programming, "python.ascii", define_colors!( [Color::Blue, Color::Yellow] : [Color::TrueColor{ r:47, g:105 ,b:162}, Color::TrueColor{ r:255, g:217 ,b:64} ] ) },
{ Qml, Programming, "qml.ascii", define_colors!( [Color::Green, Color::White, Color::Green] : [Color::TrueColor{ r:128, g:195 ,b:66}, Color::TrueColor{ r:255, g:255 ,b:255}, Color::TrueColor{ r:77, g:117 ,b:40} ] ) },
{ R, Programming, "r.ascii", define_colors!( [Color::White, Color::Blue] ) },
{ Racket, Programming, "racket.ascii", define_colors!( [Color::Red, Color::White, Color::Blue] ) },
{
Perl6, Programming, "raku.ascii", define_colors!( [
Color::Blue,
Color::Red,
Color::Yellow,
Color::White,
Color::Green
] : [
Color::TrueColor{ r:91, g:0, b:253 },
Color::TrueColor{ r:255, g:0, b:94 },
Color::TrueColor{ r:243, g:255, b:39 },
Color::TrueColor{ r:255, g:255, b:255 },
Color::TrueColor{ r:0, g:255, b:57 }
] ),
"raku"
},
{
Renpy, Programming, "renpy.ascii", define_colors!( [
Color::White,
Color::Red,
Color::White,
Color::Blue,
Color::Yellow,
Color::White,
Color::Magenta
] : [
Color::TrueColor{ r:234, g:219, b:204 },
Color::TrueColor{ r:255, g:127, b:127 },
Color::TrueColor{ r:251, g:238, b:226 },
Color::TrueColor{ r:73, g:95, b:142 },
Color::TrueColor{ r:250, g:228, b:90 },
Color::White,
Color::TrueColor{ r:181, g:163, b:150 }
] )
},
{ Ruby, Programming, "ruby.ascii", define_colors!( [Color::Red] : [Color::TrueColor{ r: 204, g: 52, b: 45 }] ) },
{ Rust, Programming, "rust.ascii", define_colors!( [Color::Red, Color::White] : [Color::TrueColor{ r:228, g:55 ,b:23}, Color::TrueColor{ r:255, g:255 ,b:255} ] ) },
{ Sass, Markup, "sass.ascii", define_colors!( [Color::Magenta] : [Color::TrueColor{ r:205, g:103 ,b:153} ] ) },
{ Scala, Programming, "scala.ascii", define_colors!( [Color::Red, Color::Red] : [Color::TrueColor{ r:223, g:63 ,b:61}, Color::TrueColor{ r:127, g:12 ,b:29} ] ) },
{ Scheme, Programming, "scheme.ascii", define_colors!( [Color::White] : [Color::TrueColor{r: 85, g:85, b:85}] ) },
{ Sh, Programming, "shell.ascii", define_colors!( [Color::Green] ), "shell" },
{ Solidity, Programming, "solidity.ascii", define_colors!( [ Color::White, Color::Black, Color::Black, Color::Black, Color::Black] : [ Color::White, Color::TrueColor{ r: 46, g: 46, b: 46 }, Color::TrueColor{ r: 26, g: 26, b: 26 }, Color::TrueColor{ r: 51, g: 51, b: 51 }, Color::TrueColor{ r: 81, g: 81, b: 81 } ] ) },
{ Sql, Data, "sql.ascii", define_colors!( [Color::Cyan, Color::Yellow] ) },
{ Svelte, Markup, "svelte.ascii", define_colors!( [Color::Red, Color::White] : [Color::TrueColor{ r: 255, g: 60, b: 0 }, Color::TrueColor{ r: 255, g: 255, b: 255 }] ) },
{
Swift, Programming, "swift.ascii", define_colors!( [
Color::Red,
Color::Red,
Color::Red,
Color::Red,
Color::Red,
Color::Red,
Color::Red,
Color::Red,
Color::Red,
Color::Red
] : [
Color::TrueColor{ r:248, g:129, b:52 },
Color::TrueColor{ r:249, g:119, b:50 },
Color::TrueColor{ r:249, g:109, b:48 },
Color::TrueColor{ r:250, g:99, b:46 },
Color::TrueColor{ r:250, g:89, b:44 },
Color::TrueColor{ r:251, g:80, b:42 },
Color::TrueColor{ r:251, g:70, b:40 },
Color::TrueColor{ r:252, g:60, b:38 },
Color::TrueColor{ r:252, g:50, b:36 },
Color::TrueColor{ r:253, g:40, b:34 }
] )
},
{ Tcl, Programming, "tcl.ascii", define_colors!( [Color::Blue, Color::White, Color::Cyan] ) },
{ Tex, Markup, "tex.ascii", define_colors!( [Color::White, Color::Black] ) },
{ Toml, Data, "toml.ascii", define_colors!( [Color::Red, Color::White] : [Color::TrueColor{ r:156, g:66, b:33}, Color::TrueColor{ r:255, g:255, b:255} ]) },
{ Tsx, Programming, "tsx.ascii", define_colors!( [Color::Blue] ) },
{ TypeScript, Programming, "typescript.ascii", define_colors!( [Color::Cyan, Color::White] : [Color::TrueColor{ r:0, g:122, b:204}, Color::TrueColor{ r:255, g:255, b:255} ]) },
{ Vala, Programming, "vala.ascii", define_colors!( [Color::Magenta, Color::White] ) },
{ VimScript, Programming, "vimscript.ascii", define_colors!( [Color::Green, Color::Black, Color::White] ) },
{ Vue, Programming, "vue.ascii", define_colors!( [Color::Green, Color::Blue] ) },
{ WebAssembly, Programming, "webassembly.ascii", define_colors!( [Color::Magenta, Color::White] : [Color::TrueColor{ r:101, g:79, b:240}, Color::TrueColor{ r:255, g:255, b:255} ]) },
{ Xaml, Data, "xaml.ascii", define_colors!( [Color::Blue, Color::White] : [Color::TrueColor{ r:51, g:120, b:206}, Color::TrueColor{ r:255, g:255, b:255} ]) },
{ Xml, Data, "xml.ascii", define_colors!( [Color::Yellow, Color::White, Color::Green] ) },
{ Yaml, Data, "yaml.ascii", define_colors!( [Color::White] ) },
{ Zig, Programming, "zig.ascii", define_colors!( [Color::Yellow] ) },
{ Zsh, Programming, "zsh.ascii", define_colors!( [Color::White] ) },
}

So the way I imagine themes working is that colors would be defined as primary, secondary, tertiary, etc., and these would replace color {0}, color {1}, {2}, etc. We probably don't want to define 9 colors since most langs use less than half of that, so maybe 5 colors at maximum, and {5}, {6}, etc. would either use their original color or the primary color.

Basically, themes could be built-in versions of what would happen if you used onefetch --ascii-colors x y z

@skyfaller
Copy link

isn't this more of an issue of terminal configuration than onefetch output? Out of curiosity I tried onefetch --true-color never with Gruvbox Light, and it looked fine to me

This is a fair point, but I do not want to figure out which colors I need to change on every terminal program I use. Picking a theme per program isn't as onerous, especially if I can just pick the ansi theme for everything (and ideally do that in a config file so I don't have to call it with command line flags every time).

onefetch --true-color never doesn't seem to make a difference for me, the text is still hard to read:

Screenshot from 2022-02-23 11-20-33-cropped-min

@spenserblack
Copy link
Collaborator

Oh yeah, that white-on-white is pretty hard to read (I actually prefer low contrast output like that, but I know that's not the majority opinion 😆).

So I think I've been thinking about this the wrong way. I was focused on the logo, but really it seems like the text is the issue. As a very quick workaround for you, onefetch -t 0 0 0 0 0 would set all text colors to be black. Our themes should probably act as aliases for onefetch --text-colors a b c....

Looks like your theme keeps black as dark and white as light, but other light themes, like Gruvbox Light, make black the light color and white the dark color (this is why I thought it was resolved). So, if we add themes, we'll at minimum probably need 2 light themes to handle terminal themes that do reverse black and white and themes that don't reverse them.

@skyfaller
Copy link

skyfaller commented Feb 23, 2022

As a very quick workaround for you, onefetch -t 0 0 0 0 0 would set all text colors to be black.

Disappointingly, this doesn't seem to do it either:

Screenshot from 2022-02-23 12-32-38-min

The text is still too light to read.

Here's some more info about my system:

Screenshot from 2022-02-23 12-35-02-min

My theme is Adwaita.

P.S. Note that neofetch has no problem with this ;-)

@spenserblack
Copy link
Collaborator

spenserblack commented Feb 23, 2022

Note that neofetch has no problem with this ;-)

Without looking at their source code, I think I can guess why: they're probably using unstyled text for the info fields, while we default to using white (showing a bias for dark terminals).

Made #593 based on this, so that you can at least disable some of the coloring for now and use your theme's foreground color 🙂

Also, I needed to add one more 0 to that workaround 😅
onefetch -t 0 0 0 0 0 0

This was referenced Mar 11, 2022
o2sh pushed a commit that referenced this issue Mar 22, 2022
Allows the "white" color to have the greatest chance of being a dark,
visible color for light terminal themes.

A macro is used to remap `White` to `Default` to minimize size of the
diff and prevent contributors from needing to be familiar with the
`Default` color on top of the 8 standard colors.

In other places where `White` was assumed to be the default, `Default`
is now used instead, also.

For #33
Closes #611
@spenserblack
Copy link
Collaborator

Since we've made a few PRs to address this, should this be closed? I think anything more would have to be done on a logo-by-logo basis.

@bugabinga
Copy link
Author

Since we've made a few PRs to address this, should this be closed?
Yes, it is actually perfect now. No configuration, in my case, needed.

Thanks a lot for your time!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants