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 three 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.
 * Custom function used to generate the output of the theme variables

var generateThemeVariables = function(themeConfig, postConfig, commonConfig) {
    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.

What are you waiting for?

Start building your site today.

  1. 1 Download Publii
  2. 2 Write your content
  3. 3 Publish your site
Create website