Notice: You are browsing the documentation for PrestaShop 9, which is currently in development.
You might want to look at the current version, PrestaShop 8. Read the current version of the documentation
To maintain consistency across the PrestaShop back office, CSS variables have been introduced in _root.scss. This guide explains how to use them.
In PrestaShop v9 and later, we use the CSS variables introduced in _root.scss for consistent styling in the back office.
/* CSS: Apply dark background on a block */
.my-block {
background-color: var(--cdk-primary-800);
}
/* SCSS: Apply dark background on a block */
.my-block {
background-color: var(--#{$cdk}primary-800);
}
Note:
--cdk-primary-800 is a CSS variable defined in _root.scss. It ensures consistent color application across the back office.For PrestaShop versions without the UI Kit v2, use fallbacks to ensure compatibility.
/* CSS: Apply dark background on a block with fallback */
.my-block {
background-color: var(--cdk-primary-800, #1b1c1d);
}
/* SCSS: Apply dark background on a block with fallback */
.my-block {
background-color: var(--#{$cdk}primary-800, #1b1c1d);
}
Note:
#1b1c1d) ensure functionality in versions without the new UI Kit v2.