Customize a base theme

You can customize a base theme for your add-on. The following examples use Volto Light Theme as a base theme.

File structure

In your Volto add-on's src folder, create a subfolder named theme. Inside theme create two empty files named _main.scss and _variables.scss. Refer to the following file system diagram.

src/
├── components
├── index.js
└── theme
    ├── _main.scss
    └── _variables.scss

_variables.scss

_variables.scss is where you can override SCSS variables of the base theme.

$text-color: #000;
$font-size: 18px;
$line-height: 24px;

_main.scss

_main.scss is where you should put all custom styles. You can also include other SCSS or CSS files here.