Hur man implementerar ljus eller mörka lägen i CSS

Sep 11, 2025
Hur
Use light and dark mode in CSS

CSS-specifikationen är ständigt utvecklat. Processen för att implementera nya funktioner i CSS är komplicerat, men den förenklade versionen är att CSS-arbetsgruppen beslutar om de nya elementen som ska läggas till i specifikationen. Det är då upp till webbläsarna att implementera dessa nya element, och webbläsarna väljer i vilka ordning för att genomföra dem, varför vi nu har en felaktig matchning av stöd för nya funktioner. Även om det här kan vara irriterande ibland är det ett mycket bättre sätt att göra det än webbläsarna som genomför hela specifikationen, som vi såg i de tidiga dagarna av webben. Om du är orolig för din webbplats som arbetar med sin fulla kapacitet, utnyttjar stödet av ett stödjande webbhotell service.

Allt detta låter som för mycket arbete? Håll saker enkla med a Website Builder .

CSS-arbetsgruppen består av medlemmar från alla större webbläsare och andra teknikföretag som Apple och Adobe. Apple, har nyligen lanserat sin nya version av MacOS, ville ha ett sätt att upptäcka sitt snygga nya mörka läge i webbläsaren. För att göra detta drev Apple en rekommendation till specifikationen för en ny nivå 5 mediafråga. 

 @Media (precers-color-schema: ljus | mörk)
{...}

Med hjälp av denna medifrågor kan vi upptäcka om användaren för närvarande använder ljus eller mörkt läge i operativsystemet. För tillfället stöds detta endast av Safari Technology Preview 69 och ovan, men de andra webbläsarna borde inte vara långt bakom.

  • En webbdesigners guide till CSS-metoder

För att kunna testa detta måste du uppgraderas till Mojave 10.14 (MacOS) och har valt mörkt utseende i systeminställningar. Det finns några sätt att vi kan använda den här nya medifrågorna för att genomföra olika teman. Vi utforskar några av dem nu i den här handledningen.

01. Ställ in sidan

För att börja, måste vi skapa några html-element i stil, så vi börjar med att skapa en ny penna på Codepen och lägga till några element. Vi lägger till en behållare för vårt innehåll, för att centrera det, och några rubriker och text. Vi ställer in CSS för att använda SASS för att kunna använda Nesting i CSS. 

 & lt; div class = "Content-container" & GT;
& lt; H1 & GT; Rubrik One & LT; / H1 & GT;
& lt; H2 & GT; Rubrik två & LT; / H2 & GT;
& lt; hr & gt;
& lt; P & GT; ... & lt; / P & GT;
& lt; P & GT; ... & lt; / P & GT;
& lt; / div & gt;

02. Stil grundläggande element

Därefter lägger vi till några grundläggande stilar och inkluderar några teckensnitt från Google för att få vår sida att se lite trevligare ut. Vi stilar alla våra grundläggande element, tillämpa nya teckensnittstorlekar, färger och teckensnitt. 

 Body {
Font-familj: "Merriweather", serif;
Bakgrundsfärg: #ededed;
Färg: # 212121;
Padding: 1.618rem;
linjehöjd: 1,618;
FONT-STORLEK: 16PX;
}

03. Stilbehållare

CSS light and dark: style container

Bygg en behållare med en bekväm linjelängd

Nästa Vi stilar vår behållare för att göra innehållet en bekväm linjelängd för läsning. Vi lägger också till en bakgrundsfärg och drop Shadow. För att centrera innehållsrutan på sidan använder vi sökordet "Auto" på marginalegenskaperna "vänster och höger värden. 

 .Content-container {
Padding: 1.618rem 3.236rem;
MAX-Bredd: 48.54rem;
Marginal: 3.236Rem Auto;
Bakgrundsfärg: #fff;
Box-Shadow: 0 0 12px 6px RGBA (0,0,0,0,05);
Border-Radius: .269666667rem;
}

04. Lägg till markerad färg

CSS light and dark: highlight colour

Välj en höjdfärg och gör en stil för den

De flesta webbplatser använder sig av färg någonstans, och för tillfället har vi bara vita och grå, så nu låt oss välja en höjdpunkt och skapa en stil för att applicera den här färgen. Vi applicerar färgen med en spänningsmärke och kommer att använda den för att markera något i vårt innehåll. 

 & lt; span class = "Text - Alpha" & GT; Lorem Ipsum & LT; / Span & GT;
.text - alfa {
Färg: # C3423F;
}

05. Implementera mediafråga

CSS light and dark: highlight colour

Nu har du några stilar, du kan implementera mediafråga

Nu har vi en sida med några grundläggande stilar, låt oss titta på sätt som vi kan implementera mediefråga. Låt oss inkludera det och börja överväga några av våra stilar. Vi börjar med kroppsformat. 

 @media (föredrar-färg-schema: mörk)
{
kropp {
Bakgrundsfärg: # 111;
}
}

06. Åsidosätta de återstående stilerna

CSS light and dark: override styles

Nu kan du åsidosätta resten av stilarna

Nu när vi kan se mediafråga fungerar och vår kropps bakgrundsfärg har förändrats, måste vi åsidosätta alla våra återstående stilar. 

 .Content-container
{
färg vit;
Bakgrundsfärg: # 212121;
}
.text - alfa {
Färg: # 50A8D8;
}

07. Underhållbarhet

Medan det vi just har gjort fungerar bra för vår demo och kan bibehållas på mindre webbplatser, skulle den här metoden vara en mardröm att hantera på ett större projekt, med många olika element som alla behöver tvingas. Vi gör också tung användning av kaskaden i vårt exempel ovan, medan ett stort system kan kräva mer specificitet för att rikta alla element.

08. Ta ett annat tillvägagångssätt

CSS light and dark: another approach

För ett snabbt och smutsigt mörkt läge, använd bara 'Invert' ...

Så hur kan vi ta itu med problemet? Låt oss titta på CSS-filter. Ett av de värden som vi kan använda på CSS-filter är "Invert", så vi kunde bara tillämpa detta på HTML och invertera alla färger, vilket ger oss ett "mörkt läge". 

 @media (föredrar-färg-schema: mörk) {
html {
Filter: Invert (100%);
}
}

09. Lägg till bilder

CSS light and dark: images

... självklart kommer dina bilder att se ut så här

Medan filtermetoden fungerar med det innehåll vi har i vårt dokument ser det fortfarande inte bra ut - vår låda skugga, till exempel, har också inverterat, vilket ser ganska konstigt ut. Vi har förlorat kontroll över stilarna, vilket blir ett ännu större problem när du har färgade bakgrunder. Vi har också ett helt nytt problem att tänka på när bilder är inblandade. Låt oss se vad som händer när vi lägger till en bild på vår sida.

10. Använd anpassade egenskaper

De metoder vi har utforskat hittills också för att vi ska förlora kontroll över stilarna eller kräva mycket underhåll för att se till att allt är uppdaterat i mörkt läge. Det finns ett annat sätt att vi kan närma oss detta: vi kan använda anpassade egenskaper för att definiera våra färger och sedan åsidosätta dem med hjälp av mediafråga.

11. Skapa egna egenskaper

För att kunna använda anpassade egenskaper definierar vi dem högst upp i vår CSS inuti " :rot "Element. Rotelementet har samma omfattning som HTML så kommer att vara tillgängliga globalt. Vi måste bestämma de variabla namnen och definiera deras värderingar. 

: root {
- Background-Color: #EDeded;
--Page-bakgrund: #ff;
--Text-färg: # 212121;
-Color-Alpha: # C3423F;
}

12. Applicera våra anpassade egenskaper

Nu har vi några egna egenskaper som definieras kan vi använda dem i vår CSS. Vi börjar med kroppen och applicerar bakgrunds- och textfärger. För att kunna använda en anpassad egendom använder vi " VAR (- Custom-Property-Namn) 'syntax. 

 Body {
Bakgrundsfärg: var (- bakgrundsfärg);
Färg: var (- textfärg);
}

13. Applicera återstående egenskaper

Med samma metod kan vi också uppdatera vår behållarens "bakgrundsfärg" och "färg" av vår " text-alfa 'klass för att använda våra anpassade egenskaper. Alla färger i vår sida styrs nu med egna egenskaper. 

 .Content-container {
Bakgrundsfärg: var (- sidolägg);
}
.text - alfa {
Färg: var (- färg-alfa);
}

14. Lägg till mediafråga

Nu kan vi lägga till mediafrågan, men den här gången kan vi åsidosätta de anpassade egenskapsvärdena som är inuti det. Vi lägger detta direkt efter den ursprungliga rotdefinitionen, och inuti mediefränningen kan vi helt enkelt välja nya värden för alla våra färgpersonal. 

 @media (föredrar-färg-schema: mörk) {
: root {
- Background-Färg: # 111;
--Page-bakgrund: # 212121;
--Text-färg: #ededed;
-Color-Alpha: # 50A8D8;
}
}

15. Ta full kontroll

Anpassade egenskaper Ge oss fullständig kontroll för att välja vilka färger och andra egenskaper vi ändrar och använder. Låt oss uppdatera lådans skugga på vår sidabehållare för att göra det mindre transparent när du använder mörkt läge. För att göra detta måste vi skapa en ny anpassad egendom för sidan Shadow. 

: root {
...
--Page-Shadow: 0 0 12px 6px rgba
(0,0,0,0,05);
}

16. Applicera skuggan

Nu har vi skapat en annan anpassad egendom som vi behöver tillämpa det på rätt element på sidan. Vi kan sedan åsidosätta värdet i vårt rotelement för att minska transparensen. 

 @media (föredrar-färg-schema: mörk) {
: root {
...
--Page-Shadow:
0 0 12px 6px rgba (0,0,0,0,33)
;
}
}
.Content-container {
...
Box-Shadow: var (- Page-Shadow);
}

17. Lägg till en bild

CSS light and dark: images

Lägg till en bild och flyta den bredvid innehållet

Låt oss nu lägga till en bild i vårt innehåll, och då kan vi lägga till några grundläggande stilar för att flyta bilden bredvid innehållet. 

 IMG {
Bredd: 100%;
Höjd: Auto;
flyta till vänster;
MAX-Bredd: 300px;
marginal-höger: 1.618rem;
Marginalbotten: 1.618rem;
}

Som vi kan se, eftersom vi inte använder några filter ändras inte bilden mellan de två teman.

18. Lägg till fler komponenter

Nu har vi våra egna egenskaper som vi kan fortsätta lägga till element på sidan och styla dem med våra variabler. Låt oss skapa en knappklass och lägga till en knapp på vår sida. 

. Button {
Display: inline-flex;
Font-familj: ärft;
Bakgrundsfärg: var (- färg-alfa);
Färg: var (- textfärg);
Padding: 1.618rem 3.236rem;
gräns: 0 ingen;
Border-Radius: 0.25rem;
Textdekoration: Ingen;
}

19. Skapa knapp Hover Styles

Med samma variabler kan vi också skapa en svängstil som kan användas för båda teman. För att uppnå detta kommer vi att invertera färgerna när användaren svänger över knappen och övergå dessa egenskaper för att göra upplevelsen mindre krossning. 

. Button {
...
Övergång: Bakgrundsfärg 150ms,
färg 150ms;
& amp;: Hover {
Bakgrundsfärg: var (- textfärg);
Färg: var (- färg-alfa);
}
}

20. Gör knappen anpassade egenskaper

Anpassade egenskaper har samma omfattning som vanliga CSS-element; Det betyder att vi kan åsidosätta dem med en mer specifik väljare. Vi kan utnyttja detta och skapa några variabler som är scoped till vår knapp. 

. Button {
- BUTTON-BAKGRUND: VAR (- färg-alfa);
- BUTTON-TEXT: VAR (- Bakgrundsfärg);
Bakgrundsfärg: var (- knapp-bakgrund);
Färg: var (- knapptext);
...
}

21. Använda omfattning

CSS light and dark: scope

Använd räckvidden för att skapa olika stilar och interaktioner för din knapp

Vi kan använda detta räckvidd för att skapa olika stilar och sväva interaktioner för vår knapp i mörka och lätta teman. Vi kan ändra värdet på våra variabler baserat på mediefrågan eller elementet i elementet, istället för att upprepa fastigheten med ett nytt värde som vi normalt skulle. 

. Button {
...
& amp;: Hover {
- Knappen - Bakgrund: # AE3937;
@Media (föredrar-färg-schema: mörk) {
- BUTTON-BAKGRUND: # 2E98D1;
- Knapptext: var (- bakgrund-
Färg);
}
}
}

Arbetar på en byggnad med ett lag? Håll din process sammanhängande med anständigt molnlagring .

Generate, the award winning conference for web designers, returns to NYC on April 24-25! To book tickets visit www.generateconf.com

Generera, den prisbelönta konferensen för webbdesigners, återgår till NYC den 24-25 april! Att boka biljetter Besök www.generateconf.com

Den här artikeln publicerades ursprungligen i utgåva 283 av kreativ webbdesignmagasin Webbdesigner . Köp utgåva 283 eller Prenumerera på webbdesigner här .

Relaterade artiklar:

  • Kom igång med CSS-konst
  • 12 Great CSS Animation Resources
  • Vilken CSS-ram ska du använda?

Hur - Mest populära artiklar

Hur man skriver HTML-kod snabbare

Hur Sep 11, 2025

(Bildkredit: Framtida) Moderna webbplatser kräver massor av HTML-kod. Komplexa layouter med flera olika vyer och sta..

Hur man använder Gravity Sketch

Hur Sep 11, 2025

(Bildkredit: Gravity Sketch) Gravity skiss, design och modelleringsverktyg för VR Creatives, har fortsatt att få ma..

Arbeta smart med din zbrush ui

Hur Sep 11, 2025

Allt som stimulerar vårt sinne kan påverka vår produktivitet, och det är viktigt att känna igen faktorer som stöder vårt arbete, oavsett om det är rätt slags bakgrundsmusik eller til..

Gör dina tecken pop med färg och ljus

Hur Sep 11, 2025

Jag gillar verkligen att arbeta i färg, oavsett om det är i Photoshop cc eller måla traditionellt med akvarelle..

Hur man använder markdown i webbutveckling

Hur Sep 11, 2025

Som webbutvecklare och innehållsskapare spenderar vi i allmänhet mycket tid att skriva text som är inslagna inuti Html..

Gör en logotyp i Illustrator

Hur Sep 11, 2025

Den här veckan såg utgåvan av några nya videoklipp på Adobes gör det nu spellista, en samling klipp allt om hur man skapar designprojekt med kreativa molnprogram på en minut eller mind..

Använda vektorverktyg: En webbdesigners tillvägagångssätt

Hur Sep 11, 2025

Om du är en webbdesigner är det en bra chans att Photoshop är öppet och körs på din dator. Låt oss möta det - Photoshop har alltid varit arbetshäst och de facto-standarden för webbd..

Hur man skulpterar och utgör ett tecknadshuvud i Zbrush

Hur Sep 11, 2025

När jag ville skapa en rolig bit av 3d konst Med ett goofy uttryck såg jag ett koncept av Randy Bishop, jag gill..

Kategorier