Задайте любому сайту собственный акцентный цвет
Каждый сайт выбирает акцентный цвет — синий своих ссылок, зелёный своей основной кнопки. Если этот цвет не совпадает с вашим вкусом, вам не обязательно с ним мириться. CSS-правило JustZix может перекрасить весь сайт в ваш любимый оттенок.
Найдите, что переопределять
Акцентный цвет обычно живёт в трёх местах: ссылки, основные кнопки и состояния фокуса/выделения. Современные сайты часто выставляют его как пользовательское CSS-свойство, что делает вашу задачу тривиальной.
:root {
--accent: #e8590c;
--accent-hover: #d9480f;
}Откройте DevTools, осмотрите кнопку и поищите переменную вроде --primary, --brand или --link-color. Если вы её видите, переопределите её напрямую — весь сайт обновится разом.
:root {
--primary: #e8590c !important;
--brand-color: #e8590c !important;
--link: #e8590c !important;
}Когда переменных нет
Множество старых сайтов жёстко прописывают цвета. Тогда вы нацеливаетесь на элементы напрямую. Этот блок покрывает распространённые случаи.
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;
}Перекрасьте фокус и выделение
Не останавливайтесь на ссылках. Подсветка выделения и кольца фокуса тоже несут акцент — их согласование делает результат намеренным, а не залатанным.
::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;
}Перекрасьте SVG-иконки
Наборы иконок часто наследуют цвет текста, так что они обновляются бесплатно. Те, что не обновляются, обычно используют fill или stroke — подметите их одним правилом.
svg, svg path {
fill: currentColor;
}
.icon, [class*="icon-"] {
color: #e8590c !important;
}Практичный рабочий процесс
- Выберите одно значение в hex и переиспользуйте его везде — именно согласованность продаёт внешний вид.
- Сначала проверьте CSS-переменные; переопределить одну строку лучше, чем писать двадцать.
- Держите более тёмный оттенок для состояний наведения, чтобы кнопки всё ещё ощущались интерактивными.
- Проверьте контраст: бледный акцент на белом тексте нечитаем. Стремитесь к соотношению 4,5:1.
Перекраска акцента прекрасно сочетается с тёмной темой — смотрите создание универсальной тёмной темы. За другими готовыми сниппетами загляните в наши готовые примеры, а если вы ещё не установили расширение, скачайте JustZix, чтобы начать.
Оцени эту статью
Оценок пока нет — оцени первым.