Demo-only Theme-Switcher-Overlay für die Erdmann & Freunde Contao Themes (SOLO, LASR, Nutshell). Das Bundle stellt die Mechanik bereit (Injektion, Markup, JS); Styles, Schriften und Labels werden pro Theme vergeben.
Der Switcher ist damit nicht mehr Teil des ausgelieferten Themes: Kund:innen
installieren dieses Bundle nicht und setzen das Flag nicht – das Overlay bleibt
inaktiv. Demo und Kund:innen können dieselbe Datenbank nutzen, der Unterschied
liegt allein in der .env der jeweiligen Installation.
Ein kernel.response-Listener hängt – nur wenn enabled true ist – bei jeder
HTML-Frontend-Response das Overlay ein:
- in den
<head>: das pro-Theme-Stylesheet + ein frühesdata-theme-aus-localStorage-Snippet (verhindert Flash of Unstyled Content), - vor
</body>: das Swatch-Dock-Markup + die Switcher-JS.
Kein Frontend-Modul, kein Layout-Eintrag, keine DB-Records nötig.
composer require erdmannfreunde/contao-theme-demo-bundleIn der .env.local der Demo-Installation:
THEME_DEMO=1Die Kund:innen-Installation hat ihre eigene .env.local ohne dieses Flag – dort
bleibt der Switcher aus.
config/config.yml:
contao_theme_demo:
enabled: '%env(bool:THEME_DEMO)%'
stylesheet: '/bundles/contaothemedemo/themes/solo/theme-switcher.css'
# script: '/bundles/contaothemedemo/theme-switcher.js' # optional, das ist der Default
# storage_key: 'theme' # optional, muss zur JS passen
themes:
- { key: '', label: 'Original' } # leerer Key = entfernt data-theme -> :root des Themes
- { key: 'theme-1', label: 'Source Sans 3 + Merriweather' }
- { key: 'theme-2', label: 'Source Sans 3' }
- { key: 'theme-3', label: 'Websafe Font' }„Original" ist bewusst kein eigener Paletten-Block: bei leerem Key entfernt
der Switcher data-theme komplett, sodass die :root-Werte aus der default.css
des Themes greifen. So muss die Standard-Palette nie im Bundle gepflegt werden.
Die Demo-Styles sind eigenständig (reines CSS mit Custom Properties) – keine Theme-/nutshell-Abhängigkeit zur Build-Zeit:
npm install # einmalig
npm run build # scss/solo/demo.scss -> public/themes/solo/theme-switcher.cssDie genutzten --color-brand / --base-*-Properties liefert zur Laufzeit die
default.css des Themes, die auf der Demo ohnehin geladen ist.
scss/lasr/analog zuscss/solo/anlegen (Entrydemo.scss+_theme-palettes.scss,_theme-switcher.scss,_demo-fonts.scss).- In
package.jsoneinen Build-Eintrag nachpublic/themes/lasr/theme-switcher.cssergänzen; etwaige Demo-Schriften nachpublic/themes/lasr/fonts/. - In der
config.ymlder Demostylesheetauf den Slug zeigen und diethemes-Liste pflegen.
src/ # Listener, Plugin, DI – generisch
templates/head.html.twig # generisch
templates/switcher.html.twig # generisch (iteriert über themes)
public/theme-switcher.js # generisch
scss/<slug>/ # pro Theme: Quellen (demo.scss + Partials)
public/themes/<slug>/theme-switcher.css # pro Theme: gebaut
public/themes/<slug>/fonts/ # pro Theme: Demo-Schriften