sador.me

Witajcie!
Wczoraj, tj 17 maja 2026 roku, stworzyłem specjalne repozytorium SMDesign. Jest to skupisko informacji na temat systemu kolorów występującego we wszystkich moich usługach (tam, gdzie możliwa jest modyfikacja palety kolorów).

Jak to działa?

Pobrałem dominujący kolor z Nextclouda zarówno z jasnego, jak i ciemnego motywu. Był to odpowiednio bardzo jasny odcień żółtego oraz kolor jasnobrązowy. Następnie, za pomocą narzędzia tints.dev wygenerowałem warianty jasności (50-950) od bazowych kolorów, które pobrałem.

Warianty te następnie dopasowałem pod odpowiednie miejsca - tło strony, kolor główny, drugorzędny, oraz inne. W ten sposób stworzyłem unikatowe motywy dla poszczególnych usług, powiązane ze sobą kolorystycznie - wszystkie motywy mają ten sam kolor tła, kolor czcionki i tak dalej.

Gdzie zostały stworzone motywy?

W dniu 17 maja 2026 roku zaimplementowałem 6 motywów - odpowiednio na moich instancjach Forgejo, Immich, Akkoma, Lemmy, PeerTube oraz na mojej stronie internetowej, na której obecnie przebywasz. Moim celem była synchronizacja kolorów obecnych na aplikacjach webowych wszystkich usług. Nie było to proste zadanie, bowiem każda usługa inaczej oznacza kolory używane na stronie, a w niektórych przypadkach powstała konieczność stworzenia własnego motywu za pomocą CSSa.

Forgejo

W przypadku Forgejo sprawa nie była taka prosta. Szczerze mówiąc, tworzenie motywu w tym przypadku było jednym z najbardziej czasochłonnych zadań ze względu na dużą ilość zmiennych do podmiany - wiele wariantów koloru głównego oraz drugorzędnego, dodatkowo warianty półprzezroczyste. Plik .css dla jednego wariantu motywu (jasny lub ciemny) posiada rekordowe 147 linijek. Dodatkowo zaimportowałem podświetlanie składni tekstu z domyślnego motywu Forgejo, co wiąże się z kolejnymi wierszami tekstu. Finalnie jednak udało mi się osiągnąć żądany efekt i jestem zadowolony z rezultatu, zarówno w przypadku jasnego, jak i ciemnego motywu.

Immich

Tutaj również zadanie nie należało do najprostszych, ale było zdecydowanie łatwiej ze względu na to, że web UI Immich używa frameworka Tailwind CSS. Oznacza to, że mogłem poniekąd zaimportować wartości wygenerowane na stronie tints.dev do zmiennych --immich-ui-primary-x ze względu na fakt, że strona ta jest przeznaczona do generowania palet, które mogą być następnie użyte w Tailwindzie bez konieczności ręcznego kopiowania kolorów.

W ten sposób zaimportowałem warianty dla jasnego oraz ciemnego motywu. Podobnie jak w przypadku Forgejo efekt końcowy jest dla mnie zadowalający, istnieje pole do popisu w przypadku ciemnego motywu - można by dokonać poprawek, jednak na to być może przyjdzie czas.

PeerTube

Była to chyba najprostsza podmiana barw. PeerTube wspiera dostosowywanie interfejsu użytkownika bez konieczności tworzenia własnego motywu. Po prostu należało podmienić poszczególne wartości w panelu administratora. Zmiany zaczęły być widoczne natychmiast po zamianie danego koloru HEX, co bardzo ułatwiało proces dostosowywania kolorów.

Napotkałem po drodze jedyny problem, jakim jest niemożność ustawienia osobnej palety kolorów dla ciemnego motywu, wskutek czego w chwili obecnej wygląda on nie najlepiej.

Lemmy

W przypadku Photona, webowego klienta Lemmy, sprawa była równie prosta jak w przypadku PeerTube'a. Photon prosi jedynie o podanie koloru głównego oraz wariantów dla motywu jasnego i ciemnego. Wystarczyło przekopiować wartości wygenerowane przez stronę tints.dev, aby cieszyć się nową paletą kolorów.

Aby motyw był widoczny dla wszystkich użytkowników, również tych niezalogowanych, wyeksportowałem motyw do formatu JSON i umieściłem go w zmiennej środowiskowej PUBLIC_THEME. Od tego momentu jest to domyślny motyw w całej instancji.

Akkoma

Z uwagi na to, że używam Mangane, niestandardowego klienta przeznaczonego głównie pod Akkomę, dostosowanie jej wyglądu było formalnością. Zdecydowałem się na umieszczenie dwóch kolorów w konfiguracji (Mangane pozwala na konfigurację koloru głównego i koloru akcentu, resztę generuje dynamicznie). Dzięki temu zmiana palety barw na całym frontendzie była banalnie prosta, a przez zadeklarowanie kolorów w :pleroma.:frontend_configurations.soapbox_fe są one skonfigurowane deklaratywnie podobnie jak reszta systemu, co pozwala na szybkie przywrócenie wyglądu w przypadku niespodziewanej awarii systemu.

sador.me

Dostosowanie mojej strony było również błahostką ze względu na pewne decyzje podczas tworzenia tej strony od podstaw. Zamiast hardcodowania kolorów zdecydowałem się na użycie zmiennych, np. --primary, --secondary itd, a następnie odwoływać się tylko i wyłącznie do nich w miejscach, gdzie jest to wymagane. W przypadku mojej strony podmieniłem jedynie kolory przypisane do tych zmiennych i wypuściłem commit.

W momencie publikacji tego wpisu wszystkie zmiany są już wdrożone. Jeżeli zaobserwuję możliwość dostosowania wyglądu jakiejkolwiek usługi, którą selfhostuję, z pewnością dostosuję ją do globalnej palety.

To już wszystko w tym wpisie, nieco spontanicznym. Jeśli podobają Ci się moje treści, zachęcam do udostępniania linków do mojej strony internetowej oraz mediów, przede wszystkim PeerTube'a, na którym regularnie pojawiają się nowe odcinki, przede wszystkim na kanale Muzyka organowa.

W najbliższym czasie planuję dodanie obsługi RSS, szczególnie do podstrony z wpisami blogowymi, tak, aby umożliwić łatwą subskrypcję wszystkim zainteresowanym osobom za pomocą wybranej aplikacji służącej do subskrybowania kanałów RSS.

Czytelniku, dziękuję, że dotrwałeś do samego końca! Do usłyszenia wkrótce.