Modifying CSS variables - XMPieLab/uStore-NG GitHub Wiki

uStore NG uses CSS variables to control the look of recurring UI elements, such as buttons.

The Theme Customization editor, which is a WYSIWYG editor, lets you edit the values of the theme variables per store.

Some variable values are can be modified in the UI of the editor, while others can be modified manually in the “Variables CSS” panel of the editor. See Editing CSS Variables for a full list of existing variables in the system.

When developing a theme, you can change not only the values of the variables but also add variables and modify their name and use.

Note: Changes to the values of the variables cannot be seen in the hybrid pages during development. See Theme technology basics.

Modify theme variables

You can change the default value of a CSS variable, and then preview all places in which the variable is used throughout the application.

If the variable can be modified in the UI of the Theme Customization editor, then upon publishing the theme and assigning it to a store the new value becomes the default one in the editor. You can change the value per store.

The src/styles/variables.scss file contains all existing variables in the system, and their default values. Search for the required variable and change its value. For example, change the color of the primary button to red as follows:

--button-primary-background-color: red;

The new value now becomes the default one and will affect all areas in the application which use the button-primary-background-color variable.

Note: Do not change the name of an existing variable. If needed, add a new variable.

Add a new theme variable

You can add new variables to the system, whose values can be manually modified, per store, in the “Variables CSS” panel of the Theme Customization editor.

Open the src/styles/variables.scss file and add the new variable name with its value. For example, to set the color of all titles in the application to navy using a variable, add a new variable named text-color-title:

--text-color-title: navy;

Then, use this variable throughout the application in any of the style files as follows:

.title{
   color: var(--text-color-title);
}