Update to CSS variables

With version 3.7.0 the ODD theme was made accessible and all SCSS variables were switched to CSS variables. This means a manual intermediate step is necessary when updating from an older version (< 3.7.0) to a newer version (≥ 3.7.0).

Requirements

• Existing installation of the ODD theme < 3.7.0
• Update to Contao 5

1. Update the theme

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

2. Changes to the SCSS files

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

📂 Old structure (< 3.7.0)

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

📂 New structure (≥ 3.7.0)

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

3. Create the new theme files

After the update to 3.7.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 odd, e.g. to odd-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 odd with the current files is created.

Moving images: If there were images in the old odd 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”.

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):

$oddColor1: #b6cf92;

New (V2 – CSS variables):

:root {
  --oddColor1: #b6cf92;
}

CSS variables are used in code like this:

color: var(--oddColor1);

5. Update SCSS customizations

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

Example:

/* Vorher */
color: $oddColor1;

/* Neu */
color: var(--oddColor1);

Accessibility

You find detailed tips, new features from version 3.7.0 and best practices for accessible design here: ♿ Accessibility in the ODD 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 odd folder must also contain an empty file named .v2 to activate the V2 structure.