Dark Mode w 90% automatyczny

Wstęp

Cześć! W tym artykule chciałbym podzielić się z Tobą czymś naprawdę fajnym. Wchodzimy w ciemność, aby zgłębić mój autorski system Dark Mode, zaimplementowany przy użyciu SCSS!

Dark Mode, czyli tryb ciemny, staje się coraz bardziej popularny i jest on mile widziany przez użytkowników, szczególnie przez nocnych marków. Systemem tym umożliwiamy użytkownikom przełączanie się na ciemny schemat kolorów, który zmniejsza emisję światła z ekranów, szczególnie w środowiskach o niskim oświetleniu. A poza tym wygląda po prostu świetnie!

O moim podejściu

Postanowiłem stworzyć własny system, który opiera się na zmiennych CSS które następnie są wykorzystywane przez zmienne SCSS. Dodatkowo w SCSS można stworzyć użyteczny @mixin, dzięki któremu w łatwy sposób możemy manualnie zmienić kolor dla określonego trybu kolorystycznego.

Dzięki mojemu podejściu zmiana kolorów jest w 90% przypadkach automatyczna, co oszczędza sporo czasu, który byłby poświęcony na przystosowywanie każdego elementu strony pod osobny schemat kolorystyczny.

Warstwy

W mojej metodzie, wykorzystuję liczby do nazewnictwa, które reprezentują stopień jasności koloru. W centrum znajduje się kolor szary. W przedstawionym przykładzie, jeśli coś ma "Background 3", oznacza to, że wizualnie jest "najbliżej ekranu".

Dlaczego w taki sposób? Uważam, że ułatwia to przyszłe modyfikacje i jest dosyć intuicyjne. Skoro zaczynamy liczyć od jedynki, to warto nadać jej najbardziej skrajny kolor, a kolejne cyfry to jest już zabawa na skali odcieni szarości.

Używając liczb w nazewnictwie, tworzę hierarchię, która odzwierciedla jasność kolorów i kontroluje głębię. To jak myślenie o różnych warstwach. Bez względu na schemat kolorów chcemy, aby elementy zajmowały te same pozycje. Na przykład:

Poziom 1 - tło strony
Poziom 2 - karty, okna modalne, nawigacja
Poziom 3 - placeholdery, paski przewijania, nieaktywne przyciski

Można definiować to na wiele sposobów i tworzyć własne systemy, zmieniając ilość poziomów. Obecny przykład uważam jako dobry punkt startowy, który można dostosować do własnych potrzeb.

Ograniczenia

Rozwiązanie które Ci przedstawiam, niesie również pewne koszty. Zmienne SCSS, które korzystają z zmiennych CSS, nie mogą być stosowane w niektórych funkcjach Sass, takich jak lighten() czy darken().

Z tego powodu każdy "poziom" rozszerzam o sufiksy, takie jak -dark czy -light, które nieznacznie modyfikują kolor, na przykład w przypadku stanu hover.

Istnieje także kwestia różnicy kontrastów między jasnym a ciemnym trybem, którą warto uwzględnić podczas procesu projektowania. Wyobraźmy sobie przycisk w Dark Mode, który po najechaniu myszą robi się jaśniejszy. Dzięki temu zwiększamy kontrast między przyciskiem a tłem. W przypadku Light Mode, gdy przycisk będzie jaśniejszy, jego kontrast zmniejszy się.

Z tej sytuacji są dwa wyjścia.

Ręczne dostosowanie koloru dla konkretnego trybu przy użyciu mixinów.
Zamiana wartości kolorów -dark na wartości -light i odwrotnie w zmiennych, co zapewni jednolitą zależność między systemami pod względem większego lub mniejszego kontrastu.

W przypadku drugiego rozwiązania, sugeruję zmienić nazewnictwo z -dark i -light na inny sposób oznaczania, np. -less-contrast i -more-contrast.

Podsumowanie

System ten, pomimo swoich wad spowodowanych naturą zmiennych CSS, pozwala na niemalże całkowite zautomatyzowanie schematów kolorystycznych, o ile zostanie odpowiednio zaprojektowany i konsekwentnie stosowany w praktyce.

dark modetryb ciemnyCSSSCSSschemat kolorówsystem kolorów