Jak wdrażać lekkie lub ciemne tryby w CSS

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

Specyfikacja CSS jest zawsze ewoluująca. Proces wdrażania nowych funkcji w CSS jest skomplikowany, ale wersja uproszczona jest to, że grupa robocza CSS decyduje się na nowych elementach, które należy dodać do specyfikacji. Jest wtedy do przeglądarek do wdrożenia tych nowych elementów, a przeglądarki wybierają, w których ich wdrożenie, dlatego teraz mamy niedopasowanie wsparcia dla nowych funkcji. Chociaż może to być irytujące, to znacznie lepszy sposób, aby zrobić to niż przeglądarki wdrażające pełną specyfikację, jak widzieliśmy we wczesnych dniach sieci. Jeśli martwisz się o swojej witrynie, pracując nad pełną zdolnością, zaciągnij wsparcie wspierającego hosting usługa.

Wszystko to brzmi jak za dużo pracy? Trzymaj rzeczy proste z Kreator strony internetowej .

Grupa robocza CSS składa się z członków ze wszystkich głównych dostawców przeglądarki i innych firm technologicznych, takich jak Apple i Adobe. Apple, po ostatnim uruchomieniu nowej wersji MacOS, chciała sposobu wykrycia snazzy nowego trybu w przeglądarce. Aby to zrobić, Apple popchnął rekomendację specyfikacji na nowy poziom 5 Media Query. 

 @MEDIA (Prefero-kolorowy schemat: Light | Ciemny)
{...}

Korzystając z tego zapytania o media, możemy wykryć, czy użytkownik jest obecnie używany światła lub ciemnego trybu w systemie operacyjnym. W tej chwili jest to obsługiwane przez Safari Technology Preview 69 i więcej, ale pozostałe przeglądarki nie powinni być daleko w tyle.

  • Przewodnik po projektantów internetowych na metodologie CSS

W celu przetestowania tego musisz zostać zaktualizowany do Mojave 10.14 (MacOS) i wybrał ciemny wygląd w preferencjach systemowych. Jest kilka sposobów, jakie możemy użyć tego nowego zapytania medialnego, aby wdrożyć różne tematy. Przeglądamy z nich kilka z nich w tym samouczku.

01. Skonfiguruj stronę

Aby rozpocząć, musimy stworzyć pewne elementy HTML do stylu, więc zaczniemy, tworząc nowe pióro na kodepen i dodając elementy. Dodamy pojemnik na naszą zawartość, aby go wyśrodkować, a niektóre nagłówki i tekst. Ustawimy CSS do użycia Sass w celu użycia zagnieżdżenia w CSS.

02. Elementy podstawowe w stylu

Następnie dodamy kilka podstawowych stylów i zawierać kilka czcionek z Google, aby nasza strona była nieco ładniejsza. Stylizujemy wszystkie nasze podstawowe elementy, stosując nowe rozmiary czcionek, kolorów i czcionek. 

 Ciało {
Czcionka-rodzina: "Merriweather", Serif;
kolor-kolor: #ededed;
kolor: # 212121;
Wyściółka: 1.618rem;
Wysokość linii: 1,618;
Rozmiar czcionki: 16px;
}

03. Pojemnik na styl

CSS light and dark: style container

Zbuduj pojemnik z wygodną długością linii

Następnie będziemy stylować nasz kontener, aby zawartość wygodnej długości linii do czytania. Dodamy również kolor tła i rozwiń cień. Aby wyśrodkować skrzynkę zawartości na stronie, użyjemy słów kluczowych "Auto" na lewej i prawej wartości właściwości marginesu. 

 .Content-kontener {
Wyściółka: 1.618REM 3.236REM;
Max-szerokość: 48,54REM;
Marża: 3.236rem Auto;
Tło-kolor: #FFF;
Box-Shadow: 0 0 12px 6px RGBA (0,0,0.05);
Radius Border: 0,26966667REM;
}

04. Dodaj kolor podświetlenia

CSS light and dark: highlight colour

Wybierz kolor podświetlenia i wykonaj dla niego styl

Większość stron internetowych wykorzysta gdzieś kolor, a w tej chwili mamy tylko białe i szare, więc teraz wybierz kolor podświetlenia i utworzyć styl do zastosowania tego koloru. Zastosujemy kolor za pomocą znacznika rozpiętości i użyje go, aby podkreślić coś w naszej treści.

05. Wdrożenie zapytania medialnego

CSS light and dark: highlight colour

Teraz masz kilka stylów, możesz zaimplementować zapytanie do mediów

Teraz mamy stronę z podstawowymi stylami, spójrzmy na sposób, w jaki możemy wdrożyć zapytanie multimedialne. Włączmy go i zacznij naddrodzić niektóre nasze style. Zaczniemy od stylów ciała. 

 @media (Prefer-Color-Scheme: Ciemny)
{
ciało {
kolor-kolor: # 111;
}
}

06. Zastąp pozostałe style

CSS light and dark: override styles

Teraz możesz zastąpić resztę stylów

Teraz, gdy widzimy zapytanie do mediów pracuje, a nasz kolor tła ciała zmienił się, musimy zastąpić wszystkie nasze pozostałe style. 

 .Content-kontener
{
kolor biały;
kolor-kolor: # 212121;
}
.text - Alpha {
kolor: # 50a8d8;
}

07. Udostępnianie

Chociaż właśnie zrobiliśmy prace doskonale do naszego demo i może być utrzymywane na mniejszych stronach internetowych, ta metoda byłaby koszmarem do zarządzania w większym projekcie, z dużą ilością różnych elementów, które wszystkie wymagają nadrzędnej. Dokonujemy również dużego korzystania z kaskady w naszym przykładzie, podczas gdy duży system może wymagać większej specyficzności, aby kierować wszystkie elementy.

08. Weź kolejne podejście

CSS light and dark: another approach

Dla szybkiego i brudnego ciemnego trybu, wystarczy użyć "odwrócić" ...

Jak inaczej możemy rozwiązać problem? Spójrzmy na filtry CSS. Jedną z wartości, których można użyć na filtrach CSS, jest "odwrócić", więc moglibyśmy zastosować to do HTML i odwrócić wszystkie kolory, dając nam "Mroczny tryb". 

 @Media (Prefer-Color-Scheme: Dark) {
html {
Filtr: odwróć (100%);
}
}

09. Dodaj obrazy

CSS light and dark: images

... Oczywiście, twoje zdjęcia będą wyglądać tak

Podczas gdy metoda filtra działa z treścią, którą mamy w naszym dokumencie, nadal nie wygląda świetnie - nasze cień pudełko, na przykład, również odwrócił, co wygląda dość dziwne. Straciliśmy kontrolę nad stylami, która staje się jeszcze większy problem, gdy masz kolorowe tła. Mamy również zupełnie nowy problem do rozważenia, gdy są zaangażowane obrazy. Zobaczmy, co się dzieje, gdy dodajemy obraz do naszej strony.

10. Użyj właściwości niestandardowych

Metody, których do tej pory badaliśmy, albo powodują, że stracimy kontrolę nad stylami lub wymagają dużo konserwacji, aby upewnić się, że wszystko jest aktualizowane w ciemnym trybie. Jest inny sposób, w jaki możemy się do tego zbliżyć: możemy użyć niestandardowych właściwości, aby zdefiniować nasze kolory, a następnie zastąpić je za pomocą zapytania o media.

11. Utwórz właściwości niestandardowe

Aby użyć niestandardowych właściwości, definiujemy je na szczycie naszych CSS wewnątrz " :korzeń ' element. Element korzeniowy ma taki sam zakres jak HTML, więc będzie dostępny na całym świecie. Musimy zdecydować o nazwach zmiennych i zdefiniować ich wartości. 

: Root {
- kolorground-kolor: #ededed;
--Page-background: #fff;
--Text-color: # 212121;
- Kolor-alfa: # C3423F;
}

12. Zastosuj nasze właściwości niestandardowe

Teraz mamy pewne niestandardowe właściwości zdefiniowane, możemy korzystać z nich w naszych CSS. Zaczniemy od ciała i zastosujemy tła i kolory tekstowe. W celu użycia niestandardowej nieruchomości używamy " var (- nazwa własności niestandardowej) "Składnia. 

 Ciało {
kolor-kolor: var (- kolor w tle);
kolor: var (- kolor tekstowy);
}

13. Zastosuj pozostałe właściwości

Korzystając z tej samej metody, możemy również zaktualizować "kolor tła" naszego kontenera i "kolor" naszych " tekst-alfa. "Klasa do korzystania z naszych właściwości niestandardowych. Wszystkie kolory na naszej stronie są teraz kontrolowane za pomocą właściwości niestandardowych. 

 .Content-kontener {
Tło-kolor: var (- strona);
}
.text - Alpha {
kolor: var (- kolor-alfa);
}

14. Ponownie dodaj zapytanie mediów

Teraz możemy ponownie dodać zapytanie multimedialne, ale tym razem możemy zastąpić niestandardowe wartości właściwości, które są w niej. Umieścimy to tuż po pierwotnej definicji głównej, a wewnątrz zapytania o media możemy teraz wybrać nowe wartości dla wszystkich naszych kolorowych właściwości niestandardowych. 

 @Media (Prefer-Color-Scheme: Dark) {
: root {
- kolorground-kolor: # 111;
--Page-tło: # 212121;
--Text-color: #ededed;
- Kolor-alfa: # 50a8d8;
}
}

15. Weź pełną kontrolę

Właściwości niestandardowe dają nam pełną kontrolę, aby wybrać kolory i inne właściwości, których zmieniamy i używamy. Zaktualizujmy cień pudełko na naszym pojemniku na stronie, aby był mniej przezroczysty podczas korzystania z trybu Dark. Aby to zrobić, musimy utworzyć nową własność niestandardową dla cienia strony. 

: Root {
...
--Page-Cień: 0 0 12PX 6PX RGBA
(0,0,0 0.05);
}

16. Zastosuj cień

Teraz stworzyliśmy kolejną nieruchomość niestandardową, musimy zastosować go do właściwego elementu na stronie. Następnie możemy zastąpić wartość wewnątrz naszego elementu korzeniowego w celu zmniejszenia przejrzystości. 

 @Media (Prefer-Color-Scheme: Dark) {
: root {
...
--page-Cień:
0 0 12PX 6PX RGBA (0,0,0,0.33)
;
}
}
.Content-kontener {
...
Box-Shadow: Var (- Page-Shadow);
}

17. Dodaj obraz

CSS light and dark: images

Dodaj obraz i unosić go obok treści

Teraz dodajmy obraz z powrotem do naszej zawartości, a następnie możemy dodać kilka podstawowych stylów, aby płynąć obraz obok treści. 

 img {
Szerokość: 100%;
Wysokość: Auto;
Float: Left;
Max-szerokość: 300px;
margines prawy: 1,618REM;
margines-dno: 1,618REM;
}

Jak widać, ponieważ nie używamy żadnych filtrów, obraz nie jest zmieniany między dwoma motywami.

18. Dodaj więcej komponentów

Teraz mamy nasze niestandardowe właściwości, możemy nadal dodawać elementy do strony i stylizować je z naszymi zmiennymi. Utwórzmy klasę przycisku i dodaj przycisk na naszą stronę. 

 .Button {
Wyświetlacz: inline-flex;
Czcionka: dziedziczyć;
kolor-kolor: var (- kolor-alfa);
kolor: var (- kolor tekstowy);
Wyściółka: 1.618REM 3.236REM;
Granica: 0 Brak;
Promień graniczny: 0,25rem;
Tekst dekoracji: Brak;
}

19. Utwórz przycisk Style Hover

Korzystając z tych samych zmiennych, możemy również utworzyć styl wlewu, który może być używany do obu tematów. Aby to osiągnąć, odwrócimy kolory, gdy użytkownik unosimy się na przycisku i przejść te właściwości, aby doświadczyć mniej wstrząsania. 

 .Button {
...
przejście: kolor tła 150 ms,
kolor 150 ms;
& amp;: hover {
Tło-kolor: var (- kolor tekstowy);
kolor: var (- kolor-alfa);
}
}

20. Wykonuj właściwości niestandardowe

Właściwości niestandardowe mają taki sam zakres jak regularne elementy CSS; Oznacza to, że możemy je zastąpić za pomocą bardziej szczegółowego selektora. Możemy skorzystać z tego i tworzyć kilka zmiennych, które są zasłonione do naszego przycisku. 

 .Button {
- Button-background: var (- kolor-alfa);
- Button-Tekst: Var (- Tło-kolor);
Tło-kolor: var (- tło);
Kolor: Var (- Tekst ");
...
}

21. Wykorzystaj zakres

CSS light and dark: scope

Użyj zakresu, aby utworzyć różne style i interakcje dla przycisku

Możemy wykorzystać ten zakres, aby utworzyć różne style i wświęcić interakcje dla naszego przycisku w tematyckich motywach. Możemy zmienić wartość naszych zmiennych w oparciu o zapytanie multimedialne lub stan elementu, zamiast powtarzać właściwość o nowej wartości, jak zwykle byśmy normalnie. 

 .Button {
...
& amp;: hover {
- Button-tło: # AE3937;
@media (Prefer-Color-Scheme: Dark) {
- Button-tła: # 2E98D1;
- Button-Tekst: Var (- Background-
kolor);
}
}
}

Praca na kompilacji z zespołem? Utrzymuj proces spójny z przyzwoitym magazyn w chmurze .

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

Generuj, nagradzaną konferencję dla projektantów stron internetowych, wraca do NYC 24-25! Zarezerwuj wizytę biletów www.generateconf.com.

Ten artykuł został pierwotnie opublikowany w wydaniu 283 Magazynu kreatywnego projektowania stron internetowych Projektant stron internetowych . Kup problem 283. lub Subskrybuj tutaj projektant stron internetowych .

Powiązane artykuły:

  • Zacznij od CSS Art
  • 12 Świetne zasoby animacji CSS
  • Jakie ramy CSS powinieneś używać?

Jak - Najpopularniejsze artykuły

Jak rysować zwierzęta: 15 najlepszych wskazówek

Jak Sep 11, 2025

(Kredyt obrazu: Aaron Blaise) Uczenie się, jak rysować zwierzęta, jest integralną częścią ilustracji. Od scen ..

Jak przyspieszyć retopologię w Majowie

Jak Sep 11, 2025

(Kredyt obrazu: Antony Ward) Zdolność do wykonywania retopologii w Majowie jest użyteczną umiejętnością. Retop..

Utwórz stronę Lądowania WebGL 3D

Jak Sep 11, 2025

(Kredyt obrazu: przyszłość) Tworzenie strony Landingowej WebGL 3D jest jednym ze sposobów na dobre pierwsze wraż..

Włącz menu za pomocą animacji z CSS

Jak Sep 11, 2025

To dzięki animacji, które mają sens świata: drzwi swingowe otwarte, samochody jeżdżą do ich miejsc, usta zwija się na uś..

Jak rzeźbić w kinie 4d ​​

Jak Sep 11, 2025

Podczas zbliżania się do modelu lub sceny, która wymaga wyrafinowanego modelowania oferowanego przez rzeźbienia, wielu artyst..

Jak zbudować pełnotrawną stronę internetową w kanciasty

Jak Sep 11, 2025

Strona 1 z 4: Strona 1 Strona 1 Strona 2 Strona 3. ..

Dokumentuj swoje systemy projektowe Fraktal

Jak Sep 11, 2025

Czy masz ochotę na więcej nauki na temat systemów projektowych? Więc nie przegap starszego inżyniera UI ..

Odkryj zachęcanie i jak najlepiej wykorzystać

Jak Sep 11, 2025

Nakładanie to A. Technika malarstwa Popularne w renesansie, w którym tworzysz monochromatyczne świadczenie tona..

Kategorie