How to modify primary color in SAP Commerce Cloud Spartacus UI

question

answer

The easiest and recommended way to override basic primary colors, as of version 4.0, is by changing the compiled values of the CSS variables. But change them inside a CSS body selector, instead of a :root selector.

Example of storefrontapp/src/styles.scss file:

/* You can add global styles to this file, and also import other style files */

$styleVersion: 4.0;
@import '~@spartacus/styles/index';

$useLatestStyles: true;

@import '@spartacus/styles';
@import '@spartacus/styles/scss/theme/santorini';

body {
  --cx-color-primary: green;
  --cx-color-seconday: #8aa39b;
  --cx-color-text: #5c6f68;
  --cx-color-background: #95d9c3;
  --cx-color-dark: #a4f9c8;
}

It took effect: