Motywy kolorystyczne Portalu WEBCON – przypadek biznesowy

Dotyczy wersji 2026.1.1.45 i powyżej, autor: Tomasz Błach 

Dokumentacja powiązana 

Szczegółowy opis funkcjonalności wymienionych w niniejszym artykule można znaleźć w następującej sekcji Pomocy WEBCON: 

• Tworzenie i edycja motywów kolorystycznych

Wprowadzenie

Portal WEBCON pozwala dopasować wygląd interfejsu do identyfikacji wizualnej organizacji. Standardowo do wyboru  dostępne są trzy motywy systemowe: WEBCON Light (domyślny), WEBCON Dark oraz WEBCON Contrast Black Yellow – a administrator systemu może następnie na ich podstawie budować własne motywy.

Konfigurator motywów przeszedł w wersji 2026 istotną przebudowę. Zamiast ustawiać kolor każdego elementu interfejsu z osobna, definiujemy cztery kolory bazowe, z których system generuje pełną paletę zmiennych kolorystycznych. Dopiero jeśli to nie wystarcza, sięgamy po paletę niestandardową, a w skrajnych przypadkach – po własny arkusz CSS.

W tym artykule przejdziemy przez kompletny scenariusz: od briefu od klienta, przez zasady projektowe, po gotowy zestaw motywów wdrożony na środowisku produkcyjnym. Przykłady oparte są na fikcyjnej firmie Nordvent S.A.

Wymagane uprawnienia

Tworzenie i edycja motywów wymaga uprawnień Administratora systemu. Nadaje się je w WEBCON Designer Studio, w oknie Uprawnienia globalne (Konfiguracja systemu → Parametry globalne).

Do samego panelu przechodzimy z Portalu: Menu Użytkownika → Administracja.

UWAGA: motywów systemowych nie można edytować, eksportować ani usuwać. Każda modyfikacja zaczyna się więc od klonowania motywu systemowego albo od utworzenia motywu od podstaw.

Przydatne zasady projektowania motywu

Zdecydowana większość nieudanych motywów bierze się nie z braku możliwości konfiguracyjnych, lecz z pominięcia kilku podstawowych zasad.

1. Zacznij od hierarchii, nie od palety. Najpierw ustal tło i kolor tekstu ponieważ one odpowiadają za czytelność 95% powierzchni ekranu. Kolor brandowy dobierasz na końcu, jako akcent.
2. Kolor brandowy nie jest kolorem przycisku. W konfiguratorze pełni rolę punktu odniesienia dla algorytmu generującego odcienie. Może się zdarzyć, że w żadnym miejscu interfejsu nie zobaczysz go w postaci dosłownej co jest poprawnym zachowaniem.
3. Trzymaj kontrast na poziomie WCAG 2.2 AA. Minimum 4,5:1 dla tekstu i 3:1 dla elementów graficznych oraz obramowań. To nie jest wymóg wyłącznie dla instytucji publicznych – to warunek czytelności formularza na laptopie w słoneczny dzień.
4. Nie podporządkowuj brandingowi kolorów statusu. Sukces, ostrzeżenie i błąd niosą znaczenie. Firmowa czerwień jako kolor statusu „Sukces” jest pomysłem, który wróci do Ciebie w zgłoszeniu serwisowym.
5. Oszczędzaj akcenty. Jeśli wyróżnisz liczniki zadań, kolory raportów, elementy wyróżnione i fokus jednym intensywnym kolorem, użytkownik przestanie odróżniać ważne od nieważnego.
6. Projektuj parami. Motyw jasny i ciemny twórz w jednym podejściu, na tych samych założeniach. Ciemny motyw nie jest jasnym z odwróconymi kolorami – kolor brandowy, który świetnie wygląda na bieli, na grafitowym tle często wymaga rozjaśnienia.
7. Testuj na prawdziwej treści. Podgląd w konfiguratorze pokazuje wyłącznie podstawowe komponenty. Zanim ustawisz motyw jako domyślny, otwórz na nim raport z kilkuset wierszami, dashboard z widżetami i najbardziej rozbudowany formularz w systemie.
8. Dokumentuj i wersjonuj. Wypełniaj opis motywu – jest niewidoczny dla użytkownika i służy właśnie do tego. Gotowy motyw eksportuj do pliku .json i trzymaj w repozytorium konfiguracji razem z resztą wdrożenia.

Przypadek biznesowy: Nordvent S.A.

W artykule wdrażamy motyw kolorystyczny fikcyjnej firmy Nordvent S.A., producenta systemów wentylacyjnych. Księga znaku firmy definiuje:

Wymagania zgłoszone przez klienta:

• motyw jasny w barwach firmowych, ustawiony jako domyślny;
• motyw ciemny jako opcja do wyboru przez użytkownika;
• osobny motyw dla raportów osadzanych w intranecie SharePoint, którego tło zlewa się ze stroną intranetu;
• zachowanie zgodności z WCAG 2.2 AA – firma realizuje kontrakty publiczne;
• wizualne odróżnienie środowiska testowego od produkcyjnego.

Klonowanie motywu bazowego

Zaczynamy od sklonowania motywu WEBCON Light (kolumna Akcje → Klonuj). Klonowanie jest niemal zawsze lepszym punktem startu niż Nowy motyw: dostajemy komplet parametrów już wypełnionych spójnymi wartościami i zmieniamy tylko to, co wymaga zmiany.

Nowy motyw nazywamy Nordvent Light. Nazwa podlega walidacji: musi zaczynać się od litery, a dozwolone znaki to małe i wielkie litery, cyfry oraz _, :, - i .. System nie dopuszcza też dwóch motywów o identycznej nazwie – przy duplikacie automatycznie dopisze sufiks, np. „(2)”.

Parametry motywu

Cztery ustawienia decydują o tym, jak motyw funkcjonuje w systemie.

Typ motywu – Jasny, Ciemny lub Kontrastowy. Parametr nie jest etykietą opisową: określa, w którą stronę system koryguje odcienie elementów graficznych. Dla typu jasnego kolory aplikacji są rozjaśniane, dla ciemnego – przyciemniane, tak aby zachować kontrast. Typ kontrastowy całkowicie wygasza kolory interfejsu. Dla motywu Nordvent Light wybieramy Jasny.

Aktywny – motyw pojawia się na liście wyboru w profilu użytkownika. Jeżeli administrator dezaktywuje motyw, z którego ktoś już korzystał, system automatycznie przełączy tego użytkownika na motyw domyślny.

Domyślny – motyw stosowany przy pierwszym logowaniu użytkownika oraz po dezaktywacji lub usunięciu motywu używanego wcześniej. Ten parametr ma jednak mniej oczywistą konsekwencję, o której warto wiedzieć: kolory motywu domyślnego są wykorzystywane wszędzie tam, gdzie system musi zastosować kolorystykę Portalu bez kontekstu użytkownika – na przykład w masowych powiadomieniach mailowych. Jeżeli logo motywu domyślnego zapiszesz w formacie .svg, nie wyświetli się ono w części klientów pocztowych.

Domyślny dla elementów osadzonych – motyw stosowany przy renderowaniu elementów osadzanych (embed), o ile w konfiguracji osadzania nie wskazano innego. To właśnie ten parametr wykorzystamy dla wymagania SharePointowego.

Dla motywu Nordvent Light zaznaczamy Aktywny i Domyślny.

Kolory bazowe i paleta niestandardowa

Definiujemy cztery kolory, a system generuje na ich podstawie pełną paletę zmiennych używanych w interfejsie.

Dopuszczalny jest wyłącznie zapis HEX (np. #0B5E8A). Wcześniejsze wersje przyjmowały także RGB i HSL – jeśli przenosisz dokumentację lub skrypty ze starszego wdrożenia, warto to sprawdzić.

Kiedy sięgnąć po paletę niestandardową

Algorytm generujący odcienie sprawdza się dla większości kolorów firmowych, ale ma swoje granice. Typowe sytuacje, w których wygenerowana paleta nie zadowoli klienta:

• Kolor brandowy jest bardzo ciemny lub bardzo nasycony. Odcienie pochodne zbliżają się wtedy do siebie i elementy interfejsu tracą wzajemną rozróżnialność.
• Księga znaku definiuje własne odcienie pomocnicze, których algorytm nie odtworzy, bo nie leżą na tej samej ścieżce jasności.
• Motyw ciemny wymaga innej relacji odcieni niż jasny – ten sam kolor brandowy potrzebuje na grafitowym tle wyraźnego rozjaśnienia.

W przypadku Nordvent zachodzi pierwsza sytuacja: #0B5E8A jest na tyle ciemny, że najjaśniejsze odcienie palety wypadają zbyt blado dla tła aktywnych zakładek. Zaznaczamy więc opcję Zdefiniuj paletę niestandardową i ręcznie korygujemy wybrane odcienie.

Po włączeniu przełącznika pojawia się pełna drabinka osiemnastu odcieni, oznaczonych od Odcień 100 do Odcień 1800. Numeracja rośnie wraz z jasnością: 100 to odcień najciemniejszy, 1800 – najjaśniejszy. Kluczowa obserwacja: kolor brandowy trafia na pozycję Odcień 900, mniej więcej w środku drabinki. Odcienie 100–800 to jego przyciemnienia, 1000–1800 – rozjaśnienia.

Ma to praktyczną konsekwencję przy doborze koloru brandowego. Jeśli wybierzesz kolor bardzo ciemny, algorytm ma mało miejsca na osiem przyciemnień poniżej i dolne odcienie zlewają się w czerń; kolor bardzo jasny daje ten sam problem po drugiej stronie. Najlepiej sprawdzają się kolory o średniej jasności – i to niezależnie od tego, czy budujesz motyw jasny, czy ciemny.

Zasada jest tu jedna: poprawiaj pojedyncze odcienie, nie przepisuj całej drabinki. Sensem tego mechanizmu jest korekta wyjątków, a nie obejście algorytmu. W przypadku Nordvent korygujemy wyłącznie odcienie 1500–1700, odpowiadające za tła aktywnych zakładek.

Logo i grafika

Trzy zasoby graficzne, każdy o innym przeznaczeniu:

Rekomendowany format logo to .png. Formatu .svg nie obsługują klienci pocztowi – jeżeli motyw jest lub może zostać ustawiony jako domyślny, jego logo trafi także do powiadomień mailowych i .svg nie wyświetli się poprawnie.

Pliki wczytujemy z dysku albo podajemy link. Rozmiary inne niż zalecane zostaną automatycznie przeskalowane z zachowaniem proporcji – większy plik przy zachowanych proporcjach bywa uzasadniony przy monitorach o wysokiej rozdzielczości.

Tło pod logo jest domyślnie generowane z koloru tła, ale można je nadpisać lub przygotować wariant ciemny pliku z wtopionym tłem.

Dodatkowe parametry

Ustawienia w tej sekcji są często pomijane co później skutkuje w zgłoszeniach o nieczytelnym interfejsie.

Fokus

Sekcja zawiera dwa pola: Szerokość (przełącznik 1px / 2px) oraz Kolor. Określają one wygląd wyróżnienia elementu interfejsu, gdy jest aktywny lub zaznaczony – pola formularzy, przycisków, kontrolek. Domyślna szerokość to 1 px; 2 px zauważalnie poprawia widoczność i jest wartością wartą rozważenia wszędzie tam, gdzie liczy się dostępność. Nordvent realizuje kontrakty publiczne, więc ustawiamy 2 px w kolorze o kontraście co najmniej 3:1 względem tła.

Kolor wizualizacji danych

Sekcja pozwala ustawić trzy obszary:

• Główny kolor raportu – kolor bazowy danych na raportach graficznych, raportach kalendarzowych i widżetach. Jest to ustawienie globalne, możliwe do nadpisania w konfiguracji pojedynczego raportu.
• Alternatywny kolor raportu – druga seria danych.
• Kolor elementów wyróżnionych – zaznaczenie dashboardu w trybie edycji, aktywna ikona Ulubione, wskaźnik aktywnego zastępstwa.

Dobierając parę kolorów raportowych, sprawdź je pod kątem rozróżnialności przy zaburzeniach widzenia barw. Zestaw błękit–pomarańcz (#0B5E8A / #F5A623) sprawdza się tu lepiej niż popularne zestawienie zieleń–czerwień, a w przypadku Nordvent dodatkowo wynika wprost z księgi znaku.

Kolor tła licznika

Osobne kolory dla liczników zadań nowych, aktywnych i zaległych. Trzy liczniki stoją obok siebie na stronie głównej, więc muszą różnić się nie tylko odcieniem, ale i jasnością – to jedyny sposób, by pozostały rozróżnialne w skali szarości.

Kolor informujący o stanie

Sukces, Ostrzeżenie, Błąd. Wracamy tu do zasady czwartej: te kolory komunikują znaczenie i powinny pozostać konwencjonalne, nawet jeśli kłócą się z paletą firmową. Nordvent chciał początkowo ustawić firmowy pomarańcz jako kolor sukcesu – zamiast tego wykorzystaliśmy go jako kolor ostrzeżenia, gdzie pasuje i znaczeniowo, i wizualnie.

Podgląd i weryfikacja

Po prawej stronie okna edycji działa podgląd w czasie rzeczywistym. Prezentuje stały zestaw komponentów: nagłówek, pole tekstowe, odsyłacz, grupę pól wyboru, przełącznik, cztery warianty przycisków (główny, dodatkowy, nieaktywny oraz element wyróżniony) i trzy komunikaty – sukcesu, ostrzeżenia i błędu.

Ten dobór nie jest przypadkowy: pokazuje dokładnie te elementy, w których najłatwiej o błąd kontrastu. Jeżeli w podglądzie nieaktywny przycisk zlewa się z tłem albo tekst na przycisku głównym jest trudny do odczytania, nie ma sensu iść dalej. Podgląd nie jest jednak odbiorem końcowym ponieważ motyw zostanie zastosowany do całego systemu, a podgląd obejmuje tylko te komponenty. Na wąskich ekranach nie jest dostępny.

Przed ustawieniem motywu jako domyślnego warto przejść ścieżkę weryfikacyjną na rzeczywistych danych:

1. raport tabelaryczny z kilkuset wierszami – naprzemienne tła wierszy, nagłówki, filtry;
2. dashboard z widżetami i wykresami – kolory raportowe w praktyce;
3. najbardziej rozbudowany formularz – pola tylko do odczytu, pola wymagane, walidacje;
4. strona główna – trzy liczniki zadań obok siebie;
5. widok mobilny – logo kompaktowe i zwinięta nawigacja;
6. powiadomienie mailowe – jeżeli motyw ma być domyślny.

Nietypowe konfiguracje

Konfigurator celowo nie wspiera motywów o kolorach trwale przypisanych do identyfikacji wizualnej marki. Algorytm zawsze koryguje odcienie tak, by zachować kontrast i widoczność elementów – co jest zaletą, dopóki dział marketingu nie zażąda konkretnej wartości HEX w konkretnym miejscu interfejsu.

W takiej sytuacji rozwiązaniem jest pole Niestandardowe style CSS, znajdujące się na samym dole konfiguratora, pod sekcją konfiguracji i podglądem. Jest to edytor kodu z numeracją wierszy, a wpisane w nim reguły są dołączane do witryny Portalu w momencie wybrania danego motywu przez użytkownika.

Przykładowo można dodać pasek informujący że użytkownik znajduje się na środowisku testowym:

body { --env-bar-h: 28px; }

body::before {
  content: "ŚRODOWISKO TESTOWE – dane nie są przetwarzane produkcyjnie";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--env-bar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F5A623;
  color: #1C1C1C;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .02em;
  z-index: 10000;
}

#wrapper {
  margin-top: var(--env-bar-h);
  height: calc(100vh - var(--env-bar-h));
}

#wrapper > nav.navigation {
  top: var(--env-bar-h);
  bottom: 0;
  height: auto;
}

W taki sposób prezentuje się to w Portalu:

UWAGA: CSS jest przypisany do motywu, a nie do środowiska – to zasadnicza różnica względem globalnego CSS konfigurowanego w Designer Studio. Użytkownik przełączający się na inny motyw przestaje podlegać tym regułom.

Efekt końcowy

Zestaw motywów przygotowany dla Nordvent to:

Nordvent Light

Nordvent Dark

Oba motywy dzielą tę samą logikę: identyczny kolor brandowy jako punkt wyjścia, identyczna para kolorów raportowych, identyczne kolory statusów. Różnią się kolorem tła, kolorem tekstu i skorygowaną paletą niestandardową – i to wystarcza, by użytkownik przełączający się między nimi nie musiał uczyć się interfejsu od nowa.

Podsumowanie

Konfigurator motywów kolorystycznych w wersji 2026 przeniósł punkt ciężkości z kolorowania pojedynczych elementów na definiowanie spójnego systemu kolorów. W praktyce oznacza to, że dobrze zaprojektowany motyw firmowy powstaje w kilkanaście minut, a większość pracy przypada na etapy przed i po samej konfiguracji: ustalenie założeń z klientem oraz weryfikację efektu na rzeczywistych danych.