Nadaj dowolnej stronie własny kolor akcentu
Każda strona wybiera kolor akcentu — błękit swoich linków, zieleń głównego przycisku. Jeśli ten kolor kłóci się z twoim gustem, nie musisz z nim żyć. Reguła CSS JustZix może przemalować całą stronę na twój ulubiony odcień.
Znajdź, co nadpisać
Kolor akcentu zwykle żyje w trzech miejscach: linki, główne przyciski oraz stany fokusu/zaznaczenia. Nowoczesne strony często udostępniają go jako niestandardową właściwość CSS, co czyni twoje zadanie trywialnym.
:root {
--accent: #e8590c;
--accent-hover: #d9480f;
}Otwórz DevTools, sprawdź przycisk i poszukaj zmiennej typu --primary, --brand lub --link-color. Jeśli ją zobaczysz, nadpisz ją bezpośrednio — cała strona zaktualizuje się naraz.
:root {
--primary: #e8590c !important;
--brand-color: #e8590c !important;
--link: #e8590c !important;
}Gdy nie ma zmiennych
Sporo starszych stron koduje kolory na sztywno. Wtedy namierzasz elementy bezpośrednio. Ten blok obejmuje typowe przypadki.
a, a:visited {
color: #e8590c !important;
}
a:hover {
color: #d9480f !important;
}
button, .btn, .button,
input[type="submit"], [role="button"] {
background-color: #e8590c !important;
border-color: #e8590c !important;
color: #fff !important;
}Przekoloruj fokus i zaznaczenie
Nie zatrzymuj się na linkach. Podświetlenie zaznaczenia i obwódki fokusu też niosą akcent — dopasowanie ich sprawia, że efekt wydaje się zamierzony, a nie załatany.
::selection {
background: #e8590c;
color: #fff;
}
:focus-visible {
outline: 2px solid #e8590c !important;
outline-offset: 2px;
}
input:focus, textarea:focus, select:focus {
border-color: #e8590c !important;
box-shadow: 0 0 0 3px rgba(232, 89, 12, 0.25) !important;
}Przekoloruj ikony SVG
Zestawy ikon często dziedziczą kolor tekstu, więc aktualizują się za darmo. Te, które tego nie robią, zwykle używają fill lub stroke — zgarnij je jedną regułą.
svg, svg path {
fill: currentColor;
}
.icon, [class*="icon-"] {
color: #e8590c !important;
}Praktyczny przepływ pracy
- Wybierz jedną wartość hex i używaj jej wszędzie — spójność jest tym, co sprzedaje wygląd.
- Sprawdź najpierw zmienne CSS; nadpisanie jednej linii bije pisanie dwudziestu.
- Trzymaj ciemniejszy odcień dla stanów hover, aby przyciski nadal wydawały się interaktywne.
- Zweryfikuj kontrast: blady akcent na białym tekście jest nieczytelny. Celuj w stosunek 4,5:1.
Przekolorowanie akcentu pięknie współgra z ciemnym motywem — zobacz budowanie uniwersalnego trybu ciemnego. Po więcej gotowych fragmentów odwiedź nasze gotowe przykłady, a jeśli jeszcze nie zainstalowałeś rozszerzenia, pobierz JustZix, aby zacząć.
Oceń ten wpis
Brak ocen — oceń jako pierwszy.