Dark mode toevoegen aan je eigen website
Een Dark Mode is een van de nieuwste handigheden die tegenwoordig aan apps worden toegevoegd. Als iemand dan 's nachts een app bekijkt, dan wordt je niet compleet verblind door het felle witte licht. In de nieuwste iOS versie is er ook ondersteuning voor een zo genoemde "Dark Mode" (donkere modus). Hierdoor kan je instellen dat al je apps (die een Dark Mode hebben) na een bepaalde tijd automatisch een donkere modus gebruiken.
Maar niet alleen apps kunnen een donkere modus gebruiken, je kan aan je eigen website ook een donkere modus toevoegen. Er zijn verschillende methodes om een donkere modes toe te voegen aan je website. Het makkelijkst is om een script toe te voegen, maar ik leg ook uit hoe je jouw eigen CSS kan schrijven voor een donkere modus.
Script toevoegen
Het makkelijkste is om een script toe te voegen die meteen je hele website een optionele donkere modus geeft. Als je de volgende code toevoegd dan zou je meteen een donkere modus moeten hebben!
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.5/lib/darkmode-js.min.js"></script> <script> new Darkmode().showWidget(); </script>
Als je meer wilt weten over hoe je dit moet gebruiken kijk dan even op de GitHub pagina, daar staat meer uitleg.
Eigen CSS schrijven
Als je jouw eigen CSS wilt schrijven, dan kan je een donkere modus maken door een @media tag toe te voegen in de CSS van je website. Dit doe je dan als volgt:
@media (prefers-color-scheme: dark) {
/* Voeg hier de CSS code die je wilt gebruiken om je website een Dark Mode te geven */
}Je moet hier dus zelf de CSS van je website aanpassen om een Dark Mode toe te voegen. Dit kan een hoop gedoe zijn, gelukkig heeft CSS de handige invert() functie. Hiermee worden lichte kleuren donker en vice versa. Als je dus snel een donkere modus aan je website zou willen toevoegen dan zou je bijvoorbeeld deze CSS aan je website kunnen toevoegen.
@media (prefers-color-scheme: dark){
body {
background-color: #000;
filter: invert(1);
}
img {
filter: invert(1);
}
}Als je deze code toevoegd aan je CSS dan worden alle kleuren omgedraaid, behalve bij de afbeeldingen. Maar elke website is anders, dus je zal deze CSS code nog wel een beetje moeten aanpassen voor je eigen website.
Standaard Dark Mode
Je zou ook kunnen instellen dat jouw website standaard in de donkere modus staat. Dan moet je jouw CSS instellen op een normale donkere modus en dan zou je juist het volgende moeten toevoegen:
@media (prefers-color-scheme: light) {
/* Voeg hier jouw eigen CSS aan toe voor een lichtere modus */
}Donkere modus testen
Als je bezig bent met het maken van een donkere modus op jouw website dan zou je die graag ook wel willen testen natuurlijk. Dit gaat anders voor zowel Mac als Windows.
Windows
Als je gebruik maakt van een nieuwe versie Chrome of Firefox dan kan je de donkere modus testen op Windows (de donkere modus werkt dus niet met Internet Explorer of Edge). Chrome en Firefox maken allebei gebruik van de standaard donkere modus instelling op Windows. Deze kan je aanpassen door naar de Instellingen app te gaan en dan naar Persoonlijke instellingen > Kleuren. Hier vind je de optie "Kies een standaard app modus" en als je hierbij donker selecteerd dan gaan Chrome en Firefox de donkere modi gebruiken van websites.
Mac
Op Mac's kan je alleen gebruik maken van een Dark Mode als je macOS Mojave (of nieuwer) gebruikt. Chrome, Firefox en Safari volgen dan de instelling van macOS. Ga dan naar Systeemvoorkeuren > Algemeen. Hier zie je de optie Weergave, daar kan je klikken op Donker en dan schakelen je websites ook naar een donkere modus.
iOS en iPadOS
Ook op iOS (en iPad OS) kan je schakelen naar een donkere modus. Dit kan vanaf iOS (en iPadOS) 13. Open het bedieningspaneel van je iPhone of iPad en klik op de optie Donkere Modus. Nu veranderen al je websites (als je ze opent met Safari) naar een donkere modus (als ze die hebben).
Android
Op elke Android smartphone gaat het instellen van een Dark Mode net even iets anders. Je kan wel een Dark Mode instellen bij Chrome door bij de instellingen naar Themes te gaan.
