Theme variables

Thank to visual overrides you can create a CSS code which will override your main CSS code used in your theme. The power of visual overrides is connected with fact, that you can access in your visual-overrides.js file the theme settings values. Thanks to this possibility - you can create a CSS code depending on your theme settings.

In Publii v.0.35.3 we have introduces a new feature - support for the theme-variables.js file. It works in the same way as the visual overrides, but it allows you to generate a CSS output based on your theme settings BEFORE the main CSS code.

It makes the best place to use a very nice CSS feature - variables. CSS variables can be used to easily control colors, font-sizes, spacing etc. Now with theme-variables.js file you can create such CSS variables from your theme options, what creates a new great possibilities for your static site themes.

How to define theme variables?

Create in your theme file called theme-variables.js and then put in this file function which will return CSS code output. Please remember that your function will have one argument (in below example it is called params) which contains theme settings values from custom config:

/*
 * Custom function used to generate the output of the theme variables
 */

var generateThemeVariables = function(params) {
    return `
        html {
            --color-primary: ${params.primaryColor};
            --main-font-size: ${params.fontSize}px;
        }
    `;
};

module.exports = generateThemeVariables;

How CSS is generated in Publii?

As the rendering process of the static website in Publii uses a few sources of CSS code for every theme - please read more how Publii renders the themes.