Sådan implementeres lys eller mørke tilstande i CSS

Sep 11, 2025

hvordan

CSS-specifikationen er evigt udviklet. Processen til implementering af nye funktioner i CSS er kompliceret, men den forenklede version er, at CSS-arbejdsgruppen beslutter sig for de nye elementer, der skal tilføjes til specifikationen. Det er så op til browserne for at gennemføre disse nye elementer, og browserne vælger i hvilken rækkefølge at implementere dem, hvorfor vi nu har en mismatch af støtte til nye funktioner. Selvom dette kan være irriterende til tider, er det en meget bedre måde at gøre det på end browserne, der implementerer den fulde specifikation, som vi så i de tidlige dage af internettet. Hvis du er bekymret for dit websted, der arbejder på sin fulde kapacitet, skal du gøre støtte fra en støttende Web Hosting. service.

Alt dette lyder som for meget arbejde? Hold tingene enkle med a Website Builder. .

CSS-arbejdsgruppen består af medlemmer fra alle større browserleverandører og andre teknologiselskaber som Apple og Adobe. Apple, der for nylig har lanceret sin nye version af MacOS, ønskede en måde at opdage sin snazzy nye mørke tilstand i browseren. For at gøre dette skubbede Apple en anbefaling til specifikationen for et nyt niveau 5 medie forespørgsel.

 @media (foretrækker-farveskema: lys | mørk)
{...}

Ved hjælp af denne medie forespørgsel kan vi registrere, om brugeren aktuelt bruger lys eller mørk tilstand i operativsystemet. I øjeblikket understøttes det kun af Safari Technology Preview 69 og derover, men de andre browsere bør ikke være langt bagud.

En webdesigner guide til CSS-metoder

For at teste dette skal du opgraderes til Mojave 10.14 (MacOS) og har valgt mørkt udseende i systemindstillinger. Der er et par måder, vi kan bruge denne nye medieforespørgsel til at implementere forskellige temaer. Vi vil undersøge nogle få af dem nu i denne vejledning.

01. Indstil siden

For at begynde, skal vi oprette nogle HTML-elementer til Style, så vi starter med at oprette en ny pen på CodePen og tilføje nogle elementer. Vi tilføjer en beholder til vores indhold, for at centrere det og nogle overskrifter og tekst. Vi sætter CSS'en til at bruge SASS for at kunne bruge nestning i CSS.

 & lt; div klasse = "indholdsbeholder" & gt;
& lt; H1 & GT; overskrift en & lt; / h1 & gt;
& lt; H2 & GT; overskrift to & lt; / h2 & gt;
& lt; hr & gt;
& lt; p & gt; ... & lt; / p & gt;
& lt; p & gt; ... & lt; / p & gt;
& lt; / div & gt;

02. Style Basic Elements

Derefter tilføjer vi nogle grundlæggende stilarter og indeholder nogle skrifttyper fra Google for at gøre vores side til at se lidt pænere ud. Vi stiller alle vores grundlæggende elementer, der anvender nye skrifttypestørrelser, farver og skrifttyper.

 krop {
Font-familie: 'Merriweather', Serif;
Baggrundsfarve: #Ededed;
Farve: # 212121;
Padding: 1.618rem;
Line-Heund: 1.618;
Font-størrelse: 16px;
}

03. Style Container.

CSS light and dark: style container — Bygg en beholder med en behagelig linje længde

Derefter stiver vi vores beholder til at gøre indholdet til en behagelig linjelængde til læsning. Vi vil også tilføje en baggrundsfarve og drop skygge. For at centrere indholdsboksen på siden bruger vi søgeordet 'Auto' på margenegenskaberne 'venstre og højre værdier.

 .Content-container {
PADDING: 1.618REM 3.236REM;
Max-bredde: 48.54rem;
Margin: 3.236rem Auto;
Baggrundsfarve: #fff;
Box-Shadow: 0 0 12px 6px RGBA (0,0,0,0,05);
Border-radius: .269666667rem;
}

04. Tilføj fremhæv farve

CSS light and dark: highlight colour — Vælg en højdepunkt farve og lav en stil til det

De fleste websites gør brug af farve et eller andet sted, og i øjeblikket har vi kun hvide og grays, så nu, lad os vælge en fremhævning farve og skabe en stil til at anvende denne farve. Vi vil anvende farven ved hjælp af en spændingsmærke, og vil bruge det til at fremhæve noget i vores indhold.

 & lt; span klasse = "tekst - alfa" & gt; lorem ipsum & lt; / span & gt;
.TEXT - ALPHA {
Farve: # C3423F;
}

05. Gennemfør medieforespørgslen

Nu har vi en side med nogle grundlæggende stilarter, lad os se på måder, vi kan implementere medieforespørgslen på. Lad os inkludere det og begynde at overstyrke nogle af vores stilarter. Vi starter med kroppens stilarter.

 @media (foretrækker-farveskema: mørk)
{
krop {
Baggrundsfarve: # 111;
}
}

06. Overstyr de resterende stilarter

CSS light and dark: override styles — Nu kan du tilsidesætte resten af stilarterne

Nu hvor vi kan se medieforespørgslen virker, og vores krops baggrundsfarve er ændret, skal vi tilsidesætte alle vores resterende stilarter.

 .Content-beholder
{
Farve: Hvid;
Baggrundsfarve: # 212121;
}
.TEXT - ALPHA {
Farve: # 50a8d8;
}

07. Vedligeholdelse

Mens det, vi netop har gjort, fungerer helt godt for vores demo og kunne opretholdes på mindre hjemmesider, ville denne metode være et mareridt at klare et større projekt med mange forskellige elementer, der alle har brug for overordnet. Vi gør også tung brug af kaskaden i vores eksempel ovenfor, mens et stort system kan kræve mere specificitet for at målrette alle elementer.

08. Tag en anden tilgang

CSS light and dark: another approach — For en hurtig og snavset mørk tilstand, brug bare 'Invert' ...

Så hvordan ellers kan vi tackle problemet? Lad os se på CSS-filtre. En af de værdier, vi kan bruge på CSS-filtre, er 'Invert', så vi kunne bare anvende dette til HTML'en og invertere alle farverne, hvilket giver os en "mørk tilstand".

 @media (foretrækker-farveskema: mørk) {
html {
Filter: Invert (100%);
}
}

09. Tilføj billeder

CSS light and dark: images — ... Selvfølgelig vil dine billeder se sådan ud

Mens filtermetoden fungerer sammen med det indhold, vi har i vores dokument, ser det stadig ikke godt ud - vores kasse skygge, for eksempel, har også inverteret, hvilket ser ganske mærkeligt ud. Vi har mistet kontrol over stilarterne, som bliver et endnu større problem, når du har farvede baggrunde. Vi har også et helt nyt problem at overveje, når billeder er involveret. Lad os se, hvad der sker, når vi tilføjer et billede til vores side.

10. Brug brugerdefinerede egenskaber

De metoder, vi har udforsket hidtil, får os til at miste kontrollen over stilarterne eller kræver en masse vedligeholdelse for at sikre, at alt er opdateret i mørk tilstand. Der er en anden måde, vi kan henvende os til: Vi kan bruge brugerdefinerede egenskaber for at definere vores farver og derefter tilsidesætte dem ved hjælp af medieforespørgslen.

11. Opret brugerdefinerede ejendomme

For at kunne bruge brugerdefinerede egenskaber definerer vi dem på toppen af vores CSS inde i ' :rod 'element. Rotelementet har det samme omfang som HTML, så vil være tilgængeligt globalt. Vi skal beslutte om de variable navne og definere deres værdier.

: Root {
--Background-Farve: #Ededed;
- PAGE-BAGGRUND: #FFF;
--Text-farve: # 212121;
- Color-Alpha: # C3423f;
}

12. Anvend vores brugerdefinerede ejendomme

Nu har vi nogle brugerdefinerede ejendomme defineret, vi kan bruge dem i vores CSS. Vi starter med kroppen og anvender baggrunds- og tekstfarverne. For at kunne bruge en brugerdefineret ejendom bruger vi ' Var (- Brugerdefineret ejendomsnavn) 'Syntaks.

 krop {
baggrundsfarve: var (- baggrundsfarve);
Farve: Var (- Tekstfarve);
}

13. Anvend resterende egenskaber

Ved hjælp af den samme metode kan vi også opdatere 'Baggrundsfarven' i vores Container og 'Farve' af vores ' tekst-alfa. 'klasse for at bruge vores brugerdefinerede egenskaber. Alle farverne på vores side styres nu ved hjælp af brugerdefinerede egenskaber.

 .Content-container {
BAGGRUND-FARVE: VAR (- SIDE-BAGGRUND);
}
.TEXT - ALPHA {
Farve: VAR (- Color-Alpha);
}

14. RE-Tilføj medieforespørgslen

Nu kan vi igen tilføje medieforespørgslen, men denne gang kan vi tilsidesætte de brugerdefinerede ejendomsværdier, der er inde i den. Vi vil placere dette lige efter den oprindelige roddefinition, og inde i medieforespørgslen kan vi nu blot vælge nye værdier for alle vores farve brugerdefinerede egenskaber.

 @media (foretrækker-farveskema: mørk) {
: rod {
--Background-farve: # 111;
- Page-Background: # 212121;
--TEXT-FARVE: #Ededed;
- Color-Alpha: # 50a8d8;
}
}

15. Tag fuld kontrol

Brugerdefinerede ejendomme giver os fuld kontrol for at vælge hvilke farver og andre egenskaber vi ændrer og bruger. Lad os opdatere bokseskyggen på vores sidebeholder for at gøre den mindre gennemsigtig, når du bruger mørk tilstand. For at gøre dette skal vi oprette en ny brugerdefineret ejendom til sideskyggen.

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

16. Anvend skyggen

Nu har vi lavet en anden brugerdefineret ejendom, vi skal anvende det på det rigtige element på siden. Vi kan derefter tilsidesætte værdien inde i vores rodelement for at reducere gennemsigtigheden.

 @media (foretrækker-farveskema: mørk) {
: rod {
...
- Page-Shadow:
0 0 12PX 6PX RGBA (0,0,0,0,33)
;
}
}
.Content-container {
...
Box-Shadow: Var (- side-skygge);
}

17. Tilføj et billede

Lad os nu tilføje et billede tilbage i vores indhold, og så kan vi tilføje nogle grundlæggende stilarter for at flyde billedet ved siden af indholdet.

 img {
Bredde: 100%;
Højde: Auto;
Float: Venstre;
Max-bredde: 300px;
Margin-højre: 1.618rem;
Margin-bottom: 1.618rem;
}

Som vi kan se, da vi ikke bruger nogen filtre, ændres billedet ikke mellem de to temaer.

18. Tilføj flere komponenter

Nu har vi vores brugerdefinerede egenskaber, vi kan fortsætte med at tilføje elementer til siden og styles dem med vores variabler. Lad os oprette en knapklasse og tilføje en knap til vores side.

. Button {
Display: Inline-Flex;
Font-familie: arve;
Baggrundsfarve: Var (- Color-Alpha);
Farve: Var (- Tekstfarve);
PADDING: 1.618REM 3.236REM;
Border: 0 Ingen;
Border-radius: 0.25rem;
Tekst-dekoration: Ingen;
}

19. Opret knap Hover Styles

Ved hjælp af de samme variabler kan vi også oprette en svæverestil, der kan bruges til begge temaer. For at opnå dette vil vi omdanne farverne, når brugeren svæver over knappen og overgang de egenskaber for at gøre oplevelsen mindre spaltning.

. Button {
...
Overgang: Baggrundsfarve 150ms,
farve 150ms;
& Amp;: Hover {
Baggrundsfarve: VAR (- Tekstfarve);
Farve: VAR (- Color-Alpha);
}
}

20. Gør knap brugerdefinerede egenskaber

Brugerdefinerede egenskaber har samme omfang som almindelige CSS-elementer; Det betyder, at vi kan tilsidesætte dem ved hjælp af en mere specifik vælger. Vi kan drage fordel af dette og oprette nogle variabler, der scoped til vores knap.

. Button {
- Button-Baggrund: VAR (- Color-Alpha);
- Button-tekst: Var (- Baggrundsfarve);
Baggrundsfarve: Var (- Button-Background);
Farve: VAR (- Button-Text);
...
}

21. Udnyt anvendelsesområdet.

CSS light and dark: scope — Brug omfanget til at oprette forskellige stilarter og interaktioner for din knap

Vi kan udnytte dette omfang for at skabe forskellige stilarter og svæve interaktioner for vores knap i mørke og lette temaer. Vi kan ændre værdien af vores variabler baseret på medieforespørgslen eller elementets tilstand, i stedet for at gentage ejendommen med en ny værdi, som vi normalt ville.

. Button {
...
& Amp;: Hover {
- Button-Baggrund: # AE3937;
@media (foretrækker-farveskema: mørk) {
- Button-Baggrund: # 2E98D1;
- Button-tekst: VAR (- BAGGRUND-
farve);
}
}
}

Arbejder på en bygning med et hold? Hold din proces sammenhængende med anstændigt Sky lagring .

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

Denne artikel blev oprindeligt offentliggjort i udstedelse 283 af Creative Web Design Magazine Webdesigner . Køb problem 283. eller Abonner på Web Designer her .

Relaterede artikler:

Kom i gang med CSS Art
12 Great CSS animation ressourcer
Hvad CSS-ramme skal du bruge?

Sådan implementeres lys eller mørke tilstande i CSS

01. Indstil siden

02. Style Basic Elements

03. Style Container.

04. Tilføj fremhæv farve

05. Gennemfør medieforespørgslen

06. Overstyr de resterende stilarter

07. Vedligeholdelse

08. Tag en anden tilgang

09. Tilføj billeder

10. Brug brugerdefinerede egenskaber

11. Opret brugerdefinerede ejendomme

12. Anvend vores brugerdefinerede ejendomme

13. Anvend resterende egenskaber

14. RE-Tilføj medieforespørgslen

15. Tag fuld kontrol

16. Anvend skyggen

17. Tilføj et billede

18. Tilføj flere komponenter

19. Opret knap Hover Styles

20. Gør knap brugerdefinerede egenskaber

21. Udnyt anvendelsesområdet.

hvordan - Mest populære artikler

Sådan redigeres en video på Tiktok

Brug Brain.js til at opbygge et neuralt netværk

Sådan opretter du 3D-scanninger med virkelighedsfangst

Opret et 3D-landskab i 6 enkle trin

Mal en sci-fi spil indstilling i Photoshop

malingstyret og glatte streger med skitserbar

Lav en typografisk plakat ved hjælp af Adobe InDesign

Sådan oprettes manga med en vild West Twist

Kategorier