# Thema structuur

```
themes/mijn-thema/
├── theme.json              # { title, config.default_template, template: layout→.twig }
├── base.twig               # Hoofd layout (head, header, nav, breadcrumb, footer)
├── full_content.twig       # Layout: volledige breedte
├── left_sidebar.twig       # Layout: sidebar links
├── right_sidebar.twig      # Layout: sidebar rechts
├── custom1.twig            # Layout: custom
├── guide.twig              # Layout: handleiding met sidebar (Navigation plugin)
├── partials/
│   ├── header.twig
│   ├── navigation.twig
│   └── footer.twig
└── assets/
    ├── scss/theme.scss     # SCSS bron (de enige CSS bron)
    ├── css_compiled/       # Gegenereerd door scssphp (read-only, niet handmatig aanpassen)
    ├── css/                # Externe CSS (bootstrap.min.css, bootstrap-icons.css, mobile.css)
    ├── js/                 # app.js, bootstrap.bundle.min.js
    ├── fonts/              # bootstrap-icons.woff, woff2
    └── img/                # favicon, icon, world-map
```

## SCSS is de enige CSS bron

- **ALTIJD** `assets/scss/theme.scss` aanpassen — dit is de enige CSS bron
- `ThemeManager` compileert SCSS runtime naar `assets/css_compiled/theme.css` via scssphp
- `assets/css_compiled/` is **read-only** — niet handmatig aanpassen
- **NOOIT** `assets/css/theme.css` handmatig aanmaken of aanpassen; dit bestand mag niet bestaan
- `ThemeManager::getCssUrl()` prioriteit: 1) `assets/css/theme.css` (handmatig), 2) `assets/css_compiled/theme.css` (gecompileerd). Als `theme.css` bestaat, wordt de SCSS negeren.
- Na SCSS wijzigingen: verwijder `assets/css_compiled/theme.css` en `.mtime` om te forceren

```bash
rm themes/mijn-thema/assets/css_compiled/theme.css themes/mijn-thema/assets/css_compiled/.mtime
```

## guide.twig

Speciale layout voor handleidingen. Injecteert de Navigation plugin in de sidebar voor zijbalk navigatie. Wordt automatisch gebruikt voor pagina's in de `guide/` map.

## Plugin CSS laden

Plugin CSS wordt automatisch geladen ná theme CSS in `base.twig`, zodat thema's plugin styling kunnen overschrijven:

```twig
{% for cssUrl in plugin_css_urls|default([]) %}
    <link href="{{ cssUrl }}" rel="stylesheet">
{% endfor %}
```