PHPackages                             nutshell-framework/contao-theme-demo-bundle - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. nutshell-framework/contao-theme-demo-bundle

ActiveContao-bundle[Utility & Helpers](/categories/utility)

nutshell-framework/contao-theme-demo-bundle
===========================================

Demo-only Theme-Switcher-Overlay für Flow Contao Themes (SOLO, LASR, Nutshell). Wird per .env-Flag aktiviert und ist nicht Teil des ausgelieferten Themes.

1.0.1(1mo ago)07↓88.9%MITSCSSPHP ^8.1

Since Jun 2Pushed 1mo agoCompare

[ Source](https://github.com/nutshell-framework/contao-theme-demo-bundle)[ Packagist](https://packagist.org/packages/nutshell-framework/contao-theme-demo-bundle)[ RSS](/packages/nutshell-framework-contao-theme-demo-bundle/feed)WikiDiscussions main Synced 1w ago

READMEChangelogDependencies (5)Versions (3)Used By (0)

contao-theme-demo-bundle
========================

[](#contao-theme-demo-bundle)

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

[](#funktionsweise)

Ein `kernel.response`-Listener hängt – nur wenn `enabled` true ist – bei jeder HTML-Frontend-Response das Overlay ein:

- in den ``: das pro-Theme-Stylesheet + ein frühes `data-theme`-aus- `localStorage`-Snippet (verhindert Flash of Unstyled Content),
- vor ``: das Swatch-Dock-Markup + die Switcher-JS.

Kein Frontend-Modul, kein Layout-Eintrag, keine DB-Records nötig.

Installation (nur Demo-Installationen)
--------------------------------------

[](#installation-nur-demo-installationen)

```
composer require erdmannfreunde/contao-theme-demo-bundle
```

Aktivierung
-----------

[](#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)
-------------------------

[](#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
------------

[](#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)
-------------------------------------

[](#ein-neues-theme-anbinden-z-b-lasr)

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

Verzeichnisstruktur
-------------------

[](#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//                             # pro Theme: Quellen (demo.scss + Partials)
public/themes//theme-switcher.css  # pro Theme: gebaut
public/themes//fonts/              # pro Theme: Demo-Schriften

```

###  Health Score

38

—

LowBetter than 83% of packages

Maintenance90

Actively maintained with recent releases

Popularity4

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity43

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~0 days

Total

2

Last Release

52d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/d0c18094f552ca25ac29a9ef3763092f24b2be3158b2d047e644eef8a8a10282?d=identicon)[erdmannfreunde](/maintainers/erdmannfreunde)

---

Top Contributors

[![denniserdmann](https://avatars.githubusercontent.com/u/3773697?v=4)](https://github.com/denniserdmann "denniserdmann (2 commits)")

### Embed Badge

![Health badge](/badges/nutshell-framework-contao-theme-demo-bundle/health.svg)

```
[![Health](https://phpackages.com/badges/nutshell-framework-contao-theme-demo-bundle/health.svg)](https://phpackages.com/packages/nutshell-framework-contao-theme-demo-bundle)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)