:root { --black-color: #3d343e; --yellow-color: #f5d23c; --red-color: #df3c2b; --darkred-color: #913019; --orange-color: #eb8b31; --white-color: #d8e0d3; --green-color: darkolivegreen; --ligth-green-color: #50b42c; /* Breakpoints */ --breakpoint-xl: 2500px; --breakpoint-xxl: 3000px; /* Common values */ --border-radius-sm: 4px; --border-radius-md: 8px; --spacing-sm: 0.5em; --spacing-md: 1em; --spacing-lg: 2em; } /* ============= Тёмная тема ============= Класс ставит рубильник в шапке (theme_toggle.js), сохранённый выбор применяется до отрисовки скриптом в . Минимальный вариант: тёмный фон, а серым подсвечиваем только то, что иначе не читается — навигацию слева и названия категорий (у них общий .nav-link) */ html.dark-mode body { background-image: none; background-color: #211d26; color: var(--white-color); } html.dark-mode .nav-link { color: #a0a0a0; } /* Каталог «Фишки»: подписи-ссылки под картинками зашиты чёрным */ html.dark-mode .feature a { color: #a0a0a0; } /* Стилизация скроллбаров */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); border-radius: 4px; } ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.3); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.5); } ::-webkit-scrollbar-button { display: none; /* Убирает стрелки */ width: 0; height: 0; } /* Для Firefox */ * { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1); }