# Thema beheer

## Thema's beheren

1. Ga naar **Thema** in admin menu
2. **Activeren** — Kies actief thema (wordt opgeslagen in `config.json`)
3. **SCSS compileren** — Verwerk SCSS naar CSS (geforceerd)
4. **Nieuw thema** — Eigen thema aanmaken via admin of handmatig

## Thema structuur

```
themes/default/
├── 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 (enige CSS bron — handmatige css/theme.css mag niet bestaan)
    ├── 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
```

## theme.json

```json
{
    "title": "default",
    "config": {
        "default_template": "full_content"
    },
    "template": {
        "full_content": "full_content.twig",
        "left_sidebar": "left_sidebar.twig",
        "right_sidebar": "right_sidebar.twig",
        "custom1": "custom1.twig",
        "guide": "guide.twig"
    }
}
```

- `title` — Weergavenaam in admin
- `config.default_template` — Standaard layout voor pagina's zonder `layout:` frontmatter
- `template` — Mapping van layout naam naar `.twig` bestand

## SCSS compilatie

- `ThemeManager` compileert `assets/scss/theme.scss` runtime naar `assets/css_compiled/theme.css` via scssphp
- `css_compiled/` is **read-only** — niet handmatig aanpassen
- `assets/css/theme.css` mag **niet** bestaan; anders negeert `ThemeManager::getCssUrl()` de SCSS
- Na SCSS wijzigingen: verwijder `assets/css_compiled/theme.css` en `.mtime` om te forceren

## Layouts

Layouts worden gekozen via frontmatter `layout:` key in content bestanden. Onbekende layouts vallen terug op `config.default_template` uit `theme.json`.

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