← Все статьи

Гайды

Пользовательские полосы прокрутки и высококонтрастные режимы на CSS

17 мая 2026 · автор JustZix Team

Завершающие штрихи пользовательской темы — это части, о которых забывают: полоса прокрутки, контраст, возможность полностью убрать цвет. Это руководство собирает CSS-правила JustZix, которые отполируют сайт до состояния, которым вы искренне наслаждаетесь.

Оформите полосу прокрутки

Стандартная полоса прокрутки может не вязаться с тщательно настроенной тёмной темой. Современные браузеры дают два способа её переоформить. Используйте оба для полного покрытия.

html {
  scrollbar-width: thin;
  scrollbar-color: #4b5263 #1f232a;
}
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: #1f232a;
}
::-webkit-scrollbar-thumb {
  background: #4b5263;
  border-radius: 8px;
  border: 3px solid #1f232a;
}
::-webkit-scrollbar-thumb:hover {
  background: #5c6370;
}

Свойства scrollbar-width и scrollbar-color покрывают Firefox; псевдоэлементы ::-webkit-scrollbar покрывают Chrome, Edge и Opera. Включение обоих означает, что ваше правило выглядит правильно в каждом браузере, поддерживаемом JustZix.

Настоящий высококонтрастный режим

Для людей со слабым зрением, да и просто для чтения в ярко освещённой комнате чистый контраст помогает. Этот рецепт принуждает почти чёрные фоны, почти белый текст и насыщенный акцент.

html, body {
  background: #000 !important;
  color: #fff !important;
}
p, li, span, div, h1, h2, h3, h4, td, th {
  color: #fff !important;
}
a, a:visited {
  color: #ffe066 !important;
  text-decoration: underline !important;
}
button, .btn {
  background: #ffe066 !important;
  color: #000 !important;
  border: 2px solid #fff !important;
}

Жёлтый на чёрном — одно из самых высококонтрастных доступных сочетаний и давний стандарт доступности. Подчёркивание ссылок гарантирует, что их можно отличить, не полагаясь на цвет.

Усильте контраст без перекраски

Если вам нравится палитра сайта, но она кажется блёклой, поднимите контраст фильтром вместо перекраски всего.

html {
  filter: contrast(1.15) brightness(0.97);
}

Это одна строка и обратимо — выключите правило JustZix, и страница вернётся к норме. Держите значения мягкими; всё выше 1,3 начинает съедать детали.

Чёрно-белый и режимы пониженной цветности

Цвет может отвлекать. Чёрно-белое правило убирает его полностью, что отлично для концентрации или для оценки вёрстки без цветового искажения.

html {
  filter: grayscale(1);
}

Предпочитаете оставить изображения цветными, но приглушить интерфейс? Примените grayscale ко всему, затем восстановите медиа.

html {
  filter: grayscale(0.85);
}
img, video, picture, canvas {
  filter: grayscale(0);
}

Уважайте настройки движения

Полноценная тема доступности также успокаивает анимацию. Это правило убивает отвлекающее движение для всех, кто попросил свою систему его уменьшить.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

Собираем всё вместе

• Всегда сочетайте свойства полосы прокрутки Webkit и Firefox, чтобы правило было кроссбраузерным.
• Контраст и grayscale на фильтрах — это однострочники и полностью обратимы — идеально для быстрого переключения.
• Для серьёзной доступности перекрашивайте настоящими цветами, а не фильтрами; подчёркивайте ссылки.
• Сохраните каждый режим как отдельное правило JustZix и включайте то, что подходит моменту.

Это естественно сочетается с универсальной тёмной темой и настройками комфортного чтения. Найдите больше готовых рецептов в наших готовых примерах или скачайте JustZix и начните оформлять веб по-своему.