This table shows the theme palette colors and the corresponding CSS variables:
Using theme CSS variables
It is important that your extensions, web packages or custom parts follow the website theme palette. To do so, you must use defined CSS variables.
If you need help about CSS variables, please have a look at https://developer.mozilla.org/fr/docs/Web/CSS/Using_CSS_custom_properties
Colors from the palette
| Theme Palette Color Name | CSS Variable |
| themePrimary | --themePrimary |
| themeLighterAlt | --themeLighterAlt |
| themeLighter | --themeLighter |
| themeLight | --themeLight |
| themeTertiary | --themeTertiary |
| themeSecondary | --themeSecondary |
| themeDarkAlt | --themeDarkAlt |
| themeDark | --themeDark |
| themeDarker | --themeDarker |
| neutralLighterAlt | --neutralLighterAlt |
| neutralLighter | --neutralLighter |
| neutralLight | --neutralLight |
| neutralQuaternaryAlt | --neutralQuaternaryAlt |
| neutralQuaternary | --neutralQuaternary |
| neutralTertiaryAlt | --neutralTertiaryAlt |
| neutralTertiary | --neutralTertiary |
| neutralSecondary | --neutralSecondary |
| neutralPrimaryAlt | --neutralPrimaryAlt |
| neutralPrimary | --neutralPrimary |
| neutralDark | --neutralDark |
| black | --black |
| white | --white |
Other variables
This table shows other CSS variables to use:
| CSS Variable | Description |
| --corner-radius | The corner radius value used by the current theme |
| --font-size | The default font size |
| --font-family | The font family name used by the current theme |