Det er nesten ikke til å tro, men dark mode - modusen vi utviklere og teknologer har foretrukket i alle år, med mindre du er en Xcode- eller Visual Studio-savant, da - har blitt mainstream!
Dette betyr iOS 13 for utviklere
Norske utviklere gleder seg til SwiftUI. Men før den tid må de støtte mørk modus og Apple-innlogging.
Alle operativsystem fra Windows til Android (10), iOS (13) og macOS har hevet seg rundt og fått støtte for modusen, som flipper skjermfargene rundt for å gi deg hvit tekst på svart bakgrunn.
Moduser med lavt lys skal nemlig ha en viss helsegevinst, hovedsakelig når vi bruker datamaskiner og telefoner før leggetid, ifølge Harvard Medical School.
Ikke minst har det påvirkning på batteritiden, noe alle mobil- og PC-produsenter er desperate etter å forbedre om dagen. Apple har til og med laget en egen nettside med tips.
Men mørk modus er lite verdt hvis ikke apper og nettsider på enheten kan tilpasse seg innstillingene. Derfor har CSSWG - som har ansvaret for CSS-standarden - funnet opp mediaspørringen prefers-colors-scheme.
Slik bruker du den i både CSS og JavaScript.
Enkel mediaspørring
kode24 er nok litt unik i denne problemstillingen. Vi har nemlig mørkt tema i utgangspunktet. Dermed trenger vi strengt talt ikke ta hensyn til om brukeren har eksplisitt valgt mørk modus i operativsystemet.
Ja, dette er bare en scrollbar
Med CSS kan du stile scrollbaren din akkurat som du vil. Slik gjorde vi det.
Og helt ærlig har vi lyst til at brukerne våre skal få mørk modus uansett om de tilfeldigvis har lys modus i operativsystemet eller ikke, foreløpig.
Men du trenger ikke å vende opp ned på hele siden din selv om du vil støtte mørk modus. I CSS kan du jo velge selv hva som skal påvirkes.
Det skal faktisk ikke mer til enn én enkel CSS-mediaregel, prefers-color-scheme, for å støtte modus-endringer.
Prefers-color-scheme har tre moduser: no-preference, light og dark, og fungerer som en hvilken som helst annen media-spørring.
Innenfor klammene av mediaspørringen velger du hvilke CSS-regler som skal skrives over. Hva med å legge på et lite filter på bildene dine for å ta ned kontrasten i mørk modus? Eller endre farger i hovedmenyen? Under er et eksempel som viser forskjellige bokser avhengig av hvilken modus du har valgt.
<div id="mode-wrapper">
<div id="light-mode" class="mode-example">
Jæskla lyst det ble her med lys-modus! 🌞
</div>
<div id="dark-mode" class="mode-example">
Digg med litt mørk-modus. 😎
</div>
<div id="no-preference-mode" class="mode-example">
Du har tydeligvis bestemmelsesvegring? Ingen modus er valgt. 🤷
</div>
<div id="no-support">
Ingen støtte for tema-modus
</div>
</div>
<style>
#mode-wrapper {
padding: 20px;
display: flex;
justify-content: center;
}
.mode-example {
padding: 20px;
border-radius: 10px;
margin: 10px 0;
display: none;
}
#no-support {
padding: 20px;
border-radius: 10px;
margin: 10px 0;
display: block;
}
@media (prefers-color-scheme: dark),
(prefers-color-scheme: light),
(prefers-color-scheme: no-preference) {
#no-support {
display: none;
}
}
@media (prefers-color-scheme: dark) {
#dark-mode {
display: block;
background: linear-gradient(0deg, #002543, #492792);
color: white;
box-shadow: 0 0 40px;
box-shadow: 0 0 40px 4px #492792;
}
}
@media (prefers-color-scheme: light) {
#light-mode {
display: block;
background: linear-gradient(0deg, #ff5252, #ffb65b);
box-shadow: 0 0 40px 4px #ffb65b;
color: black;
}
}
@media (prefers-color-scheme: no-preference) {
#no-preference-mode {
display: block;
background: linear-gradient(45deg, #00ccbb, #492792);
color: white;
}
}
</style>Leser du dette fra en iPhone? Da bør du prøve å endre modus - du kan legge til modus-endring i hurtigmenyen - så ser du at boksen over endrer seg. Safari tegner nemlig sida på nytt om modusen endres.
Funker med JavaScript
Men hva hvis jeg har skrevet en ultra-lean kodesnutt i JavaScript som tegner hele sida mi, spør du kanskje?
Null stress, Yoda: Du kan nemlig bruke window.matchMedia-funksjonen.
Du sjekker enkelt om browseren støtter mediaspørringer om fargemodus med denne lille kodesnutten:
if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
console.log('Jaggu har du støtte for mørkmodus');
}Hvor responsen "not all" betyr at ingen av modusens til prefers-color-scheme slo til, og dermed igjen betyr at fargemodus ikke er støttet.
Du kan også lytte til endringer i prefers-color-scheme via window.matchMedia slik:
<div id="mode-js-example">
<img src="" id="mode-js-example-image">
</div>
<style>
#mode-js-example {
display: flex;
padding: 20px;
justify-content: center;
background: linear-gradient(45deg, #580c68, #25066a);
}
#mode-js-example-image {
max-width: 80%;
}
</style>
<script>
var darkImage = "https://media1.giphy.com/media/9o041AUibA5ri/giphy.gif?cid=790b76111bb097846253f46a41ceb81be802ebcfbf438f6f&rid=giphy.gif";
var lightImage = "https://media2.giphy.com/media/3ov9jQsTzqjSyIWRDa/giphy.gif?cid=790b7611fd2ce1d1d1db0451a8a6e6d917a6c57597205f96&rid=giphy.gif";
var noPreferenceImage = "https://media1.giphy.com/media/3orif6XcBSPq0D9TwY/giphy.gif?cid=790b76117084a374aa70f58686972d9fccfb3e5a9b51d517&rid=giphy.gif";
var noSupportImage = "https://media2.giphy.com/media/d2ZcfODrNWlA5Gg0/giphy.gif?cid=790b76116d7e447e05283f56ec6979e85622dfff4364da8a&rid=giphy.gif";
var imageElement = document.getElementById("mode-js-example-image");
// sjekk ved oppstart hvilken modus brukeren har
if (window.matchMedia("(prefers-color-scheme: dark)").matches) imageElement.src = darkImage;
if (window.matchMedia("(prefers-color-scheme: light)").matches) imageElement.src = lightImage;
if (window.matchMedia("(prefers-color-scheme: no-preference)").matches) imageElement.src = noPreferenceImage;
if (window.matchMedia('(prefers-color-scheme)').media === 'not all') imageElement.src = noSupportImage;
// Endre modus når brukeren velger nytt tema
window.matchMedia('(prefers-color-scheme: dark)').addListener(event => { if (event.matches) imageElement.src = darkImage });
window.matchMedia('(prefers-color-scheme: light)').addListener(event => { if (event.matches) imageElement.src = lightImage });
</script>Dermed kan du lytte til om brukeren endrer modus og sjekke modus når sida laster, med JavaScript. Prøv å endre modus her og nå, og se giffen i boksen over endre seg.
Bred støtte
Bekymret for at ikke alle brukerne dine skal ha støtte for prefers-color-scheme? Det avhenger nok litt av hva slags brukere du henvender deg til. Ifølge caniuse.com har de nyeste versjonene av de fleste moderne nettlesere bygd inn støtte.
Lag en interaktiv 3D-terning med CSS
Magnar tar deg med på reisen fra kjedelige firkanter til tredimensjonale, animerte, rullende terninger.
På mobil fikk Chrome for Android støtte i versjon 76, som er nyeste versjon. Android WebView støtter også dark mode i nyeste versjon. Safari på iOS fikk støtte fra versjon 13, som er den nyeste versjonen av Apples mobilnettleser.
På desktop har både Chrome, Firefox og Safari støtte i nyere versjoner. Både i Windows og Mac OS. Dessverre har hverken Edge eller Internet Explorer bygget inn støtte ennå.
Det er verdt å merke at prefers-color-scheme også er i draft-modus hos W3C, som betyr at vi kan forvente endringer i fremtiden, før den er endelig godkjent som en del av CSS. Det ville ikke vært utenkelig at det kom støtte for flere typer av mørk modus og lys modus.
Så bør du implementere mørk modus? Tja, kanskje, men det er lurt å ha et manuelt valg slik at brukere kan overstyre. Og selvsagt at du faller tilbake på temaet du helst vil tilby brukere av siden din. Men du bør i det minste tilby brukerne dine en feiende flott mørk modus.
Slik får du mørk GitHub i Chrome
Inntil Microsoft får ut fingeren, må du gjøre det selv.