[Bug] Het logo is in donkere modus een groot wit vlak

brenno commented

2026-07-23 12:12:27 +00:00

Owner

Wat er gebeurt

Zet je het uiterlijk van de applicatie op Donker, dan staat het logo op het
openscherm als een groot, egaal wit blok op de donkere achtergrond. Het leest
niet als een logo maar als een gat in het scherm.

Reproduceren: Instellingen → Uiterlijk → profiel Donker, dan een tabblad
sluiten tot je op het openscherm staat.

Waarom

Het ligt niet aan de weergave maar aan de bestand zelf.
assets/images/ocideck-logo.png (512×512, RGBA) heeft geen transparantie:
alle vier de hoeken zijn #FFFFFF bij alpha 255, en ongeveer 89% van het beeld
is zuiver wit. Het is een logo met een witte plaat eromheen ingebakken. Op een
licht oppervlak valt die plaat weg, op een donker oppervlak is het het enige wat
je ziet.

Het donkere profiel gebruikt surfaceColor: #1E293B
(lib/models/parts/app_appearance_profile.dart), en het openscherm zet dat als
scaffold-achtergrond. Wit op #1E293B is het maximale contrast dat er is —
precies de verkeerde kant op.

Drie plekken tonen dit bestand:

Plek	Grootte	Wat je ziet
`lib/widgets/shell/welcome_screen.dart:66`	200 px breed	het grote witte vlak uit de melding
`lib/widgets/dialogs/consent_dialog.dart:39`	40 px hoog	kleiner, maar wel het eerste scherm dat een nieuwe gebruiker ziet
`lib/widgets/dialogs/parts/settings_dialog_about.dart:200`	48 px	het pictogram op de licentiepagina

Hoe het wél goed gaat

De zijbalk van het instellingenvenster doet het al goed en heeft de oplossing
zelfs opgeschreven — lib/widgets/dialogs/parts/settings_dialog_chrome.dart:152:

EU-yellow recolour of the logo, so it reads on the dark sidebar without a
backing plate.

Daar hangt assets/images/ocideck-logo-eu.png: een palet-PNG mét tRNS, dus
een écht transparante achtergrond, met de inkt hertint naar EU-vlaggeel
#FFCC00. Datzelfde bestand draagt de banner van "Over OciDeck"
(settings_dialog_about.dart:277) op een navy verloop. Geen plaat, geen rand,
en het werkt op elke ondergrond.

Dat is de aanpak die het openscherm mist.

De andere kant van dezelfde munt

assets/images/librekat-logo.png (250×250) heeft het omgekeerde probleem: die
is wél transparant, maar de inkt is bijna zwart (~#202020) en beslaat maar
7,6% van het vlak. Op een donker oppervlak verdwijnt hij.

Dat valt vandaag nog niet op, omdat het paneel "Over OciDeck" zijn kaarten
hardcodeert op wit — settings_dialog_about.dart:391 en :450 zetten
color: Colors.white in plaats van AppTheme.paper, dat juist voor dit doel
bestaat ("wit papier-oppervlak voor editor-chrome … in donkere modus een donker
oppervlak"). Die kaarten blijven dus wit, ongeacht het gekozen profiel — op
zichzelf een fout, maar wel de reden dat het LibreKAT-logo daar nu nog leesbaar
is.

Belangrijk voor de volgorde: repareer je die Colors.white zonder het logo
mee te nemen, dan verdwijnt het LibreKAT-logo in de donkere kaart. De twee
horen in één beweging.

Voorstel

A — een tweede bestand, per modus gekozen (aanbevolen).
Lever assets/images/ocideck-logo-dark.png: dezelfde tekening, transparante
achtergrond, inkt licht genoeg voor een donker oppervlak. De EU-variant bewijst
dat die route werkt; voor het openscherm is een lichte woordmerk-versie mooier
dan geel, want geel is de accentkleur van de zijbalk en niet van het product.
Doe hetzelfde voor librekat-logo-dark.png.

Zet de keuze op één plek — een kleine lib/widgets/brand_logo.dart of een
getter naast AppTheme — die de juiste asset-sleutel teruggeeft voor de huidige
modus, zodat de drie aanroepplekken niet elk hun eigen if (isDark) krijgen. De
vierde die er ooit bijkomt, krijgt het dan gratis goed.

Registreer beide bestanden in pubspec.yaml.

B — geen nieuw bestand, wel een bewuste badge.
Behoud één asset en geef hem in donkere modus dezelfde behandeling als de
"Over OciDeck"-banner: een afgeronde container in navy of EU-blauw eromheen. Het
witte vlak wordt dan een opzettelijk plaatje in plaats van een ongeluk.
Goedkoper, maar het licentiepictogram lost het niet op en het blijft een
omweg om een asset-probleem heen.

C — het wit uit het bestaande bestand halen en per modus tinten.
Afgeraden. De tekening bevat zelf witte vormen; een vlakke tint plet die weg.

Aanbeveling: A, met de Colors.white-reparatie in het paneel "Over
OciDeck" in dezelfde PR.

Regressietest

Een bugfix hoort niet alleen de fout weg te nemen maar ook terug te kunnen
komen zien:

Widgettest — pomp het openscherm onder het profiel Donker en toets dat
de gerenderde Image de donkere asset-sleutel draagt (en de lichte onder
Basic). Dit vangt de aanroepplek die de helper vergeet.
test/app_theme_dark_test.dart is de logische plek.
Assettoets — dat is de test die deze fout écht had gevangen: decodeer de
logo-assets en eis dat de randpixels van elke voor donkere modus bedoelde
variant alpha 0 hebben. De fout hier was niet een vergeten if, maar een
ondoorzichtig geëxporteerd PNG. Alleen een test die naar het bestand kijkt
ziet dat aankomen.

Kosten

Twee nieuwe assets + registratie in pubspec.yaml. Geen SBOM-gevolg (assets
zijn geen afhankelijkheden).
Geen nieuwe l10n.d('…') als de bestaande Semantics-labels blijven staan —
dus geen 31 vertalingen.
Nieuw bestand in lib/ valt onder de dekkingspoort: brand_logo.dart moet in
minstens één test voorkomen.
Documentatie: SOURCE_MAP (nieuw bestand) en CHANGELOG.
Schatting: een halve dag, waarvan het meeste in het tekenen van de donkere
varianten zit.

## Wat er gebeurt Zet je het uiterlijk van de applicatie op **Donker**, dan staat het logo op het openscherm als een groot, egaal wit blok op de donkere achtergrond. Het leest niet als een logo maar als een gat in het scherm. Reproduceren: Instellingen → Uiterlijk → profiel *Donker*, dan een tabblad sluiten tot je op het openscherm staat. ## Waarom Het ligt niet aan de weergave maar aan de bestand zelf. `assets/images/ocideck-logo.png` (512×512, RGBA) heeft **geen transparantie**: alle vier de hoeken zijn `#FFFFFF` bij alpha 255, en ongeveer 89% van het beeld is zuiver wit. Het is een logo met een witte plaat eromheen ingebakken. Op een licht oppervlak valt die plaat weg, op een donker oppervlak is het het enige wat je ziet. Het donkere profiel gebruikt `surfaceColor: #1E293B` (`lib/models/parts/app_appearance_profile.dart`), en het openscherm zet dat als scaffold-achtergrond. Wit op `#1E293B` is het maximale contrast dat er is — precies de verkeerde kant op. Drie plekken tonen dit bestand: | Plek | Grootte | Wat je ziet | |---|---|---| | `lib/widgets/shell/welcome_screen.dart:66` | 200 px breed | het grote witte vlak uit de melding | | `lib/widgets/dialogs/consent_dialog.dart:39` | 40 px hoog | kleiner, maar wel het eerste scherm dat een nieuwe gebruiker ziet | | `lib/widgets/dialogs/parts/settings_dialog_about.dart:200` | 48 px | het pictogram op de licentiepagina | ## Hoe het wél goed gaat De zijbalk van het instellingenvenster doet het al goed en heeft de oplossing zelfs opgeschreven — `lib/widgets/dialogs/parts/settings_dialog_chrome.dart:152`: > EU-yellow recolour of the logo, so it reads on the dark sidebar without a > backing plate. Daar hangt `assets/images/ocideck-logo-eu.png`: een palet-PNG mét `tRNS`, dus een écht transparante achtergrond, met de inkt hertint naar EU-vlaggeel `#FFCC00`. Datzelfde bestand draagt de banner van "Over OciDeck" (`settings_dialog_about.dart:277`) op een navy verloop. Geen plaat, geen rand, en het werkt op elke ondergrond. Dat is de aanpak die het openscherm mist. ## De andere kant van dezelfde munt `assets/images/librekat-logo.png` (250×250) heeft het omgekeerde probleem: die is wél transparant, maar de inkt is bijna zwart (~`#202020`) en beslaat maar 7,6% van het vlak. Op een donker oppervlak verdwijnt hij. Dat valt vandaag nog niet op, omdat het paneel "Over OciDeck" zijn kaarten hardcodeert op wit — `settings_dialog_about.dart:391` en `:450` zetten `color: Colors.white` in plaats van `AppTheme.paper`, dat juist voor dit doel bestaat ("wit papier-oppervlak voor editor-chrome … in donkere modus een donker oppervlak"). Die kaarten blijven dus wit, ongeacht het gekozen profiel — op zichzelf een fout, maar wel de reden dat het LibreKAT-logo daar nu nog leesbaar is. Belangrijk voor de volgorde: **repareer je die `Colors.white` zonder het logo mee te nemen, dan verdwijnt het LibreKAT-logo in de donkere kaart.** De twee horen in één beweging. ## Voorstel **A — een tweede bestand, per modus gekozen (aanbevolen).** Lever `assets/images/ocideck-logo-dark.png`: dezelfde tekening, transparante achtergrond, inkt licht genoeg voor een donker oppervlak. De EU-variant bewijst dat die route werkt; voor het openscherm is een lichte woordmerk-versie mooier dan geel, want geel is de accentkleur van de zijbalk en niet van het product. Doe hetzelfde voor `librekat-logo-dark.png`. Zet de keuze op één plek — een kleine `lib/widgets/brand_logo.dart` of een getter naast `AppTheme` — die de juiste asset-sleutel teruggeeft voor de huidige modus, zodat de drie aanroepplekken niet elk hun eigen `if (isDark)` krijgen. De vierde die er ooit bijkomt, krijgt het dan gratis goed. Registreer beide bestanden in `pubspec.yaml`. **B — geen nieuw bestand, wel een bewuste badge.** Behoud één asset en geef hem in donkere modus dezelfde behandeling als de "Over OciDeck"-banner: een afgeronde container in navy of EU-blauw eromheen. Het witte vlak wordt dan een opzettelijk plaatje in plaats van een ongeluk. Goedkoper, maar het licentiepictogram lost het niet op en het blijft een omweg om een asset-probleem heen. **C — het wit uit het bestaande bestand halen en per modus tinten.** Afgeraden. De tekening bevat zelf witte vormen; een vlakke tint plet die weg. Aanbeveling: **A**, met de `Colors.white`-reparatie in het paneel "Over OciDeck" in dezelfde PR. ## Regressietest Een bugfix hoort niet alleen de fout weg te nemen maar ook terug te kunnen komen zien: 1. **Widgettest** — pomp het openscherm onder het profiel *Donker* en toets dat de gerenderde `Image` de donkere asset-sleutel draagt (en de lichte onder *Basic*). Dit vangt de aanroepplek die de helper vergeet. `test/app_theme_dark_test.dart` is de logische plek. 2. **Assettoets** — dat is de test die deze fout écht had gevangen: decodeer de logo-assets en eis dat de randpixels van elke voor donkere modus bedoelde variant alpha 0 hebben. De fout hier was niet een vergeten `if`, maar een ondoorzichtig geëxporteerd PNG. Alleen een test die naar het bestand kijkt ziet dat aankomen. ## Kosten - Twee nieuwe assets + registratie in `pubspec.yaml`. Geen SBOM-gevolg (assets zijn geen afhankelijkheden). - Geen nieuwe `l10n.d('…')` als de bestaande `Semantics`-labels blijven staan — dus geen 31 vertalingen. - Nieuw bestand in `lib/` valt onder de dekkingspoort: `brand_logo.dart` moet in minstens één test voorkomen. - Documentatie: SOURCE_MAP (nieuw bestand) en CHANGELOG. - Schatting: een halve dag, waarvan het meeste in het tekenen van de donkere varianten zit.

brenno added the

bug

accepted

in-progress

labels

2026-07-23 12:12:27 +00:00

brenno commented

2026-07-23 12:31:17 +00:00

Author

Owner

Opgepakt met aanpak A. Tak: fix/logo-donkere-modus-735.

Reikwijdte: drie transparante donkere logovarianten (ocideck-logo-dark.png, librekat-logo-dark.png, vigilis-logo-dark.png), een lib/widgets/brand_logo.dart die de asset per modus kiest, de vier aanroepplekken, en de Colors.white-kaarten in settings_dialog_about.dart.

Het Vigilis-blokje kwam vandaag binnen met #737 en zit op dezelfde kaart: zodra die kaart in donkere modus donker wordt, verdwijnt het zwarte woordmerk. Daarom hoort het in dezelfde reparatie.

Opgepakt met aanpak A. Tak: `fix/logo-donkere-modus-735`. Reikwijdte: drie transparante donkere logovarianten (`ocideck-logo-dark.png`, `librekat-logo-dark.png`, `vigilis-logo-dark.png`), een `lib/widgets/brand_logo.dart` die de asset per modus kiest, de vier aanroepplekken, en de `Colors.white`-kaarten in `settings_dialog_about.dart`. Het Vigilis-blokje kwam vandaag binnen met #737 en zit op dezelfde kaart: zodra die kaart in donkere modus donker wordt, verdwijnt het zwarte woordmerk. Daarom hoort het in dezelfde reparatie.

brenno referenced this issue from a commit

2026-07-23 12:56:23 +00:00

fix(ui): het logo was in donkere modus een groot wit vlak (#735)

brenno referenced this issue from a commit

2026-07-23 12:56:23 +00:00

test(theme): bewaak de logo-assets in de pixels, niet in de code (#735)

brenno referenced this issue from a commit

2026-07-23 12:56:23 +00:00

docs: changelog en bronkaart voor de donkere logovarianten (#735)

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

2026-07-23 12:57:06 +00:00

fix(ui): het logo was in donkere modus een groot wit vlak (#735) #742

brenno referenced this issue from a commit

2026-07-23 12:57:19 +00:00

Merge pull request 'fix(ui): het logo was in donkere modus een groot wit vlak (#735)' (#742) from fix/logo-donkere-modus-735 into main

brenno

2026-07-23 12:57:20 +00:00

closed this issue
removed the
in-progress
label

brenno commented

2026-07-23 12:57:48 +00:00

Author

Owner

Opgelost en gemerged: 971abe30 (PR #742).

Drie donkere varianten (OciDeck, LibreKAT, Vigilis) — dezelfde tekening, transparante achtergrond, lichte inkt — met BrandLogo in lib/theme/brand_logo.dart die per modus kiest. De vier aanroepplekken zijn om, en de kaarten in 'Over OciDeck' staan niet meer hardgecodeerd op Colors.white.

Regressietest kijkt in de pixels, niet in de code: transparante hoeken, lichte inkt, gelijke afmetingen per paar, plus een bronregel dat geen aanroepplek in lib/ zelf een merkpad kiest. Alle vier de controles zijn rood gezien tegen de onherstelde toestand. Draaiend nagelopen in donkere modus op alle vier de plekken.

Wat er níét in zat: ocideck-logo-eu.png (zit alleen op oppervlakken die in beide modi donker zijn) en het LibreKAT-logo in het themaprofiel — dat staat op een dia, en een dia is een vast wit canvas.

Eén punt ter attentie: vigilis-logo-dark.png is een hertinting van een sponsormerk (zwart woordmerk wordt licht, geel beeldmerk blijft). Gebruikelijke knockout-variant, maar als Vigilis huisstijlregels heeft is dat het narekenen waard.

Opgelost en gemerged: 971abe30 (PR #742). Drie donkere varianten (OciDeck, LibreKAT, Vigilis) — dezelfde tekening, transparante achtergrond, lichte inkt — met `BrandLogo` in `lib/theme/brand_logo.dart` die per modus kiest. De vier aanroepplekken zijn om, en de kaarten in 'Over OciDeck' staan niet meer hardgecodeerd op `Colors.white`. Regressietest kijkt in de pixels, niet in de code: transparante hoeken, lichte inkt, gelijke afmetingen per paar, plus een bronregel dat geen aanroepplek in `lib/` zelf een merkpad kiest. Alle vier de controles zijn rood gezien tegen de onherstelde toestand. Draaiend nagelopen in donkere modus op alle vier de plekken. Wat er níét in zat: `ocideck-logo-eu.png` (zit alleen op oppervlakken die in beide modi donker zijn) en het LibreKAT-logo in het themaprofiel — dat staat op een dia, en een dia is een vast wit canvas. Eén punt ter attentie: `vigilis-logo-dark.png` is een hertinting van een sponsormerk (zwart woordmerk wordt licht, geel beeldmerk blijft). Gebruikelijke knockout-variant, maar als Vigilis huisstijlregels heeft is dat het narekenen waard.

brenno referenced this issue

2026-07-23 13:47:32 +00:00

fix(thema): tekstknoppen en links waren onleesbaar in donkere modus (#744) #746

brenno referenced this issue from a commit

2026-07-23 16:55:02 +00:00

fix(iconen): Linux en Windows droegen nog het logo van vóór de rebrand

brenno referenced this issue

2026-07-23 17:00:15 +00:00

fix(iconen): Linux en Windows droegen nog het logo van vóór de rebrand #765

brenno referenced this issue from a commit

2026-07-23 17:00:16 +00:00

fix(iconen): Linux en Windows droegen nog het logo van vóór de rebrand