Apple werkt aan Dark Mode voor websites in Safari

Door: Raymon Mens - 7 reacties

De donkere modus (Dark Mode) van macOS Mojave is indrukwekkend, behalve als het niet werkt. Dat wil zeggen: wanneer om welke reden dan ook witte content op je scherm verschijnt. Dit is bijvoorbeeld het geval bij e-mails, maar ook websites. In het laatste geval werkt Apple aan een oplossing.

In de toekomst krijgt Safari namelijk ondersteuning voor een Dark Mode in websites. Door middel van CSS kunnen makers van websites een lichte en donkere lay-out ontwikkelen. Die zal dan automatisch mee schakelen wanneer op een Mac lichte of donkere modus ingesteld wordt.

Dark Mode in Safari met CSS

In de nieuwste Safari Technology Preview (versie 68) heeft Apple namelijk ondersteuning voor de CSS-mediaquery prefers-color-scheme toegevoegd. Zo kunnen ontwikkelaars van websites een set aangepaste stijlen maken voor wanneer Dark Mode is ingeschakeld. Dat moet ervoor zorgen dat websites ook naadloos aansluiten op de donkere modus van macOS Mojave.

Safari macOS Mojave Dark Mode
Klik/tap voor groter.

Deze nieuwigheid heeft vooralsnog twee valkuilen. Aan de ene kant betreft het uiteraard alleen Safari op de Mac (niets weerhoudt andere browsers om hetzelfde te doen). Ook moeten de ontwikkelaars van je favoriete websites een “donkere” lay-out ontwerpen. Zolang dit nog geen brede standaard is, zien we nog maar weinig websites dit doen. Het kan echter wél. Nu is het wachten tot deze functie naar de definitieve versie van Safari komt.

Zelf testen met macOS Mojave

Heb je een Mac met macOS Mojave? Dan kun je dit zelf testen door de Safari Technology Preview te downloaden en de site NSHipster te bezoeken.

Reacties

7 reacties
  • Profielfoto
    bechris60

    Als Chrome en Firefox dit ook toevoegen ga ik er zeker mee aan de slag. Voor Safari is het een te kleine doelgroep.

  • Profielfoto
    Jeffrey

    Zal een variant / test hiervan niet in de eerste Mojave beta? Websites zonder body background color krijgen een donkere achtergrond.

  • Profielfoto
    Shmoo

    Jeffrey op 25 oktober 2018 14:30
    Zal een variant / test hiervan niet in de eerste Mojave beta? Websites zonder body background color krijgen een donkere achtergrond.

    Hoe bedoel je?

     

    Dit is gewoon een @media() (media queries) in je CSS waarmee je de kleuren kunt veranderen zoals je dat ook kunt doen wanneer je scherm kleiner wordt.

    https://www.onemorething.nl/community/topic/mijn-ontdekkingen-van-vandaag/page/2895/#post-3217394

     

    Of Firefox en Chrome het ooit gaan toevoegen is nog maar de vraag want het is en zal waarschijnlijk geen standaard worden maar altijd een macOS / Safari dingetje blijven.

    Werkt de Microsoft versie hiervan (die gelanceerd werd tijdens Windows 8 )  wel in Chrome? Volgens mij ook niet.

    -ms-high-contrast heet dat op Windows.

  • Profielfoto
    xaddict

    Als ze nou eens gewoon zich voor één keer aan een standaard hielden ipv eindeloos nieuwe features erin stoppen en mainstream web ideeen overslaan of vertraagd uitbrengen (service workers, web workers, @supports query en vele anderen)…

    Ook: “een “donkere” lay-out” bestaat niet. Een donkere versie kan, een donker design kan, maar lay-out heeft puur te maken met positie en fysieke vorm. Niet met kleur of kleurcombinaties

  • Profielfoto
    Yh-xxl

    De ‘reader’ weergave in het donker is wel al een handige optie totdat dit van grond komt.

  • Profielfoto
    Alexander Henket

    Is er dan niemand die vindt dat de dark mode op dit moment al tegen het onleesbare aanzit?

  • Profielfoto
    EGrafland

    Nou OMT, geef het goede voorbeeld, zou ik zeggen.:-)

    Als je een site hebt die structureel goed in elkaar zit, met goed toegepaste CSS, zou het helemaal niet zoveel werk moeten zijn. In de praktijk hebben de meeste bedrijven nu al te weinig tijd voor hun website en krijgen een heleboel ontwerpgodjes een toeval als er iets met hun heilige producten gebeurt. Maar van mij mag het, als het ook goed getest wordt.

    Veel zinniger zou ik het vinden als Apple de mogelijkheid om naar Darkmode over te schakelen zou versoepelen (vgl. Darksome, wat ik geregeld gebruik) naar één klik en evt. automatisch. Vierentwintig knopjes in moeten drukken om ergens op een achterbinnenplaats van de Instellingen over te kunnen schakelen, hou op zeg.:-(