feat: adjusts dark mode contrast for homepage #398
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| @@ -134,7 +134,7 @@ const config: Config = { | |||
| ], | |||
| }, | |||
| footer: { | |||
| style: 'dark', | |||
| style: 'light', | |||
There was a problem hiding this comment.
If we use dark value for footer, it disturbs the contrast for links for Author name and repo name.
|
| :root { | ||
| --ifm-color-primary: #552e85; | ||
| --ifm-color-primary-dark: #4c2978; | ||
| --ifm-color-primary-darker: #482771; | ||
| --ifm-color-primary-darkest: #3b205d; | ||
| --ifm-color-primary-light: #5d3392; | ||
| --ifm-color-primary-lighter: #623599; | ||
| --ifm-color-primary-lightest: #6e3cad; | ||
| } | ||
|
|
||
| [data-theme='dark'] { | ||
| --ifm-color-primary: #ededed; | ||
| --ifm-color-primary-dark: #d5d5d5; | ||
| --ifm-color-primary-darker: #c9c9c9; | ||
| --ifm-color-primary-darkest: #a6a6a6; | ||
| --ifm-color-primary-light: #ffffff; | ||
| --ifm-color-primary-lighter: #ffffff; | ||
| --ifm-color-primary-lightest: #ffffff; | ||
| } |
There was a problem hiding this comment.
I don't think we can hardcode any colors in the theme package. The theme is provided by - https://docusaurus.io/docs/api/themes/@docusaurus/theme-classic and we want to apply it to redoc
| :root { | ||
| --ifm-color-primary: #552e85; | ||
| --ifm-color-primary-dark: #4c2978; | ||
| --ifm-color-primary-darker: #482771; | ||
| --ifm-color-primary-darkest: #3b205d; | ||
| --ifm-color-primary-light: #5d3392; | ||
| --ifm-color-primary-lighter: #623599; | ||
| --ifm-color-primary-lightest: #6e3cad; | ||
| } | ||
|
|
||
| [data-theme='dark'] { | ||
| --ifm-color-primary: #ededed; | ||
| --ifm-color-primary-dark: #d5d5d5; | ||
| --ifm-color-primary-darker: #c9c9c9; | ||
| --ifm-color-primary-darkest: #a6a6a6; | ||
| --ifm-color-primary-light: #ffffff; | ||
| --ifm-color-primary-lighter: #ffffff; | ||
| --ifm-color-primary-lightest: #ffffff; | ||
| } |
There was a problem hiding this comment.
these changes are fine - because this is only for the documentation of the package itself
This PR fixes the contrast issue on the main homepage of the website. I have made sure that we don't use hardcoded values and make use of variables instead. Got this suggestion from the https://docusaurus.io/docs/styling-layout
Light Mode (Before):
Dark Mode (Before):
Light Mode (Before):
Dark Mode (After):