README

TYPO3 extension typo3_backend_themes

TYPO3 extension to create custom backend color themes. Define primary and secondary colors, configure dark mode overrides, and let backend users choose their preferred theme.

Note

Use this extension to subtly establish your project or client branding in the TYPO3 backend. For example, apply corporate colors to the sidebar, header and icons so editors immediately recognize which installation they are working in.

!

✨ Features

• Custom color themes as database records with live preview
• Dark mode support with optional overrides
• WCAG contrast warning in the preview to avoid unreadable color combinations
• User Settings integration alongside TYPO3 default themes
• Live theme switching — the backend re-colors instantly after a theme change, no full page reload
• Admin-defined default theme recommendation
• Curated starter themes shipped out of the box

Warning

This is an experimental extension. TYPO3 v14 introduced the Fresh theme and the backend theming approach based on CSS custom properties and design tokens is expected to evolve further in upcoming TYPO3 core releases. This extension builds on top of that system and serves as an example of how adaptable the TYPO3 backend already is. It may require adjustments as the core API matures.

🔥 Installation

Requirements

Composer

composer require konradmichalik/typo3-backend-themes

TER

Download the zip file from TYPO3 extension repository (TER).

Demo Themes

The extension ships with a set of curated starter themes. To import them, run the extension setup after installation:

vendor/bin/typo3 extension:setup

Corporate Blue, Nature Green, Warm Sunset, Ocean Teal, Royal Purple, Slate Neutral, Amber Gold, Ruby Red, Indigo Midnight — each with subtly distinct header and sidebar shades plus dark mode overrides.

Tip

The starter themes are meant as a starting point. Feel free to adjust them to your needs or delete them entirely.

🎨 Configuration

Creating Themes

1. Open the List module at root level (pid=0)
2. Create a new Backend Theme record
3. Set a title and choose a primary color
4. Save — the live preview shows light and dark mode side by side

Tip

Check Default Theme to mark it as the admin-recommended theme. It will appear at the top of the user dropdown with "(Default)" suffix.

Extension Settings

Under Admin Tools → Settings → Extension Configuration → typo3_backend_themes:

User Settings

Users select their theme under User Settings → Appearance → Theme:

Standard TYPO3 themes continue to work as before, unless the extension setting "Hide default TYPO3 themes" is enabled. Custom themes apply color overrides via CSS custom properties.

Note

Switching your theme in User Settings applies instantly — the backend re-colors without a full page reload. Only after editing the colors of a theme record a reload is needed to see the change reflected in the backend chrome.

🧑‍💻 Contributing

Please have a look at CONTRIBUTING.md.

⭐ License

This project is licensed under GNU General Public License 2.0 (or later).