Chrome 76 lagt till stöd för den föredrar-färg-system CSS media query, som tillåter webbplatser att be ditt operativsystem vad färgschema som du föredrar, så att de kan temat sig på rätt sätt. Här är hur man ställer upp för din webbplats.
Vilken Webbläsare Har Stöd För Mörka Teman?
I skrivande flesta av de stora webbläsare har stöd för mörkt läge, även om vissa webbläsare inte har uppdaterats med stöd för den ännu. Du kan kontrollera aktuell status på caniuse.com, som ger ett stöd tabell för olika webbläsare:
Som vanligt, DVS 11 inte ta emot alla uppdateringar, och 2% av Internet fortfarande fast vid att det kommer inte att kunna använda sig av det. Men, dessa människor sannolikt inte på Windows 10, så de inte skulle se någon använda hur som helst utan en mörk tema för att växla.
Lyckligtvis, med hjälp föredrar-färg-system inte kommer att bryta din CSS, eftersom det är en valfri parameter.
Hur man Använder CSS färgschema Stöd
Att faktiskt använda föredrar-färg-systemet i din CSS, skulle du använda den som en extra medier fråga, på samma sätt som du skulle göra för responsiv design. Till exempel, om din standard är vit bakgrund med svart text, du kan använda media query för att ändra till svart bakgrund och vit text.
body {
background-color: #fff;
color:#000;
}
@media (föredrar-färg-schema: mörk) {
background-color: #000;
color:#fff;
}
Du kan kombinera detta med någon annan teknik som du använder—till exempel, du kan bara ge mörka läget på mobila enheter om du kombinerade med en lyhörd media query för skärmstorlek.
Ställ Upp en Mörk Tema med CSS Variabler
CSS-Variabler är ett relativt nytt tillägg med ett omfattande stöd. De är kanske det enklaste sättet att göra ett mörkt tema tillsammans föredrar-färg-systemet. Istället för att definiera färg värden manuellt, så här:
body {
background-color: #fff;
}
p {
color: #000;
}
I stället skapa en :root block som kommer att gälla överallt. Kan du definiera variablerna genom att använda dubbla bindestreck (–) följt av variabelns namn. Då, närhelst du behöver för att fastställa ett värde, använda variabeln namn inne i var() funktion istället:
:root {
–primära: #000;
–bakgrund: #fff;
}
body {
background-color: var(–bakgrund);
}
p {
färg: var(–primära);
}
Denna metod har den underbara förmånen att ändra dessa variabler och med förändringar speglar överallt. Strax nedanför :rot-block, kan lägga till en annan inuti föredrar-färg-system media query:
:root {
–primära: #000;
–bakgrund: #fff;
}
@media (föredrar-färg-schema: mörk) {
:root {
–primära: #ddd;
–background: #222
}
}
body {
background-color: var(–bakgrund);
}
p {
färg: var(–primära);
}
Detta alternativ återställer variabler till den mörka värden om webbläsaren upptäcker att användaren föredrar en mörk system. Du kan hantera dessa två paletter av färger och lätt att justera dem bara genom att ändra variablerna.
Dessutom, om du behöver extra CSS för mörkt tema, du kan placera det i en annan föredrar-färg-system fråga, även om du skulle sannolikt vill placera den under resten av CSS så det tar överhanden, eller använda den !viktigt flaggan.
Fallback För IE 11
DVS 11 inte har stöd för detta (uppenbarligen). Om du vill ge IE 11 stöd, kan du använda den urgamla metod för att dubbla upp dina egenskaper:
p {
color: #000;
färg: var(–primära);
}
På detta sätt, DVS 11 behandlar endast den första, och se den andra som ogiltiga CSS. Mörka teman kommer inte att fungera, men de skulle inte hur som helst finns det inget stöd för det media query.
Dessutom, om du inte vill använda CSS för variabler på alla, kan du bara helt formaterar din webbplats inom föredrar-färg-system fråga, men det är otymplig och avfall utrymme. Om du måste ha stöd för alla webbläsare som finns, och använda den dubbla egenskapen återgång i stället.