move-elevator / typo3-chameleon-login

0.1.0 2026-10-22 07:10 UTC

Requires

• php: ^8.4
• psr/http-message: ^1.1 || ^2.0
• psr/http-server-handler: ^1.0
• psr/http-server-middleware: ^1.0
• typo3/cms-backend: ^14.3
• typo3/cms-core: ^14.3

Requires (Dev)

• captainhook/captainhook: ^5.29
• eliashaeussler/version-bumper: ^4.1
• helhum/typo3-console: ^8.3
• phpunit/phpunit: ^13.0
• ramsey/conventional-commits: ^1.7
• typo3/cms-base-distribution: ^14.3
• typo3/cms-lowlevel: ^14.3
• typo3/testing-framework: ^9.0

GPL-2.0-or-later

• backend
• login
• typo3
• season
• typo3-extension

Published on Packagist.org on 2026-10-22 07:21 UTC

README

TYPO3 extension typo3_chameleon_login

This extension changes the background image of the TYPO3 backend login with the seasons. Editors maintain season records such as "Christmas", "Summer" or "Sale week" with a period, an image and an optional background color. Whenever the login screen is shown, the extension determines the currently active season and merges its settings into TYPO3_CONF_VARS.

✨ Features

• Season records with title, image, period, optional background color and priority
• Several images per season, a random one is shown on each visit of the login screen
• Animated color gradient as an alternative to the background image
• Seasonal branding: login logo, highlight color and footnote, e.g. a red button and "Happy holidays" at Christmas
• Dark mode variants of background images, background color, gradient colors and highlight color
• Optional animated effects per season: snowfall, falling leaves, cherry blossoms, confetti or rising hearts
• Yearly recurring seasons, including periods across New Year (e.g. 20.12. – 06.01.)
• Higher priority wins when several seasons overlap
• Seasons switch automatically when their period starts, no scheduler task needed
• Changes to season records take effect on the login screen immediately after saving
• No changes to additional.php needed

🔥 Installation

Requirements

• TYPO3 14.3
• PHP 8.4+

Composer

composer require move-elevator/typo3-chameleon-login

Afterwards, set up the extension and flush the caches:

vendor/bin/typo3 extension:setup
vendor/bin/typo3 cache:flush

🚀 Quick start

1. Create a sys folder, e.g. "Login seasons".
2. Add records of type "Login season" with the list module.
3. Required fields: title, valid from, valid until and either an image or at least two gradient colors. Background images must be AVIF or WebP, logos SVG, AVIF or WebP. The extension delivers the original file, so only compressed modern formats are accepted.
4. Optional fields: background color, effect, logo, highlight color, footnote, dark mode variants, yearly recurring, priority, disabled.

The list view sorts records by priority and shows title, period, recurring and priority by default.

⚙️ Configuration

On the login, password reset and MFA screens, the extension merges the active season into TYPO3_CONF_VARS. It sets:

Setting	Description
$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['backend']['loginBackgroundImage']	Public URL of the active season's image
$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['typo3_chameleon_login']['loginBackgroundImages']	All image URLs of the active season if it has more than one. The login screen picks one at random, loginBackgroundImage holds the first one as fallback
$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['backend']['loginLogo'] and ['loginLogoAlt']	Public URL and alternative text of the active season's logo
$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['backend']['loginHighlightColor']	Highlight color of the active season (hex)
$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['backend']['loginFootnote']	Footnote of the active season
$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['typo3_chameleon_login']['loginBackgroundColor']	Background color of the active season (hex), rendered as CSS custom property --chameleon-login-bg-color
$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['typo3_chameleon_login']['loginBackgroundGradient']	Gradient colors (hex) of the active season, if it uses the background type "Animated gradient"
$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['typo3_chameleon_login']['loginBackgroundGradientSpeed']	Gradient animation speed: slow, medium or fast
$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['typo3_chameleon_login']['effect']	Effect of the active season, e.g. snow
$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['typo3_chameleon_login']['loginBackgroundImagesDark']	Image URLs for dark mode, one is picked at random
$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['typo3_chameleon_login']['loginBackgroundColorDark']	Background color for dark mode (hex)
$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['typo3_chameleon_login']['loginBackgroundGradientDark']	Gradient colors for dark mode (hex)
$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['typo3_chameleon_login']['loginHighlightColorDark']	Highlight color for dark mode (hex)

If no season is active, nothing is changed and the TYPO3 defaults apply.

📚 Documentation

Season selection

The extension checks all enabled seasons, ordered by priority (highest first), then by uid. The first season that matches today wins.

• One-time seasons match between the "valid from" and "valid until" dates.
• Recurring seasons only compare day and month, so they match every year. Periods across New Year are supported.

Animated gradient

Instead of an image, a season can use the background type "Animated gradient" with two to four colors. The gradient slowly drifts across the login screen. For users who prefer reduced motion, it is shown as a static gradient.

Dark mode

The login screen follows the color scheme of the operating system or browser. In the tab "Dark mode", a season can define its own background images, background color, gradient colors and highlight color for a dark color scheme. Empty fields fall back to the regular values. The dark gradient is only used if the season has the background type "Animated gradient" and at least two dark colors.

For the logo, use an SVG that adapts to the color scheme itself, e.g. with prefers-color-scheme inside the SVG.

Effects

A season can show an animated effect on the login screen:

Effect	Description
snow	Falling snowflakes
leaves	Falling autumn leaves
blossoms	Drifting cherry blossom petals
confetti	Colorful confetti, e.g. for New Year
hearts	Rising hearts, e.g. for Valentine's Day

Effects are drawn on a single <canvas> behind the login form and only load on the login screen. They respect prefers-reduced-motion and pause while the browser tab is hidden.

🧑‍💻 Contributing

Please have a look at CONTRIBUTING.md.

⭐ License

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