Chrome 76 ondersteuning toegevoegd voor de voorkeur-kleur-regeling CSS-mediaquery ‘ s, die het mogelijk maakt websites te vragen uw besturingssysteem wat kleurenschema dat u liever zo kunnen ze het thema zich op de juiste wijze. Hier is hoe het te installeren voor uw website.
Welke Browsers Ondersteunen Van Duistere Thema ‘ S?
Als van het schrijven, de meeste grote browsers ondersteunen donker modus, hoewel sommige browsers nog niet zijn bijgewerkt voor ondersteuning van het nog. U kunt de huidige status op caniuse.com die genereert een tabel voor ondersteuning voor verschillende browsers:
Zoals gewoonlijk, dat wil zeggen 11 is niet het ontvangen van eventuele updates, en de 2% van het Internet nog steeds vast op het niet in staat zijn om gebruik van te maken. Maar, die mensen zijn waarschijnlijk niet op Windows 10, zodat ze niet zien, toch zonder een donker thema te schakelen.
Gelukkig, met behulp van een voorkeur-kleur-regeling niet zal breken uw CSS, want het is een optionele parameter.
Hoe om CSS te Gebruiken Kleurenschema Ondersteuning
Om daadwerkelijk gebruik maken van de voorkeur-kleur-regeling in uw CSS, zou je het gebruiken als een optionele media-query op dezelfde manier als u zou doen voor responsive design. Bijvoorbeeld, als je standaard een witte achtergrond met zwarte tekst, kunt u gebruik maken van de media query te wijzigen zwarte achtergrond en witte tekst.
body {
background-color: #fff;
color:#000;
}
@media (voorkeur-kleurstelling: donker) {
background-color: #000;
color:#fff;
}
U kunt dit combineren met een andere techniek die je gebruikt—je kan bijvoorbeeld alleen toestaan donker modus op mobiele apparaten als u in combinatie met een responsive media query voor de grootte van het scherm.
Het opzetten van een Donkere Thema met CSS Variabelen
CSS Variabelen zijn een vrij nieuwe toevoeging met brede steun. Ze zijn misschien wel de makkelijkste manier om een donkere thema naast de voorkeur-kleur-regeling. In plaats van het definiëren van de kleur van de waarden handmatig, als volgt:
body {
background-color: #fff;
}
p {
color: #000;
}
In plaats daarvan maakt u een :root blok die overal worden toegepast. U kunt het definiëren van variabelen hier met behulp van de dubbel minteken (–) gevolgd door de naam van de variabele. Dan, wanneer u het nodig om te definiëren van een waarde, het gebruik van de naam van de variabele in de var() functie in plaats:
:root {
–primair: #000;
–background: #fff;
}
body {
background-color: var(–achtergrond);
}
p {
kleur: var(–primaire);
}
Deze methode heeft het geweldige voordeel dat het in staat is om te veranderen van variabelen en het hebben van veranderingen weerspiegelen overal. Net onder de :root blokkeren, laat het toevoegen van een andere in de voorkeur-kleur-regeling media query:
:root {
–primair: #000;
–background: #fff;
}
@media (voorkeur-kleurstelling: donker) {
:root {
–primair: #ddd;
–achtergrond: #222
}
}
body {
background-color: var(–achtergrond);
}
p {
kleur: var(–primaire);
}
Dit stelt de variabelen aan de donkere waarden wanneer de browser detecteert dat de gebruiker geeft de voorkeur aan een donkere regeling. U kunt het beheer van deze twee paletten van kleuren en gemakkelijk te tweaken ze slechts door het veranderen van de variabelen.
Bovendien, als u extra CSS voor het donkere thema, kunt u dat in een andere voorkeur-kleur-regeling query, maar je zou waarschijnlijk willen dat een lager is dan de rest van de CSS dus voorrang, of gebruik het !belangrijk vlag.
Fallback Voor IE 11
IE 11 geen ondersteuning voor deze (uiteraard). Als u wilt IE 11-ondersteuning, kunt u gebruik maken van de eeuwenoude methode van het verdubbelen van uw eigenschappen:
p {
color: #000;
kleur: var(–primaire);
}
Op deze manier, dat wil zeggen 11 verwerken alleen de eerste, en de andere als ongeldig CSS. Donkere thema ‘ s werken niet, maar ze zou het toch niet als er geen ondersteuning voor de media query.
Bovendien, als u niet wilt dat om CSS te gebruiken variabelen, kunt u net volledig te restylen van uw site in de voorkeur-kleur-regeling query, maar dat is onhandig en kost veel ruimte. Als u moet ondersteuning bieden voor elke browser in het bestaan, het gebruik van de dubbele woning terugval plaats.