---
name: theme
description: "Ontwerp Power BI thema's — genereer theme.json met kleuren, fonts en visual styles"
allowed-tools: ["Read", "Write", "Edit", "Glob", "Grep"]
---

# Theme Skill

Ontwerpt en genereert Power BI thema's als `theme.json`. Biedt kleurpaletten, typografie, visual styles en sectorspecifieke paletten.

## Referenties

Lees bij eerste gebruik:
- `reference/theme-format.md` — theme.json structuur en properties
- `reference/advanced-theming.md` — geavanceerde styling, visual overrides
- `reference/6g-conventions.md` — 6gorillas standaard thema, kleuren en visual overrides

## Workflow

### Stap 1: Analyseer huidig thema (optioneel)
Als er al een `theme.json` bestaat in `<ProjectNaam>.Report/StaticResources/RegisteredResources/`:
- Lees en toon huidige kleuren
- Identificeer verbeterpunten

### Stap 2: Verzamel input
Vraag de gebruiker naar:
- **Brand colors**: primaire en secundaire kleuren
- **Huisstijl**: logo-kleuren, bestaand kleurenpalet
- **Sfeer**: professioneel, modern, speels, minimalistisch
- **Sector**: Healthcare, Finance, Retail, Technology

**6G Standaard (Thema 1.0):**
Als de gebruiker geen specifieke wensen heeft, gebruik het 6gorillas standaard thema:
- Primair: #07023E (donker navy/indigo)
- Accent: #FF4800 (fel oranje)
- Achtergrond: #F7F2EB (warm creme)
- Licht accent: #DFE9F0 (licht blauw-grijs)
- Muted: #9C9AB2 (gedempt lavendel)
- Soft accent: #FFB699 (licht zalm)
- Neutraal: #B9B6B0 (warm medium grijs)
- Donker accent: #BF3600 (burnt orange)
Font: Segoe UI, tekstkleur: #605E5C

Als de gebruiker geen voorkeur heeft en niet het 6G standaard wil, stel 3 alternatieven voor:
1. **Professional** — donkerblauw/grijs, zakelijk
2. **Modern** — levendig accent op neutrale basis
3. **Data-first** — hoog contrast, minimale afleiding

### Stap 3: Genereer kleurenpalet

**Minimum 8 dataColors** voor grafieken:

6G standaard dataColors:
```json
"dataColors": ["#07023E", "#FF4800", "#9C9AB2", "#BF3600", "#DFE9F0", "#FFB699", "#B9B6B0", "#605E5C"]
```

**Semantische kleuren** (altijd consistent):
- `good`: `#27AE60` (groen — positief, op target)
- `neutral`: `#7F8C8D` (grijs — neutraal, geen actie)
- `bad`: `#C0392B` (rood — aandacht, onder target)

**Tekst kleuren**:
- `foreground`: `#605E5C` (primaire tekstkleur)
- `foregroundNeutralSecondary`: `#9C9AB2` (secundaire/subtiele tekst)

**Achtergrond**:
- `background`: `#F7F2EB` (pagina-achtergrondkleur)

**Divergente schaal** (voor heatmaps, conditional formatting):
- `maximum`: `#07023E` (donker navy/indigo)
- `center`: `#F7F2EB` (warm creme)
- `minimum`: `#FF4800` (fel oranje)

### Stap 4: Definieer textClasses

6G standaard textClasses:
```json
"textClasses": {
  "callout": {
    "fontSize": 24,
    "fontFace": "Segoe UI",
    "color": "#605E5C"
  },
  "title": {
    "fontSize": 12,
    "fontFace": "Segoe UI",
    "color": "#605E5C"
  },
  "header": {
    "fontSize": 12,
    "fontFace": "Segoe UI Semibold",
    "color": "#605E5C"
  },
  "label": {
    "fontSize": 10,
    "fontFace": "Segoe UI",
    "color": "#605E5C"
  }
}
```

### Stap 5: Toon preview als kleurentabel
```
| Rol | Kleur | Hex | Voorbeeld |
|-----|-------|-----|-----------|
| Primary | Donker navy | #07023E | ████ |
| Accent | Fel oranje | #FF4800 | ████ |
| Background | Warm creme | #F7F2EB | ████ |
| Light accent | Blauw-grijs | #DFE9F0 | ████ |
| Muted | Lavendel | #9C9AB2 | ████ |
| Soft accent | Zalm | #FFB699 | ████ |
| Neutral | Medium grijs | #B9B6B0 | ████ |
| Dark accent | Burnt orange | #BF3600 | ████ |
| Good | Groen | #27AE60 | ████ |
| Bad | Rood | #C0392B | ████ |
| Foreground | Tekst grijs | #605E5C | ████ |
```

### Stap 6: Genereer theme.json
Schrijf naar: `<ProjectNaam>.Report/StaticResources/RegisteredResources/theme.json`

Basis structuur (6G standaard):
```json
{
  "name": "6gorillas Theme 1.0",
  "dataColors": ["#07023E", "#FF4800", "#9C9AB2", "#BF3600", "#DFE9F0", "#FFB699", "#B9B6B0", "#605E5C"],
  "background": "#F7F2EB",
  "foreground": "#605E5C",
  "tableAccent": "#07023E",
  "good": "#27AE60",
  "neutral": "#7F8C8D",
  "bad": "#C0392B",
  "maximum": "#07023E",
  "center": "#F7F2EB",
  "minimum": "#FF4800",
  "textClasses": {
    "callout": { "fontSize": 24, "fontFace": "Segoe UI", "color": "#605E5C" },
    "title": { "fontSize": 12, "fontFace": "Segoe UI", "color": "#605E5C" },
    "header": { "fontSize": 12, "fontFace": "Segoe UI Semibold", "color": "#605E5C" },
    "label": { "fontSize": 10, "fontFace": "Segoe UI", "color": "#605E5C" }
  },
  "visualStyles": {
    "*": {
      "*": {
        "background": [{ "color": { "solid": { "color": "transparent" } }, "transparency": 100 }],
        "visualHeader": [{ "show": false }],
        "border": [{ "radius": 10 }]
      }
    },
    "pivotTable": {
      "*": {
        "grid": [{ "stylePreset": "Minimal" }],
        "background": [{ "color": { "solid": { "color": "transparent" } }, "transparency": 100 }]
      }
    },
    "table": {
      "*": {
        "grid": [{ "stylePreset": "Minimal" }],
        "background": [{ "color": { "solid": { "color": "transparent" } }, "transparency": 100 }]
      }
    },
    "slicer": {
      "*": {
        "header": [{ "show": true }],
        "title": [{ "show": false }],
        "background": [{ "color": { "solid": { "color": "#9C9AB2" } } }]
      }
    },
    "pageNavigator": {
      "*": {
        "tabAlignment": [{ "alignment": "horizontal" }],
        "shape": [{ "tabStyle": "tab" }]
      }
    }
  }
}
```

### Stap 7: Instructies aan gebruiker
Na generatie:
1. Open Power BI Desktop
2. Ga naar **View** → **Themes** → **Browse for themes**
3. Selecteer het gegenereerde `theme.json` bestand
4. Het thema wordt toegepast op alle pagina's

## Ontwerpregels

### Kleurgebruik
- **Groen = goed**, **Rood = aandacht** — universeel begrepen
- Maximaal **1 accentkleur** die de aandacht trekt
- Overige kleuren ondersteunend en neutraal
- Geen puur zwart (`#000000`) op donkere thema's — gebruik `#1C2237` of vergelijkbaar

### Toegankelijkheid
- **4.5:1 contrastverhouding** voor tekst op achtergrond (WCAG AA)
- Rekening houden met **kleurenblindheid** (8% van mannen, 0.5% van vrouwen)
- Vermijd rood-groen als enige onderscheiding — gebruik ook vorm of label
- Test met een kleurenblindheid-simulator

### Sectorpaletten (alternatieven)

**Healthcare:**
```json
["#2980B9", "#27AE60", "#8E44AD", "#F39C12", "#16A085", "#C0392B", "#2C3E50", "#7F8C8D"]
```

**Finance:**
```json
["#1A5276", "#2E86C1", "#148F77", "#F39C12", "#7D3C98", "#C0392B", "#2C3E50", "#566573"]
```

**Retail:**
```json
["#E74C3C", "#3498DB", "#2ECC71", "#F39C12", "#9B59B6", "#1ABC9C", "#E67E22", "#34495E"]
```

**Technology:**
```json
["#2196F3", "#00BCD4", "#4CAF50", "#FF9800", "#9C27B0", "#F44336", "#607D8B", "#795548"]
```