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

[Docs] Typography in dark theme mode unreadable #11190

Closed
1 task done
yzorg opened this issue May 1, 2018 · 1 comment
Closed
1 task done

[Docs] Typography in dark theme mode unreadable #11190

yzorg opened this issue May 1, 2018 · 1 comment
Assignees
Labels
bug 🐛 Something doesn't work docs Improvements or additions to the documentation

Comments

@yzorg
Copy link

yzorg commented May 1, 2018

  • I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

The Typography component demo should be usable in dark mode.

Current Behavior

Typography demo on docs site should be readable in dark mode. The background is hard-coded to white, but in dark mode the text color is changed to light gray, making the text nearly unreadable (only via gaps in the background ruler lines).

Steps to Reproduce (for bugs)

  1. https://material-ui.com/style/typography/#component
  2. find the toolbar (top right)
  3. click light/dark lightbulb to change to dark theme

Context

Was planning to adopt the library for an internal site, using the dark theme. I was demonstrating to my boss and team, and they were a bit put off that some of the component demos didn't work in dark theme.

Your Environment

Tech Version
Material-UI 1.0.0-beta.44
React ? docs site
browser any
etc

Again

The same problem happens on the Theme page, Typography section.

  1. browse to https://material-ui.com/customization/themes/#typography
  2. click light/dark theme lightbulb in the top toolbar
@yzorg
Copy link
Author

yzorg commented May 1, 2018

I have a proposed fix, demonstrated at https://codesandbox.io/s/8y9ywpp69j that uses the new Component-specific overrides support in theme. Would that be appropriate to use in this demo?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work docs Improvements or additions to the documentation
Projects
None yet
Development

No branches or pull requests

2 participants