Update to CSS variables

With version 2.5.0 the NATURE theme was made accessible, updated from Bulma 0.x to Bulma 1.x, and all SCSS variables were switched to CSS variables. This means a manual intermediate step is necessary when updating from an older version (< 2.5.0) to a newer version (≥ 2.5.0).

Requirements

• Existing installation of the NATURE theme < 2.5.0
• Update to Contao 5

1. Update the theme

1. Open the Contao Manager.
2. Update the NATURE theme to 2.5.0 or higher (recommended: latest version).

2. Changes to the SCSS files

As of version 2.5.0 the file _custom_colors.scss no longer exists. All color definitions are now in _custom_variables.scss.

📂 Old structure (< 2.5.0)

naturetheme/scss/
├── custom.scss
├── _custom_variables.scss
└── _custom_colors.scss

📂 New structure (≥ 2.5.0)

naturetheme/scss/
├── custom.scss
└── _custom_variables.scss

3. Create the new theme files

After the update to 2.5.0 or higher the site still works, but not all new features are available right away. You should therefore create the current theme files.

Complete re-import of the theme folder

1. In the file manager, rename the folder naturetheme, e.g. to naturetheme-alt.
2. In the Contao Manager, open System maintenance → Check database and run the database update.
3. The migration that creates the new theme files is now offered – run it.
4. A new folder naturetheme with the current files is created.

Moving images: If there were images in the old naturetheme folder, move them either into the new folder or into a separate image folder. References are kept if the images were added in Contao via “Add an image”.

New / old file structure:

Theme files migration:

4. Transfer your own customizations

If you made changes in custom.scss, _custom_colors.scss or _custom_variables.scss, you have to transfer them manually to the new files.

Important: V2 uses CSS variables instead of SCSS variables.

Example color variable

Before (V1 – SCSS):

$primary: #5ca152;

New (V2 – CSS variables):

:root {
  --bulma-primary: #5ca152;
}

CSS variables are used in code like this:

color: var(--bulma-primary);

Component-specific variables

Some variables are not defined in :root but within a component:

Before (V1 – SCSS):

$navbar-background-color: #eaeaea;

New (V2 – CSS variables):

.navbar {
  --bulma-navbar-background-color: #eaeaea;
}

5. Update SCSS customizations

If your custom.scss still uses SCSS variables ($variable), change them to the CSS variable format (var(--variable)).

Example:

/* Vorher */
background: $primary;

/* Neu */
background: var(--bulma-primary);

Accessibility

You find detailed tips, new features from version 2.5.0 and best practices for accessible design here: ♿ Accessibility in the NATURE theme

Direct download of the new variables file

You find the current _custom_variables.scss here: 📄 GitHub: _custom_variables.scss

If you want to adjust the files manually, the scss folder must also contain an empty file named .v2 to activate the V2 structure.