> ## Content Index
> Fetch the complete content index at: https://getpublii.com/dev/llms.txt
> Use this file to discover other available public pages before exploring further.

# Theme variables

- URL: https://getpublii.com/dev/theme-variables/
- Published: 2020-11-28T07:32:36.004Z
- Updated: 2024-08-15T20:47:19.775Z
- Description: Theme variables is a very handful way to prepend your static site theme CSS output in Publii with access to your static theme options.
- Author: Tomasz Dziuda
- Tags: Tutorials

Thank to [visual overrides](#INTERNAL_LINK#/post/29) 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

```javascript
/*
 * 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](#INTERNAL_LINK#/post/17).