Example page
このサンプルページでは、Reactコンポーネント ColorGenerator をインポートしています。
これを使って、サイト用のカラーセットを生成することができます。
ヒント
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;
}