Example page
Diese Beispielseite importiert die React-Komponente ColorGenerator.
Damit kannst du ein Farbset für deine Website erstellen.
tipp
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;
}