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

Poor colour contrast for headers on docs site #3015

Closed
EdricChan03 opened this issue Jul 1, 2024 · 4 comments
Closed

Poor colour contrast for headers on docs site #3015

EdricChan03 opened this issue Jul 1, 2024 · 4 comments

Comments

@EdricChan03
Copy link

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:

wire/docs/css/app.css

Lines 26 to 31 in 0d30c3f

.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4 {
font-family: cash-market,"Helvetica Neue",helvetica,sans-serif;
line-height: normal;
font-weight: bold;
color: #353535;
}

@oldergod
Copy link
Member

oldergod commented Jul 1, 2024

Thank you for reporting. Do you have a suggestion?

@EdricChan03
Copy link
Author

EdricChan03 commented Jul 1, 2024 •
edited
Loading

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

oldergod commented Jul 1, 2024 •
edited
Loading

Thank you. fixed in 10d2133 and will be live with the next release.

@EdricChan03
Copy link
Author

EdricChan03 commented Jul 1, 2024 •
edited
Loading

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 😅

@oldergod oldergod closed this as completed Aug 6, 2024
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
2 participants
@oldergod @EdricChan03