Example page
Esta página de ejemplo importa el componente de React ColorGenerator.
Puedes utilizarlo para generar una paleta de colores para tu sitio web.
tip
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;
}