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
• User Settings integration alongside TYPO3 default themes
• Admin-defined default theme recommendation

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 three demo themes. To import them, run the extension setup after installation:

vendor/bin/typo3 extension:setup

• Corporate Blue — simple, primary color only
• Nature Green — simple, primary color only
• Warm Sunset — with header, sidebar and dark mode overrides

Tip

The demo 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.

Important

After changing a theme in User Settings or editing theme colors, a full page reload is required. The extension shows a FlashMessage reminder.

🧑‍💻 Contributing

Please have a look at CONTRIBUTING.md.

⭐ License

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