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 can have four arguments: 

• themeConfig - which contains theme settings values from custom config,
• postConfig - which contains post-specific options
• commonConfig - other options like excerpt length, posts per page etc.
• pageConfig - page-specific options

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

var generateThemeVariables = function(themeConfig, postConfig, commonConfig, pageConfig) {
    return `
        html {
            --color-primary: ${themeConfig.primaryColor};
            --main-font-size: ${themeConfig.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.