Hogyan lehet végrehajtani a könnyű vagy sötét módokat a CSS-ben

Sep 16, 2025
kézikönyv
Use light and dark mode in CSS

A CSS-specifikáció valaha is fejlődő. A CSS új funkcióinak megvalósításának folyamata bonyolult, de az egyszerűsített változat az, hogy a CSS munkacsoportja dönt a specifikációhoz hozzáadandó új elemekről. Ezután az új elemek megvalósítása érdekében a böngészők, és a böngészők kiválasztják, hogy milyen sorrendben hajtják végre azokat, ezért van egy új funkciók támogatása. Bár ez időnként bosszantó lehet, ez sokkal jobb módja annak, hogy megcsináljuk, mint a teljes specifikációt végrehajtó böngészők, ahogy láttuk az internet korai napjaiban. Ha aggódsz az Ön webhelyén, a teljes képessége, hogy támogatja a támogató támogatását web hosting szolgáltatás.

Mindez úgy hangzik, mint túl sok munka? Tartsa egyszerű dolgokat a weboldal építője .

A CSS munkacsoport tagjai az összes nagyobb böngésző gyártó és más technológiai vállalatok, mint az Apple és az Adobe. Az Apple, miután a közelmúltban elindította a MacOS új verzióját, azt akarta, hogy a böngészőben felismerje a snazzy új sötét módját. Ennek érdekében az Apple javaslatot tett az új szintű 5 média lekérdezés specifikációjára. 

 @Media (prefer-color-séma: fény | sötét)
{...}

Ezzel a média lekérdezésével felismerhetjük, hogy a felhasználó jelenleg könnyű vagy sötét módot használja az operációs rendszerben. Jelenleg ez csak a Safari Technology Preview 69 és a fenti támogatja, de a többi böngészőnek nem szabad messze maradni.

  • A CSS-módszerek webes tervezője

Ennek teszteléséhez a Mojave 10.14 (MacOS) -ra kell frissíteni, és sötét megjelenést választott a rendszerbeállításokban. Van néhány módja annak, hogy ezt az új média lekérdezést különböző témák végrehajtásához használhatjuk. Most már felfedezzük néhányat ebben a bemutatóban.

01. Állítsa be az oldalt

Kezdjük, meg kell hoznunk néhány HTML elemet a stílushoz, így elkezdjük létrehozni egy új tollat ​​a codepen és néhány elem hozzáadásával. Hozzáadunk egy tartályt a tartalomhoz, hogy középen legyen, és néhány fejléc és szöveg. Megállapítjuk a CSS-t a SASS használatához a CSS-ben való fészkelés használatához. 

 & lt; div osztály = "tartalomtartály" & gt;
& lt; h1 & gt; egy & lt; / h1 & gt;
& lt; h2 & gt; két, két & lt; / h2 & gt;
& lt; hr & gt;
& lt; p & gt; ... & lt; / p & gt;
& lt; p & gt; ... & lt; / p & gt;
& lt; / div & gt;

02. Stílus alapelemek

Ezután hozzáadunk néhány alapvető stílusokat, és tartalmazunk néhány betűtípust a Google-tól annak érdekében, hogy oldalunk kicsit szebb legyen. Minden alapvető elemünket új betűméreteket, színeket és betűtípusokat alkalmazunk. 

 test {
Font-Család: "Merriweather", Serif;
Háttérszín: #ededed;
Szín: # 212121;
Padding: 1.618Rem;
Vonalmagasság: 1.618;
Betűméret: 16px;
}

03. stílusú tartály

CSS light and dark: style container

Építsen egy tartályt kényelmes vonalhosszúsággal

Ezután a tartályunkat, hogy a tartalmat kényelmes vonalhosszat lehessen olvasni. Hozzáadunk egy háttérszínt és az árnyékot is. Annak érdekében, hogy az oldal tartalmi mezőjének középpontjába kerüljön, akkor a "Auto" kulcsszót a margó tulajdonságai bal és jobb értékeire használjuk. 

 .content-tartály {
Padding: 1.618Rem 3.236Rem;
Max-szélesség: 48.54Rem;
Margó: 3.236Rem auto;
háttérszín: # #FFF;
doboz-árnyék: 0 0 12PX 6PX RGBA (0,0,0,0,05);
Border-RADIUS: .269666667REM;
}

04. Hozzáadás jelölje ki a színt

CSS light and dark: highlight colour

Válasszon ki egy jelzést, és készítsen egy stílust

A legtöbb weboldal valahol használjon színt, és jelenleg csak fehérje és szürke, ezért most válasszunk egy kiemelkedő színt, és hozzon létre egy stílust a szín alkalmazásához. A színt egy span címkével fogjuk alkalmazni, és használni fogjuk, hogy kiemeljük valamit a tartalomunkban. 

 & lt; span class = "Text - alpha" & gt; lorem ipsum & lt; / span & gt;
.Text - alfa {
Szín: # C3423F;
}

05. Végezze el a média lekérdezését

CSS light and dark: highlight colour

Most van néhány stílusod, megvalósíthatja a média lekérdezését

Most van egy oldalunk néhány alapvető stílussal, nézzük meg, hogyan lehet megvalósítani a média lekérdezését. Tartsuk be, és kezdjék meg felülbírálni néhány stílusunkat. Elkezdjük a teststílusokkal. 

 @Media (prefer-color-séma: sötét)
{
test {
Háttérszín: # 111;
}
}

06. felülbírálja a fennmaradó stílusokat

CSS light and dark: override styles

Most felülbírálhatja a többi stílusot

Most, hogy láthatjuk, hogy a média lekérdezés működik, és testünk háttérszíne megváltozott, meg kell osztanunk az összes többi stílust. 

 .content-tartály
{
fehér szín;
Háttérszín: # 212121;
}
.Text - alfa {
Szín: # 50a8d8;
}

07. Fenntarthatóság

Bár amit csak most csináltunk tökéletesen jól bemutatni a demónk számára, és kisebb weboldalakon lehet fenntartani, ez a módszer egy rémálom lenne, amely egy nagyobb projekten kezelhető, sok különböző elemgel, amely mindenki számára szükség van. A fenti példában a kaszkád nagy használatát is használjuk, míg egy nagy rendszer több specifitást igényelhet annak érdekében, hogy minden elemet célozza meg.

08. Tegyen egy másik megközelítést

CSS light and dark: another approach

Gyors és piszkos sötét módban csak használja az "invert" ...

Szóval hogyan tudjuk kezelni a problémát? Nézzük meg a CSS szűrőket. Az egyik érték, amelyet a CSS-szűrőkön használhatunk, "invert", így ezt a HTML-nek alkalmazhatjuk, és invertáljuk az összes színt, így "sötét módot" adunk nekünk. 

 @Media (prefer-color-séma: sötét) {
html {
Szűrő: invert (100%);
}
}

09. Képek hozzáadása

CSS light and dark: images

... persze, a fotók így fognak nézni

Míg a szűrő módszer a tartalommal együtt működik a dokumentumunkban, még mindig nem tűnik remekül - a doboz árnyéka, például fordított, ami elég furcsa. Elvesztettük az irányítást a stílusok felett, ami még nagyobb problémává válik, ha színes hátterek vannak. Mi is van egy teljesen új probléma, hogy fontolja meg, ha a képek részt vesznek. Lássuk, mi történik, ha hozzáadunk egy képet az oldalunkra.

10. Használjon egyedi tulajdonságokat

A módszerek már feltárt eddig sem okoz számunkra, hogy elveszíti az ellenőrzést az stílust vagy igényel sok karbantartást annak érdekében, hogy minden rendben van frissítve sötét módban. Van egy másik módja annak, hogy megközelíthetjük ezt: egyedi tulajdonságokat használhatunk a színek meghatározásához, majd felülbírálhatjuk őket a média lekérdezésével.

11. Hozzon létre egyéni tulajdonságokat

Az egyéni tulajdonságok használatához meghatározzuk őket a CSS-vel a " :gyökér 'Elem. A gyökérelemnek ugyanolyan hatálya van, mint a HTML, így globálisan elérhető lesz. El kell döntenünk a változó nevekről, és meghatározni kell értékeiket. 

: Gyökér {
- hátrahúzás-szín: #ededed;
- MPage-Háttér: #FFF;
--Text-szín: # 212121;
--Color-alpha: # C3423F;
}

12. Alkalmazza az egyéni tulajdonságainkat

Most van néhány egyedi tulajdonsága, amelyet meg lehet adni, amit használhatunk a CSS-ben. Elkezdjük a testtel, és alkalmazzuk a háttér és a szöveg színeket. Az egyéni tulajdonság használata érdekében a " var (- egyéni tulajdon-név) 'Szintaxis. 

 test {
Háttérszín: var (- háttérszín);
Szín: var (- szöveges szín);
}

13. A fennmaradó tulajdonságok alkalmazása

Ugyanezzel a módszerrel frissíthetjük a tartályunk "háttér színét" és a "szín" szöveg-alfa "Osztály az egyéni tulajdonságaink használatához. Az oldalunk összes színét az egyéni tulajdonságokkal vezérlik. 

 .content-tartály {
Háttérszín: var (- oldal háttér);
}
.Text - alfa {
Szín: var (- color-alpha);
}

14. Adja hozzá a média lekérdezését

Most újra hozzáadhatjuk a média lekérdezést, de ezúttal felülírhatjuk az egyéni tulajdonsági értékeket. Ezt a jogot az eredeti root definíció után helyezzük el, és a média lekérdezésén belül egyszerűen csak új értékeket választhatunk az összes színes egyéni tulajdonságunkhoz. 

 @Media (prefer-color-séma: sötét) {
: gyökér {
- hátrahúzás szín: # 111;
- MPage-Háttér: # 212121;
--Text-szín: #ededed;
--Color-alpha: # 50a8d8;
}
}

15. Tegyen teljes irányítást

Az egyéni tulajdonságok nekünk teljes mértékben ellenőrzése, hogy válasszon, milyen színeket és egyéb tulajdonságait megváltoztatjuk és használata. Frissítsük a doboz árnyékát az oldaltartályunkon, hogy kevésbé átlátszó legyen a sötét mód használatakor. Ehhez új egyedi tulajdonságot kell létrehoznunk az oldal árnyékához. 

: Gyökér {
...
--Page-Shadow: 0 0 12PX 6PX RGBA
(0,0,0,05);
}

16. Alkalmazza az árnyékot

Most létrehoztunk egy másik egyedi tulajdonságot, amelyet az oldal megfelelő elemére kell alkalmaznunk. Ezután felülírhatjuk a gyökérelem belsejében lévő értéket az átláthatóság csökkentése érdekében. 

 @Media (prefer-color-séma: sötét) {
: gyökér {
...
--Page-Shadow:
0 0 12PX 6PX RGBA (0,0,0,0,33)
;
}
}
.content-tartály {
...
doboz-árnyék: var (- oldal-árnyék);
}

17. Kép ​​hozzáadása

CSS light and dark: images

Adjon hozzá egy képet, és lebegezze a tartalom mellett

Most adjunk hozzá egy képet vissza a tartalmunkba, majd hozzáadhatunk néhány alapvető stílusokat a tartalom melletti kép lebegéséhez. 

 Img {
Szélesség: 100%;
Magasság: Auto;
balra lebeg;
Max-szélesség: 300px;
Margin-Right: 1.618Rem;
margó alsó: 1.618Rem;
}

Amint láthatjuk, mivel nem használunk semmilyen szűrőt, a kép nem változik a két téma között.

18. További összetevők hozzáadása

Most már megkaptuk az egyéni tulajdonságainkat, hogy az elemeket az oldalhoz adjunk hozzá, és a változókkal styling őket. Hozzunk létre egy gombosztályt, és adjunk hozzá egy gombot az oldalunkhoz. 

 .Button {
Kijelző: inline-flex;
font-család: öröklés;
háttérszín: var (- color-alpha);
Szín: var (- szöveges szín);
Padding: 1.618Rem 3.236Rem;
Border: 0 Nincs;
Border-sugara: 0.25Rem;
Szöveges dekoráció: nincs;
}

19. Hozzon létre egy Hover Styles létrehozása

Ugyanazon változók segítségével olyan hover stílust is létrehozhatunk, amely mindkét témához használható. Ennek elérése érdekében invertáljuk a színeket, amikor a felhasználó lebegíti a gombot, és átállt ezek a tulajdonságok annak érdekében, hogy a tapasztalat kevésbé zavaró legyen. 

 .Button {
...
Átmenet: Háttérszín 150ms,
Szín 150ms;
& amp;: Hover {
Háttérszín: var (- szöveges szín);
Szín: var (- color-alpha);
}
}

20. Készítse el az egyéni tulajdonságokat

Az egyéni tulajdonságok ugyanolyan körűek, mint a rendszeres CSS elemek; Ez azt jelenti, hogy egy konkrétabb választó segítségével felülbírálhatjuk őket. Ezt kihasználhatjuk, és hozzon létre néhány változót, amelyek a mi gombunkra kerülnek. 

 .Button {
- button-háttér: var (- color-alpha);
- button-szöveg: var (- háttérszín);
Háttérszín: var (- gomb háttér);
Szín: var (- gomb-szöveg);
...
}

21. Használja ki a hatót

CSS light and dark: scope

Használja a lehetőséget, hogy hozzon létre különböző stílusokat és interakciókat a gombra

Ezt a hatályt felhasználhatjuk annak érdekében, hogy különböző stílusokat hozzanak létre, és a sötét és könnyű témákban lévő gombunkat a gombokhoz használják. Megváltoztathatjuk változóink értékét a média lekérdezésén vagy az elem állapotán alapulva, ahelyett, hogy az ingatlant új értékkel megismételte volna, amint azt általában szoktuk. 

 .Button {
...
& amp;: Hover {
- Button-Háttér: # AE3937;
@Media (prefer-color-séma: sötét) {
- button-háttér: # 2E98D1;
- button-szöveg: var (- háttér-
szín);
}
}
}

Dolgozik egy csapatban? Tartsa a folyamatot kohézióval tisztességes felhő tároló .

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

Generálja, a díjnyertes konferencia webes tervezők számára, Április 24-25. A jegyek meglátogatása www.generateconf.com

Ezt a cikket eredetileg a Creative Web Design magazin 283. kiadásában tették közzé Web designer . Vásároljon kibocsátást 283 vagy Iratkozzon fel itt a webdesignerre .

Kapcsolódó cikkek:

  • Kezdje el a CSS-művészetet
  • 12 nagy CSS animációs erőforrások
  • Milyen CSS-keretrendszert kell használnia?

kézikönyv - Most Popular Articles

Adobe Fresco Tutorial: Hozzon létre egy portrét a festmény alkalmazásban

kézikönyv Sep 16, 2025

(Kép hitel: Phil Galloway) Ehhez az Adobe Fresco bemutatóhoz egy élénk és érzelmi portré létrehozásként fog..

A vízszimulációk létrehozása

kézikönyv Sep 16, 2025

Ez a bemutató megtanítja Önt, hogy hozzon létre egy animációs strand diorámát kezdve a Houdini FX használatával. Meg fo..

Munka kép maszk mágia Houdini

kézikönyv Sep 16, 2025

Ha érdekel, hogy többet tanulsz Houdini-ről, győződjön meg róla, hogy részt vesz New York létrehozásakor (április..

Kezdje el a Webvr-t

kézikönyv Sep 16, 2025

UGORJ: Webvr erőforrások A Webvr egy Java..

Hogyan kell használni az intelligens rétegeket a Photoshopban

kézikönyv Sep 16, 2025

Ha az ismétlődő mintákat és mintákat ábrázolnak, néhány eszköz olyan hasznos, mint az intelligens rétegek. Felbecsül..

10 csodálatos dolog, amit a rétegekkel tehetsz

kézikönyv Sep 16, 2025

A rétegek az, ami lehetővé teszi, hogy egy projektet építsen ki a korai alapokra a befejező érintésekre. Nehéz elhinni m..

Hozzon létre egy tökéletesen geometriai logót illusztrátor

kézikönyv Sep 16, 2025

Ebben a röviden Illusztrátor bemutató , tervező Lesz paterson Sétál, hogyan lehet létrehozni..

Festeni egy munch stílusú portré a Photoshop CC-ben

kézikönyv Sep 16, 2025

Részeként A kreativitás rejtett kincsei A projekt, az Adobe átalakította az Edvard által használt évszáza..

Kategóriák