Example page
This example page imports the React component ColorGenerator.
You can use it to create generate a color set for your site.
astuce
To ensure readability, aim for at least WCAG-AA contrast ratio for the primary color. Use the DocStatic website itself to preview how your color palette will appear. You can use alternative palettes in dark mode because one color doesn't usually work in both light and dark mode.
| CSS Variable Name | Hex | Adjustment | Contrast Rating |
|---|---|---|---|
--ifm-color-primary-lightest | #007aef | Fail 🔴 | |
--ifm-color-primary-lighter | #006cd4 | AA 👍 | |
--ifm-color-primary-light | #0067ca | AA 👍 | |
--ifm-color-primary | #005eb8 | 0 | AA 👍 |
--ifm-color-primary-dark | #0055a6 | AAA 🏅 | |
--ifm-color-primary-darker | #00509c | AAA 🏅 | |
--ifm-color-primary-darkest | #004281 | AAA 🏅 |
Replace the variables in src/css/custom.css with these new variables.
/src/css/custom.css
:root {
--ifm-color-primary: #005eb8;
--ifm-color-primary-dark: #0055a6;
--ifm-color-primary-darker: #00509c;
--ifm-color-primary-darkest: #004281;
--ifm-color-primary-light: #0067ca;
--ifm-color-primary-lighter: #006cd4;
--ifm-color-primary-lightest: #007aef;
}