TheaterEncyclopedie:Vormgeving TheaterEncyclopedie (2025)/Dark Mode

Uit TheaterEncyclopedie
Ga naar: navigatie, zoeken
Inhoudsopgave

Is dit een optie die we gebruikers willen aanbieden?
Tegenwoordig verwachten gebruikers de mogelijkheid om te kunnen switchen tussen dark en light mode. Er zijn skins waarbij de gebruiker de mogelijkheid heeft om te switchen tussen beide voorkeuren. Of bieden we op de pagina zelf een switch knop waarmee ze de pagina in een andere mode kunnen gebruiken?

Stand van zaken augustus 2025

Jaarpagina

Tabellen

Tabllen in een div zetten: 

<div class="table-responsive">
 --- table

</div><!-- eof table-responsive -->

Of

<div style="overflow-x: auto;">
--- table
</div><!-- eof table-responsive -->

Onderstaande pagina's maken gebruik van tabellen:

Bijschrift
Pagina Test TE Productie TE Opmerking
Personen Cristina Deutekom Cristina Deutekom Theater CV
Werken Hamlet - William Shakespeare Hamlet - William Shakespeare 2025-08-18; Nog geen aanpassingen op productie verricht maar de responsiviteit is niet meer zo dramatisch.
Producenten Joop van den Ende Theaterproducties BV Joop van den Ende Theaterproducties BV Queries/tabellen bestaan uit 2 kolommen, levert daardoor geen problemen op bij weergave op mobiel.
Voorstellingen Miss Saigon - Joop van den Ende Theaterproducties BV - 1996-11-24 Miss Saigon - Joop van den Ende Theaterproducties BV - 1996-11-24 Geen tabellen
Locatie Theaters Theaters Geen problemen bij weergave op mobiel
Plaats Testplaatsen

Sjablonen

Leiden Vooralsnog moet op elke plaatspagina een aparte div met class = table-striped toegevoegd, daartussen de sjablonen en afsluiten met een div. Zoeken naar een eenvoudigere manier.
Voorbeeld Voorbeeld
Voorbeeld Voorbeeld
Voorbeeld Voorbeeld
Voorbeeld Voorbeeld

Testpagina's voor check of de lay-out in DM zichtbaar is en naar tevredenheid aanwezig

Wijzigingen

  • card-header aangepast kleurverloop idem tekstkleur

Stand van zaken jan 2025

De button is nu bovenaan de pagina geplaatst via MediaWiki:Sitenotice. De css geplaatst in MediaWiki:Tweeki.css en de JS geplaatst in MediaWiki:Tweeki.js. De gehele TE kan nu in Light/Dark Mode worden gezet.

Kleurgebruik TE en Dark Mode

Logokleur RGB HEX Visueel Variant DM1 Variant DM2
Blauw rgb(14,0,255) #0d00ff #3226F8
Magenta rgb(255,0,255) #0d00ff #ff00ff
Geel rgb(255,220,0) #0d00ff #ffdc00
Accentkleur rgb(255,220,0) #0d00ff #ffdc00

Kleuren TE DarkMode

Gebruik Kleur Visueel
Background #221E2A
Bootstrap Card #45414E
Bootstrap Button #686571
Bootstrap Tekst #AEACB8
Bootstrap Tekst #D0D0DC
Bootstrap Lichtste #ECECF1

Inventarisatie pagina's/onderdelen die nog aangepast moeten worden

18 december 2024

23 oktober 2024

  • Huidige bootstrap versie beschikbaar via Tweeki v 4.6.1 heeft nog geen standaard voor Dark Mode, dat is pas vanaf Bootstrap versie 5.3.
  • Tweeki nav bar en footer worden niet automatisch omgezet naar dark mode, dus dit nog onderzoeken hoe we dit kunnen oplossen.
  • Sowieso maken we gebruik van eigen vormgeving dus zal er altijd handmatig onderdelen op elkaar afgestemd moeten worden, dus daarvoor hoeven we niet te wachten op de nieuwe bootstrap versie.
  • De card die gebruikt wordt bij bootstrap heeft een witte achtergrond dus als je het omzet naar Dark Mode blijft deze wit. Deze aanpassen.
  • Bij Dark Mode kan je snel last krijgen van een Ghost effect, waarbij de letters dansen op het scherm. Dit heeft te maken met teveel contrast dus zwart/wit. Door deze contrasten te verminderen dus een off white en een minder zwarte kleur te nemen met een blauwe gloed erover heen kan je dit oplossen.
  • Bij de huidige bootstrap vormgeving maken we veel gebruik van shadow bij de blokken om iets eruit te laten springen. Bij Dark Mode werkt dit onrustig dus moet je dit minimaal toepassen.
Conclusie:
Één keer een goede opzet maken voor Dark Mode en deze is op alle pagina's toepasbaar.
Overgenomen van "https://theaterencyclopedie.nl/w/index.php?title=TheaterEncyclopedie:Vormgeving_TheaterEncyclopedie_(2025)/Dark_Mode&oldid=3246909"