%2520(1).png)
Czy Twoja firma działa na pełnych obrotach, a mimo to masz wrażenie, że codzienne zadania tylko się piętrzą? Czy Twoi pracownicy spędzają godziny na powtarzalnych czynnościach, zamiast skupić się na działaniach, które naprawdę przynoszą wartość? Czas to zmienić.Wdrożenie automatyzacji i sztucznej inteligencji (AI) może zwiększyć efektywność organizacji nawet o 30%, bez konieczności przeprowadzania kosztownej rewolucji technologicznej. Jak to możliwe? Sprawdź.
Tradycyjny sposób implementacji dark mode w aplikacji Bubble za pomocą wyrażeń warunkowych jest prosty, ale posiada wiele wad. Z artykułu dowiesz się jak bez korzystania z pluginów wdrożyć elastyczny i skalowalny mechanizm zmiany kolorystyki layoutu przez użytkownika aplikacji.
Tradycyjny sposób implementacji dark mode w Bubble
W internecie możesz znaleźć wiele poradników na temat “jak dodać dark mode do aplikacji Bubble”. Większość z nich opiera się na prostej koncepcji dodawania wyrażeń warunkowych (conditionals) do każdego elementu z osobna.
Takie rozwiązanie jest proste do wdrożenia, ale posiada kilka wad, które ujawniają się dopiero w trakcie prac nad aplikacją:
Konieczność edycji pojedynczych elementów
Wyrażenia warunkowe zmieniające kolor elementu w zależności od preferencji użytkownika musisz dodać do każdego pojedynczego obiektu w aplikacji. Przy złożonych projektach oznacza to dodatkowe dziesiątki godzin spędzonych wyłącznie na dodawaniu kolorów do layoutu.
Co prawda część z tych wyrażeń warunkowych można zaimplementować w stylach globalnych, ale edytor pozwala na użycie tylko najprostszych warunków. Można więc sprawdzić, czy pole ‘darkMode’ ma wartość ‘yes’, ale warunkowanie na wartości ‘Display’ z ‘Option Set’ jest już niemożliwe.
Widoczne opóźnienie podczas renderowania zmienionych kolorów
Wyrażenia warunkowe na elementach wyzwalane są dosyć późno podczas ładowania kodu aplikacji. Przy wielu operacjach, które wykonywane są wcześniej (np. podczas eventu Page is loaded) wyraźnie widoczny będzie moment zmiany koloru elementu z domyślnego na ten określony w wyrażeniu warunkowym.
Ograniczona liczba dostępnych zmiennych kolorystycznych
Jeśli korzystasz z rozbudowanych design systemów (np. Material) to limit 32 zmiennych kolorystycznych okaże się zbyt mały do obsłużenia podstawowej palety kolorystycznej, nie wspominając już o dodatkowym dark mode. W rezultacie w wyrażeniach warunkowych będziesz korzystać z literałów, czyli “na sztywno” wprowadzonych wartości kolorystycznych. Takie podejście jest podane na błędy i literówki, mało skalowalne i niepotrzebnie zwiększające objętość kodu aplikacji.
Dark mode i dodatkowe palety kolorów w aplikacjach Bubble
Grupą docelową jednej z budowanych przeze mnie aplikacji są zawodowi developerzy. Projektując jej wygląd chciałem, żeby wrażenia użytkownika były jak najbardziej zbliżone do wzorców UX/UI znanych z najpopularniejszych narzędzi programistycznych. Jedną z funkcji miała być możliwość wyboru palety kolorystycznej interfejsu przez użytkownika.
Jeśli skorzystałbym z opisanego wyżej tradycyjnego podejścia to dodanie nowego schematu barw do aplikacji wymagałoby ode mnie dodania nowych wyrażeń warunkowych do każdego obiektu w aplikacji z osobna.
Żeby nie marnować niepotrzebnie czasu zastosowałem prostą sztuczkę – dynamicznie zmieniam wartości zmiennych kolorystycznych (CSS custom properties / color variables) w zależności od preferencji użytkownika.
Oto kilka zalet tej metody nad tradycyjnym podejściem:
- Możesz dodać dowolną liczbę palet barw do aplikacji i przechowywać je np. jako Option Set. Istnieje tylko jedno ograniczenie – liczba tokenów kolorystycznych w każdej palecie nie może przekroczyć 32, czyli liczby zmiennych dostępnych w edytorze Bubble.
- Jeśli chcesz dodać nową paletę kolorów do aplikacji to nie musisz robić żadnych zmian w istniejącym layoucie. Wystarczy, że dodasz nową opcję do Option Set, a element HTML podmieni wartość zmiennych kolorystycznych w zależności od aktualnego wyboru użytkownika.
- Jeśli element HTML odpowiedzialny za nadpisywanie wartości zmiennych umieścisz na samej górze każdej strony, to kolory będą aktualizowane na bardzo wczesnym etapie ładowania aplikacji. Użytkownik nie będzie widział “mignięcia” domyślnych kolorów.
- Korzystając z tej metody, dark mode (lub więcej dodatkowych palet kolorystycznych) dodasz do już istniejącej i dowolnie rozbudowanej aplikacji. Jest tylko jeden warunek – wszystkie elementy muszą być ostylowane za pomocą natywnych dla Bubble zmiennych kolorystycznych.
- BONUS: nie musisz korzystać z pluginów lub niestandardowego kodu JS i tym samym spowalniać działania swojej aplikacji.
