Design-uitrol merk-DNA: thema-kleuren + Roboto + knoppen oranje (P1-32/34/38)

- P1-32: alle 7 merkkleuren in Theme Settings gezet (licht én donker),
  geverifieerd via verse export in flutter_flow_theme.dart.
- P1-34: Primary/Secondary Font Family op Roboto (15 tekststijlen).
- P1-38: lichtroze vlak + grijze rand rond de Home-slider weg.
- Opvolgstap van P1-32: 9 knoppen van rood (primary) naar merk-oranje
  (secondary) — Inloggen, Verstuur, Toepassen, 2x Voeg toe, Mijn Account,
  drawer-userName, Alle evenementen, Alle horecagelegenheden.
- Nieuw: P1-39 (3 knoppen op stadsactiviteit_aanmaken, overgeslagen wegens
  gelijktijdige P2-15-sessie), P1-40 (TabBar-indicator rood vs oranje),
  P1-41 (dark mode staat aan via ThemeMode.system maar is nooit ontworpen).
- CLAUDE.md: werkend recept voor Theme Settings, thema-token-binding en
  de drie zoekbalken in de builder.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

CLAUDE.md

@@ -776,6 +776,52 @@ meerdere plekken) — niet opnieuw naar een "Contains"-operator in de
 conditie zelf zoeken, die bestaat niet; ga altijd via deze
 Set-from-Variable-transform-route op de lijst-variabele.
 
+**Thema-kleuren en -lettertype zetten (Theme Settings) — werkend recept
+2026-08-31, Claude, volledig via browser-automation gelukt.** Theme
+Settings zit *niet* op `?tab=theme` (die URL redirect stil naar de
+laatst geopende pagina) maar op
+`?tab=themeSettings&themeTab=color`; in de linkerrail is het het
+**palet-icoontje net bóven het tandwiel** onderaan. Een kleur wijzigen:
+klik het swatch-blokje → "Choose a Color"-dialoog → **triple-click het
+hex-veld → typ de 6 tekens zonder `#` → Return** → sluiten met de X
+rechtsboven. Lettertype: knoppen "Primary Font Family"/"Secondary Font
+Family" rechtsboven op de Typography-tab; Roboto staat bovenaan de
+Google-Fonts-lijst.
+- **Kritieke timing-valkuil: de dialoog opent traag en vaak pas bij de
+  twééde klik.** Een `browser_batch` van "klik swatch → typ → Return"
+  faalt daardoor stil (de klik landt, de dialoog verschijnt pas ná de
+  typ-actie, en het paneel toont daarna gewoon de oude waarde — geen
+  foutmelding). **Vaste werkwijze: één call om de dialoog te openen +
+  te verifiëren (screenshot/zoom), een tweede call om te wijzigen en te
+  sluiten.** Reken op 6-8 seconden wachttijd na de openings-klik, en
+  klik desnoods een tweede keer als de eerste niets deed.
+
+**Een widget-kleur aan een thema-token binden (i.p.v. een hardcoded
+hex): klik het kleine kleurblokje vóór de kleurnaam, niet de tekst
+ernaast.** Klikken op de *tekst* ("Primary", of een hex) maakt er een
+bewerkbaar tekstveld van — daar een hex intypen levert weer een
+hardcoded kleur op, precies wat P1-33 probeert weg te werken. Klikken
+op het **blokje** opent "Choose a Color" met onderaan een
+**"Theme Colors"**-lijst (Primary/Secondary/Tertiary/Alternate/…);
+één klik op een regel daar bindt aan het token en genereert
+`FlutterFlowTheme.of(context).<token>`.
+
+**Snelste route naar een specifiek widget op een pagina: de
+zoekbalken, niet scrollen/klikken in de boom.** Drie zoekvelden werken
+betrouwbaar en besparen veel misklikken (zie de bekende
+tree-coördinaat-instabiliteit hieronder): (1) **"Search pages or
+components..."** bovenin het linkerpaneel — pagina's én componenten,
+wisselt binnen de app (±15s) i.p.v. een volledige URL-navigatie (±35s
+herlaad van de hele builder); (2) **"Search for widget..."** in het
+Widget-Tree-paneel — typ bv. `Button` en de boom filtert tot alleen
+die nodes, ongeacht hoe diep ze genest zijn; (3) **"Search
+properties..."** rechtsboven — filtert het rechterpaneel tot bv. alleen
+"Fill Color", waardoor die eigenschap bovenaan komt te staan i.p.v.
+onderaan tegen de vensterrand. **Let op:** na het selecteren van een
+tree-node duurt het 3-5s voor het rechterpaneel bruikbaar is; een
+klik/typ-actie die te snel volgt komt niet aan (stil, geen foutmelding)
+— altijd verifiëren met een zoom-screenshot vóór je verdergaat.
+
 **Rechterpaneel-clipping: gebruik de "Search properties..."-zoekbalk
 i.p.v. scrollen.** Het rechterpaneel (Widget Tree → property-editor)
 scrollt via browser-automation vaak niet (muiswiel-events lijken geen

TASKS.md

@@ -2111,19 +2111,35 @@ in Drupal, geen uitputtende audit.
 Volledige onderbouwing met screenshots: [Designbrug-rapport](https://claude.ai/code/artifact/29f3412a-305f-49f3-971c-cd9bd310beb1).
 Afvinkbare werklijst: [Designbrug werklijst](https://claude.ai/code/artifact/0c0c7347-d681-417d-83d7-7feb1de6457d).)*
 
-**P1-32 · Eigenaar: Bob** (7 velden, ±10 min in zijn eigen browser).
-Merkkleuren in Theme Settings → Colors zetten; het thema staat nog
-volledig op FlutterFlow-fabrieksinstelling. `primary` #4B39EF →
-**#9A141D** (logo-rood), `secondary` #39D2C0 → **#FF680D**
-(actie-oranje van de site), `tertiary` #EE8B60 → **#09B34A**
-(categoriegroen), `primaryText` #14181B → **#3E454C**, `secondaryText`
-#57636C → **#838A8F**, `primaryBackground` #F1F4F8 → **#F2F2F2**,
-`alternate` #E0E3E7 → **#EEEEEE**. **Direct daarna nalopen:** alle nu
-paarse knoppen worden hierdoor rood, maar op de site is rood nooit een
-knopkleur — "Alle evenementen"/"Alle horecagelegenheden" horen oranje
-te worden. Vuistregel: rood = merk en chroom, oranje = wat je aanklikt.
-
-**P1-33 · Eigenaar: Claude** (mechanisch, ±1 sessie; pas ná P1-32).
+**P1-39 · Eigenaar: Claude/Bob — restpunt van het kleurwerk van
+2026-08-31.** Drie knoppen op `stadsactiviteit_aanmaken_widget.dart`
+staan nog op thema-`primary` (rood): "Logo kiezen" (:2458), "Foto's
+kiezen" (:2547) en "Activiteit indienen" (:2650). Bewust overgeslagen
+omdat een andere sessie op dat moment actief aan P2-15 op diezelfde
+pagina bouwde. Fix per knop: Button-node selecteren → rechterpaneel
+**Fill Color** → swatch → **Theme Colors → Secondary**. Vuistregel
+blijft: rood = merk en chroom, oranje = wat je aanklikt.
+
+**P1-40 · Eigenaar: Bob (ontwerpbesluit).** De `TabBar`-
+`indicatorColor` staat op thema-`primary` (rood) op o.a.
+`home_widget.dart:257` en `horecagelegenheden_overzicht_widget.dart:268`
+(+ de twee overzicht-kopieën). Op uitgaanskrant.com is de *actieve*
+pagina/tab juist **oranje** — dus die indicator hoort waarschijnlijk
+`secondary` te worden. Niet zelf omgezet omdat het de vraag oproept of
+een tab-indicator "chroom" of "actie" is; jij beslist. Zelfde
+Fill-Color/Theme-Colors-route als P1-39.
+
+**P1-41 · Eigenaar: Bob (ontwerpbesluit).** Het **dark-mode-thema**
+staat aan én `main.dart` gebruikt `ThemeMode.system` — een gebruiker
+met een donker toestel krijgt dus het donkere thema. De merkkleuren
+(primary/secondary/tertiary) zijn 2026-08-31 óók in het dark-thema
+gezet, maar de rest van dat thema (achtergronden, tekstkleuren) is
+nooit ontworpen en de app staat vol hardcoded lichte kleuren. Keuze:
+óf het dark-thema echt uitwerken, óf dark mode uitzetten (de site is
+puur licht). Tot die keuze is dark mode ongetest.
+
+**P1-33 · Eigenaar: Claude** (mechanisch, ±1 sessie; P1-32 is
+afgerond 2026-08-31, dus dit kan nu).
 Drie bijna-gelijke hardcoded roden vervangen door thema-`primary`:
 `#B1061E` (42×), `#B50808` (15×), `#B12727` (8×) — geen daarvan is het
 logo-rood. Verspreid over 25 bestanden; zwaartepunten:
@@ -2136,12 +2152,6 @@ overzicht-varianten zijn onderling kopieën — elke ingreep is er drie
 keer dezelfde; samenvoegen tot één pagina met parameters scheelt bij
 élke volgende taak op die schermen.
 
-**P1-34 · Eigenaar: Bob** (1 instelling). Body-lettertype in Theme
-Settings → Typography van Inter/Inter Tight naar **Roboto**, het
-lettertype van de site. Layoutrisico klein (letters lijken sterk op
-elkaar); daarna wel even de tabbalken nalopen, daar zit de minste
-ruimte.
-
 **P1-35 · Eigenaar: Bob** (klein per pagina). Advertentieblok staat op
 de detailpagina's direct onder de titel en duwt tabs/adres/tijden onder
 de vouw. De site zet advertenties consequent ná de inhoud. Verplaats de
@@ -3280,17 +3290,14 @@ passen, en op telefoon staan er 2 naast elkaar in een kaart die op
 volle breedte ontworpen is. Zet dit om naar dezelfde responsieve
 uitdrukking als punt 1.
 
-**4. De sliderband is géén tabletprobleem — apart opgevoerd als
-P1-38.** De "leeg vlak"-indruk komt van een lichtroze container die
-óók op telefoonformaat zichtbaar is; zie P1-38 hieronder. Op tablet
-valt hij alleen meer op omdat het vlak breder wordt. Wat wel
+**4. De sliderband is géén tabletprobleem — het lichtroze vlak
+eromheen is opgelost (2026-08-31: fill- en randkleur van de container
+op `home_widget.dart` gewist).** Wat wel
 tablet-specifiek is: `viewportFraction: 0.75`
 (`home_uitgaan_slider_component_widget.dart:287` en
 `p_uitgaan_slider_component_widget.dart:280`) betekent op 1280 dp een
 kaart van 960 dp breed — één enorme kaart per scherm. Dat verdient
-dezelfde breekpunt-behandeling (bv. 0.75 / 0.5 / 0.35), maar pas
-nadat P1-38 de kleur heeft opgelost, anders kijk je naar twee
-problemen tegelijk.
+dezelfde breekpunt-behandeling (bv. 0.75 / 0.5 / 0.35).
 
 *Screenshots van deze meting staan in de sessie-scratchpad en zijn niet
 bewaard; opnieuw maken kost twee minuten met de `wm size`-truc
@@ -3327,28 +3334,4 @@ eenmaal werkt.
 
 ---
 
-**P1-38 · Eigenaar: Bob (1 kleurwaarde) — past bij het P1-32/P1-33-
-kleurwerk.** Rond de slider op de Home-pagina staat een **lichtroze
-vlak met een grijze rand**, zichtbaar op élk schermformaat (bevestigd
-op zowel telefoon- als tabletformaat, 2026-08-31).
-
-`home_widget.dart:187-195`:
-```
-Container(
-  height: 250.0,
-  decoration: BoxDecoration(
-    color: Color(0xFFF5A2A2),
-    border: Border.all(color: Color(0xFFCAC3C3), width: 2.0),
-  ),
-```
-`#F5A2A2` en `#CAC3C3` komen in geen van beide merkpaletten voor (zie
-het merk-DNA in `CLAUDE.md`: #9A141D, #FF680D, #3E454C, #09B34A,
-#F2F2F2) en staan ook niet in `flutter_flow_theme.dart`. Ziet eruit als een
-achtergebleven hulpkleur om de slider-container zichtbaar te maken
-tijdens het bouwen. Omdat de carousel-kaarten de vaste hoogte van 250
-dp niet vullen, is het vlak er duidelijk omheen te zien.
-
-*Fix:* de `Fill Color` van deze container op transparant zetten (of op
-`#F2F2F2` als er bewust een rustvlak achter de slider moet), en de
-2px-rand weghalen. Eén widget, één eigenschap.