PrestaShop Design & navigatie

Dark Mode Module PrestaShop 8/9: Automatische Donkere Modus

De donkere modus die uw klanten verwachten, zonder uw thema aan te raken.

Automatische detectie van de systeemvoorkeur, de keuze van de bezoeker wordt onthouden en er wordt automatisch een volledig donker palet gegenereerd. Twee rendermotoren, nul flits bij het laden, compatibel met elk PrestaShop-thema.

At a glance
  • Volgt automatisch de donkere modus van het systeem van de bezoeker (prefers-color-scheme)
  • Twee motoren: universeel slim filter of donker palet gegenereerd in CSS-variabelen
  • Nul witte flits bij het laden: de donkere class wordt vóór de eerste rendering toegepast
  • Schakelaar te plaatsen waar u wilt: zwevende knop, themahook, eigen hook of widget
  • Geen enkele themawijziging, geen afhankelijkheden, minder dan 8 kB toegevoegd
PrestaShop 8 & 9 Multistore 5 talen Nul flits Zonder afhankelijkheden
  • 30 dagen geld terug
  • 12 maanden updates
  • Support binnen 24 uur
www.datafirefly.com/nl/
Bascule mode sombre automatique sur une boutique PrestaShop
v1.1.0 · bijgewerkt 2026-07-12
Wat het doet

De korte versie.

01

Automatische detectie van de systeemmodus

De module leest de kleurvoorkeur van het besturingssysteem van de bezoeker en past zich er in real time aan aan: zet uw klant zijn Mac of Android in donkere modus, dan volgt de winkel onmiddellijk, zonder de pagina te herladen.

02

Twee rendermotoren naar keuze

Het slimme filter maakt elk thema donker zonder configuratie en behoudt daarbij de natuurlijke kleuren van de productfoto's. Het gegenereerde palet bouwt een echt donker gamma op in CSS-variabelen, vertrekkend van twee kleuren.

03

Nul flits bij het laden

Een synchroon script past de donkere class toe vóór de eerste rendering van de pagina. Uw bezoekers in donkere modus zien nooit de witte flits die typisch is voor concurrerende oplossingen.

04

Schakelaar geplaatst waar u wilt

Zwevende knop op een van de vier posities, of een geïntegreerde schakelaar in de header, de footer of om het even welke hook van uw thema, ook een eigen hook die automatisch wordt geregistreerd.

De lange versie

Alles wat u wilt weten voordat u installeert.

Een gedetailleerde blik op hoe Dark Mode Module PrestaShop 8/9: Automatische Donkere Modus werkt, waarom we het zo gebouwd hebben en de gedachte achter de bovenstaande functies.

§ 01

De donkere modus is een standaard geworden, geen optie

De meeste smartphones en computers staan minstens een deel van de dag in donkere modus. Een site die om 23 uur op een telefoonscherm helderwit blijft, veroorzaakt onmiddellijk visueel ongemak en vaak een vertrek. Deze module brengt naar uw PrestaShop-winkel het comfort dat uw klanten overal elders al vinden, zonder dat u ook maar één regel van uw thema hoeft aan te passen.

§ 02

Hij volgt de voorkeur van uw bezoekers, helemaal zelf

Standaard leest de module de kleurvoorkeur van het besturingssysteem van de bezoeker en past hij de bijbehorende modus toe. Zet de klant zijn toestel tijdens het surfen in donkere modus, dan volgt de winkel in real time, zonder de pagina te herladen. Zodra hij met de knop uitdrukkelijk kiest, wordt zijn keuze in zijn browser bewaard en bij al zijn volgende bezoeken behouden.

§ 03

Een universele motor die uw productfoto's respecteert

De slimme filtermotor keert de pagina om en keert elk mediabestand opnieuw om: afbeeldingen, video's, iframes, canvas en achtergronden. Uw productfoto's behouden dus hun natuurlijke kleuren en een wit T-shirt blijft wit. Een bescherming tegen dubbele inversie verwerkt geneste media, een veelvoorkomend geval bij thema's die het picture-element voor responsive gebruiken. Helderheid en contrast zijn instelbaar om de weergave te verfijnen.

§ 04

Of een echt donker palet, voor u gegenereerd

De tweede motor berekent een volledig donker gamma uit slechts twee kleuren: een achtergrond en een accent. Drie oppervlakteniveaus, de randen, de hoofdtekst en de gedempte tekst, het accent en de hoverstand daarvan worden er automatisch uit afgeleid en daarna als CSS-variabelen beschikbaar gesteld. De tekstkleur van de knoppen wordt zelfs gekozen volgens de relatieve luminantie van uw accent, om een leesbaar contrast te garanderen.

§ 05

Nul witte flits, vanaf het eerste beeld

De meeste oplossingen voor donkere modus passen hun thema in JavaScript toe na het laden, wat een storende witte flits oplevert. Hier plaatst een synchroon script de donkere class in de roottag vóór de eerste rendering van de browser. De bezoeker ziet nooit de lichte versie, zelfs geen fractie van een seconde.

§ 06

De knop waar u hem wilt, zonder te coderen

Een discrete zwevende knop in een van de vier hoeken, of een geïntegreerde schakelaar in uw header of footer. U kiest de doelhook uit een lijst, of u vult de naam van een eigen hook van uw thema in: de module registreert die automatisch bij het opslaan. Voor integrators laat de widgetsyntaxis van PrestaShop ook toe de schakelaar overal in een sjabloon te tonen.

§ 07

Licht, zelfstandig, zonder afhankelijkheden

Geen Composer, geen framework, geen enkele externe JavaScript-bibliotheek. In totaal ongeveer 8 kB toegevoegd, een publieke API en een event bij het wisselen van modus om uw eigen integraties aan te koppelen, en volledige aandacht voor toegankelijkheid: ARIA-attributen, zichtbare focus en respect voor de systeeminstelling voor verminderde animaties.