README

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.

Funktionsweise

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ühes data-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.

Installation (nur Demo-Installationen)

composer require erdmannfreunde/contao-theme-demo-bundle

Aktivierung

In der .env.local der Demo-Installation:

THEME_DEMO=1

Die Kund:innen-Installation hat ihre eigene .env.local ohne dieses Flag – dort bleibt der Switcher aus.

Konfiguration (pro Theme)

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.

Styles bauen

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.css

Die genutzten --color-brand / --base-*-Properties liefert zur Laufzeit die default.css des Themes, die auf der Demo ohnehin geladen ist.

Ein neues Theme anbinden (z. B. LASR)

scss/lasr/ analog zu scss/solo/ anlegen (Entry demo.scss + _theme-palettes.scss, _theme-switcher.scss, _demo-fonts.scss).
In package.json einen Build-Eintrag nach public/themes/lasr/theme-switcher.css ergänzen; etwaige Demo-Schriften nach public/themes/lasr/fonts/.
In der config.yml der Demo stylesheet auf den Slug zeigen und die themes-Liste pflegen.

Verzeichnisstruktur

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

nutshell-framework / contao-theme-demo-bundle

Maintainers

Package info

Statistics

Security