search

square / wire

gRPC and protocol buffers for Android, Kotlin, Swift and Java.
https://square.github.io/wire/
Apache License 2.0
4.22k stars 571 forks source link

Poor colour contrast for headers on docs site #3015

Open EdricChan03 opened 2 weeks ago

EdricChan03 commented 2 weeks ago

When dark theme is enabled, the docs site's headers don't contrast well against the dark background:

Screenshot of documentation site with dark theme enabled. Note the poor colour contrast of the headers

From what I can tell, this is from the hard-coded colour in docs/css/app.css:

https://github.com/square/wire/blob/0d30c3fac4ea0c8b6df606aa221fadb152cb3df6/docs/css/app.css#L26-L31

oldergod commented 2 weeks ago

Thank you for reporting. Do you have a suggestion?

EdricChan03 commented 2 weeks ago

MkDocs applies a md-color-scheme data attribute on the <body> tag, so this seems to work:

[data-md-color-scheme="slate"] .md-typeset h1, [data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3, [data-md-color-scheme="slate"] .md-typeset h4 {
  color: unset; /* or a preferable dark mode colour */
}
Screenshot of docs site with modified colours
oldergod commented 2 weeks ago

Thank you. fixed in https://github.com/square/wire/commit/10d2133bbdfeffa8353ceb44d9feb5955cccdd5b and will be live with the next release.

EdricChan03 commented 2 weeks ago

A relevant color is already applied on the heading tags by default by the way, so you can just remove it altogether (assuming the custom colour wasn't meant to be set in the first place); I thought that the custom colour was an intentional choice so I suggested that 😅