[Bug] Dia-inhoud beweegt mee met het app-thema: een codeblok en een grafiek-tooltip worden in donkere modus onleesbaar

brenno commented

2026-07-24 20:31:57 +00:00

Owner

Gevonden tijdens de inventarisatie voor #814, niet gezocht: er zijn dia-onderdelen die zich uit mode-afhankelijke AppTheme-tokens kleuren. Een dia is een vast wit canvas, dus die tokens keren om terwijl het canvas blijft staan.

Dat is dezelfde klasse als #606 en als de vondst in #780 — maar de toets die daaruit voortkwam dekt hem niet.

Twee gevolgen, allebei nagemeten

	licht	donker
Grafiek-tooltip: `Colors.white` op `AppTheme.ink`	17,85:1	1,18:1
Codeblok mét taal: `githubTheme` (root `#333333`) op `AppTheme.ghSurface`	11,87:1	1,23:1

_tooltipStyle() in chart_preview.dart:703 zet color: Colors.white, de bak eronder krijgt color: AppTheme.ink. In lichte modus is ink #0F172A — wit op donkerblauw, uitstekend. In donkere modus is ink #E8ECF3: wit op bijna-wit.

Raakt alle drie de tooltip-plekken: chart_preview.dart:863 (taart), chart_preview_cartesian.dart:54 en :219, chart_preview_radar.dart:367.

2. Een codeblok op een dia

text_previews.dart:729 vult het blok met AppTheme.ghSurface — in donkere modus #20242B. De tekst komt uit HighlightView(theme: githubTheme), en dat is de lichte GitHub-syntaxkleurstelling met root #333333. Donkere letters op een donkere bak.

Het is precies de tak mét taalherkenning die stuk is:

final known = language.isNotEmpty && allLanguages.containsKey(language);
final Widget content = known
    ? HighlightView(code, language: language, theme: githubTheme, …)   // 1,23:1
    : Text(code, style: mono);                                          // ghInk op ghSurface: 11,96:1

Bij een onbekende taal valt het terug op mono met ghInk, en dát paar is in beide modi goed. Wie ```dart schrijft krijgt dus een onleesbaar blok, wie ``` schrijft niet. mermaid_diagram.dart:106-116 gebruikt dezelfde gh*-tinten en verdient dezelfde blik.

Waarom dit meer is dan een contrastdefect

De dia is de plek waar het het duurst is. Wie in donkere modus presenteert, zet dit op de beamer — en de HTML-export draait zónder thema en schrijft altijd de lichte waarden. Dan wijkt de weergave in de editor af van wat de export oplevert, terwijl het exportdialoog belooft dat die exact gelijk zijn. Dat is letterlijk de redenering die al in app_theme_contrast_test.dart staat bij de toets 'de dia-inkt is leesbaar op wit en beweegt niet met het thema'.

Die toets vangt dit niet, en dat is geen fout van de toets: hij somt drie tokens op — slideInk, slideInkMuted, slideInkSoft — en ink, ghSurface, ghInk, ghBorder en warningFg staan er niet in. Een tokenlijst bewaakt wat erin staat.

Richtingen (open)

De invariant "een dia beweegt niet met het thema" toetsen op de gebruiksplek in plaats van op een tokenlijst: welk token schildert iets onder lib/widgets/slides/? Dat is een bronwacht, en die veroudert niet bij het volgende token.
Voor de tooltip: een vaste donkere bak in plaats van ink, of de tekstkleur uit de bak afleiden (_labelOn, die bestaat al in app_theme.dart).
Voor het codeblok: gh* vastzetten op de lichte waarden voor alles onder slides/, óf de syntaxkleurstelling meebewegen met de bak in plaats van hem vast te pinnen. Het eerste past bij de regel "een dia is een wit canvas"; het tweede maakt de dia thema-afhankelijk en botst dus met de export.
overlays.dart gebruikt warningFg — niet nagemeten, hoort in dezelfde ronde.

Weging

Bug, geen privacy of beveiliging. Wel het oppervlak waar een fout het duurst is: iemand staat ermee voor een zaal. De reparatie zelf is klein; de poort eromheen is het eigenlijke werk, want zonder die poort komt het volgende token er gewoon weer in.

Herkomst: inventarisatie voor #814 (welke bestanden lezen een mode-afhankelijk token), 24-07-2026. Alle getallen hierboven zijn gemeten op a5097015, niet geschat.

Gevonden tijdens de inventarisatie voor #814, niet gezocht: er zijn dia-onderdelen die zich uit **mode-afhankelijke** `AppTheme`-tokens kleuren. Een dia is een vast wit canvas, dus die tokens keren om terwijl het canvas blijft staan. Dat is dezelfde klasse als #606 en als de vondst in #780 — maar de toets die daaruit voortkwam dekt hem niet. ## Twee gevolgen, allebei nagemeten | | licht | donker | |---|---|---| | Grafiek-tooltip: `Colors.white` op `AppTheme.ink` | 17,85:1 | **1,18:1** | | Codeblok mét taal: `githubTheme` (root `#333333`) op `AppTheme.ghSurface` | 11,87:1 | **1,23:1** | ### 1. De tooltip van een grafiek `_tooltipStyle()` in `chart_preview.dart:703` zet `color: Colors.white`, de bak eronder krijgt `color: AppTheme.ink`. In lichte modus is `ink` `#0F172A` — wit op donkerblauw, uitstekend. In donkere modus is `ink` `#E8ECF3`: wit op bijna-wit. Raakt alle drie de tooltip-plekken: `chart_preview.dart:863` (taart), `chart_preview_cartesian.dart:54` en `:219`, `chart_preview_radar.dart:367`. ### 2. Een codeblok op een dia `text_previews.dart:729` vult het blok met `AppTheme.ghSurface` — in donkere modus `#20242B`. De tekst komt uit `HighlightView(theme: githubTheme)`, en dat is de **lichte** GitHub-syntaxkleurstelling met root `#333333`. Donkere letters op een donkere bak. **Het is precies de tak mét taalherkenning die stuk is:** ```dart final known = language.isNotEmpty && allLanguages.containsKey(language); final Widget content = known ? HighlightView(code, language: language, theme: githubTheme, …) // 1,23:1 : Text(code, style: mono); // ghInk op ghSurface: 11,96:1 ``` Bij een onbekende taal valt het terug op `mono` met `ghInk`, en dát paar is in beide modi goed. Wie ` ```dart ` schrijft krijgt dus een onleesbaar blok, wie ` ``` ` schrijft niet. `mermaid_diagram.dart:106-116` gebruikt dezelfde `gh*`-tinten en verdient dezelfde blik. ## Waarom dit meer is dan een contrastdefect De dia is de plek waar het het duurst is. Wie in donkere modus presenteert, zet dit op de beamer — en de HTML-export draait zónder thema en schrijft altijd de lichte waarden. Dan wijkt de weergave in de editor af van wat de export oplevert, terwijl het exportdialoog belooft dat die exact gelijk zijn. Dat is letterlijk de redenering die al in `app_theme_contrast_test.dart` staat bij de toets *'de dia-inkt is leesbaar op wit en beweegt niet met het thema'*. **Die toets vangt dit niet**, en dat is geen fout van de toets: hij somt drie tokens op — `slideInk`, `slideInkMuted`, `slideInkSoft` — en `ink`, `ghSurface`, `ghInk`, `ghBorder` en `warningFg` staan er niet in. Een tokenlijst bewaakt wat erin staat. ## Richtingen (open) - De invariant "een dia beweegt niet met het thema" toetsen op de **gebruiksplek** in plaats van op een tokenlijst: welk token schildert iets onder `lib/widgets/slides/`? Dat is een bronwacht, en die veroudert niet bij het volgende token. - Voor de tooltip: een vaste donkere bak in plaats van `ink`, of de tekstkleur uit de bak afleiden (`_labelOn`, die bestaat al in `app_theme.dart`). - Voor het codeblok: `gh*` vastzetten op de lichte waarden voor alles onder `slides/`, óf de syntaxkleurstelling meebewegen met de bak in plaats van hem vast te pinnen. Het eerste past bij de regel "een dia is een wit canvas"; het tweede maakt de dia thema-afhankelijk en botst dus met de export. - `overlays.dart` gebruikt `warningFg` — niet nagemeten, hoort in dezelfde ronde. ## Weging Bug, geen privacy of beveiliging. Wel het oppervlak waar een fout het duurst is: iemand staat ermee voor een zaal. De reparatie zelf is klein; de poort eromheen is het eigenlijke werk, want zonder die poort komt het volgende token er gewoon weer in. **Herkomst:** inventarisatie voor #814 (welke bestanden lezen een mode-afhankelijk token), 24-07-2026. Alle getallen hierboven zijn gemeten op `a5097015`, niet geschat.

brenno added the

bug

label

2026-07-24 20:31:57 +00:00

brenno commented

2026-07-24 22:08:41 +00:00

Author

Owner

Opgepakt als de concrete, gemeten kop van de donkere-modus-restschuld (#825 is de bredere kijkronde). Tak: fix/dia-inhoud-thema-onafhankelijk-822. Reikwijdte: grafiek-tooltips, het codeblok mét taalherkenning, de mermaid-tinten, en een bronwacht op de gebruiksplek onder lib/widgets/slides/ i.p.v. een tokenlijst.

brenno added the

in-progress

label

2026-07-24 22:08:42 +00:00

brenno referenced this issue from a pull request that will close it,

2026-07-24 22:30:17 +00:00

fix(a11y): dia-inhoud bewoog mee met het app-thema — codeblok, grafiek-tooltip en projectielabel (#822) #827

brenno referenced this issue from a commit

2026-07-24 22:30:18 +00:00

fix(a11y): dia-inhoud bewoog mee met het app-thema en werd onleesbaar (#822)

brenno closed this issue

2026-07-24 22:34:07 +00:00

brenno referenced this issue from a commit

2026-07-24 22:34:07 +00:00

Merge pull request 'fix(a11y): dia-inhoud bewoog mee met het app-thema — codeblok, grafiek-tooltip en projectielabel (#822)' (#827) from fix/dia-inhoud-thema-onafhankelijk-822 into main

brenno commented

2026-07-24 22:34:58 +00:00

Author

Owner

Gemerged in 9a03156e (PR #827), op main geverifieerd — slide_content_theme_independent_test draait daar groen. Draaiend nagekeken in donkere modus: het codeblok (lichte bak, donkere syntax) leest, en de grafiek-tooltip staat wit op donkerblauw.

Gemerged in `9a03156e` (PR #827), op main geverifieerd — `slide_content_theme_independent_test` draait daar groen. Draaiend nagekeken in donkere modus: het codeblok (lichte bak, donkere syntax) leest, en de grafiek-tooltip staat wit op donkerblauw.

brenno referenced this issue

2026-07-24 22:37:53 +00:00

Donkere modus: het beamerscherm (twee schermen nodig) en de resterende slide-editors, per stuk #825

Rows
Columns

[Bug] Dia-inhoud beweegt mee met het app-thema: een codeblok en een grafiek-tooltip worden in donkere modus onleesbaar #822

Twee gevolgen, allebei nagemeten

1. De tooltip van een grafiek

2. Een codeblok op een dia

Waarom dit meer is dan een contrastdefect

Richtingen (open)

Weging