Ако прекарвате много часове пред екран, със сигурност сте оценили възможността да активирате тъмния режим в приложение или уебсайт повече от веднъж. Не става въпрос само за естетика: добър Тъмният режим може да намали напрежението в очите, помагат с концентрацията и, в някои устройства, дори спестяват батерия.
Добрата новина е, че настройването на тъмен режим на вашия сайт не е голяма работа. С комбинация от CSS променливи, медийни заявки и малко JavaScript (по избор) Можете да създавате гъвкави, достъпни и лесни за поддръжка светли и тъмни теми, без да пренаписвате стиловия си лист от горе до долу.
Какво точно е тъмен режим и защо го използваме?
Когато говорим за тъмен режим или тъмния режим Говорим за цветова схема, в която Фонът става тъмен, а основното съдържание се показва в светли тонове.Това е обратното на класическия дизайн с тъмен текст на бял фон, който е норма в мрежата от години.
Съвременните операционни системи (Windows, macOS, iOS, Android…) позволяват Конфигурирайте глобално предпочитание за светла или тъмна тема.Много потребители активират тъмен режим в среда със слаба светлина, за комфорт или просто от естетически предпочитания. Ако вашият уебсайт уважава този избор, вие му давате значително предимство. потребителско изживяване и достъпност.
Освен това, при OLED и AMOLED дисплеите, черните или почти черните пиксели консумират по-малко енергия, така че Добре проектираният тъмен режим може да помогне за пестене на батериятаособено на мобилни устройства.
Основни принципи на дизайна на тъмния режим
Не става въпрос само за инвертиране на цветовете. За да работи тъмната тема, трябва да се вземат предвид няколко детайла, свързани с дизайна и достъпността, защото лошо реализираният контраст може да бъде също толкова досаден, колкото и прекалено яркият интерфейс.
Контраст и четливост
Първият критичен момент е контрастът между фона и текста. Трябва съдържанието да бъде лесен за четене на тъмен фон, без да причинява отблясъциУказанията на WCAG препоръчват минимално съотношение на страните от 4.5:1 за нормален текст, въпреки че в тъмен режим е много обичайно да се стремят към стойности около 7:1, за да се подобри комфортът.
Типичен пример би бил използването на почти черен фон и светлосив текст, а не чисто бял. Например, нещо подобно цвят на фона: #121212 и цвят: #E0E0E0 Обикновено дава гладък и четлив резултат, като се избягва въздействието на чисто бяло върху изцяло черно.
Избор на палитра и акцентни цветове
В тъмните въпроси е препоръчително Избягвайте силно наситени и крещящи цветовеЗащото на тъмен фон те са склонни да бъдат твърде ярки и бързо напрягат очите. По-добре е да изберете по-меки, леко обезмаслени тонове за бутони, връзки и подчертани елементи.
Препоръчително е също да се избягва абсолютно черно (#000000) и чисто бяло (#FFFFFF). леко повдигнато черно и донякъде приглушено бяло Те правят контраста по-приятен. Например, вместо да използвате чисто бяло за акцент, можете да изберете нещо подобно #BB86FC или меко злато което се откроява, без да е крещящо.
Достъпност и потребителски предпочитания
Проектирането на тъмен режим означава да се вземат предвид потребители с различни зрителни способности. Не е достатъчно той да „изглежда добре“; той трябва да бъде... Подходящо и за хора с намалено зрение или чувствителност към яркостТова включва проверка на контрасти, състояния на фокус, състояния на грешки и интерактивни елементи.
В допълнение към цвета, важно е да се вземат предвид и други предпочитания, като например намаляване на движениетоАко потребителят е посочил предпочитание за по-малко анимации, преходите между темите трябва да бъдат адаптирани, например чрез медийна заявка. предпочита намалено движение за да намалите или премахнете анимациите в тези случаи.
Защо CSS променливите са ключът към тъмния режим
CSS променливите (персонализирани свойства) са идеални за управление на система от теми, защото позволяват Централизирайте всички цветове и стилове, зависими от темата, на едно мястоВместо да повтаряте стойности в целия стилов лист, дефинирате няколко променливи и след това ги използвате повторно с функцията. var().
Обичайно е тези променливи да се декларират в псевдокласа :root, който сочи към елемента <html>Например, можете да дефинирате основни цветове за светлата тема поради това:
:root {
--color-fondo: #ffffff;
--color-texto: #333333;
--color-acento: #007BFF;
}Оттам нататък, останалата част от стиловия лист използва тези персонализирани свойства вместо фиксирани стойности:
body {
background-color: var(--color-fondo);
color: var(--color-texto);
}
a,
button {
color: var(--color-acento);
}Ако решите да промените палитрата или да добавите тъмна тема, ще трябва само преназначете стойностите на тези променливи в друг контекст (класове, атрибути, медийни заявки...), вместо да преглеждате всяко правило едно по едно.
Внедряване на тъмен режим чрез медийни заявки (prefers-color-scheme)
Най-лесният за ползване подход е да се позволи на системата да диктува условията. Медийното запитване prefers-color-scheme позволява ви Автоматично адаптиране на темата към глобалните предпочитания на устройството..
Има два често използвани подхода: дефиниране на отделни версии за светъл и тъмен режим или третиране на светлия режим като режим по подразбиране и презаписването му само когато системата поиска тъмен режим.
Дефиниране на променливи по режим с медийни заявки
Много лесен модел е да се декларират базови променливи и след това да се променят в рамките на специфични медийни заявки:
/* Tema claro por defecto */
:root {
--body-bg: #FFFFFF;
--body-color: #000000;
}
/* Tema oscuro cuando el usuario lo prefiere */
@media (prefers-color-scheme: dark) {
:root {
--body-bg: #000000;
--body-color: #FFFFFF;
}
}В този пример тялото винаги ще използва фон: var(–body-bg) и цвят: var(–body-color)Единственото нещо, което се променя, е стойността на променливите според предпочитанията на системата. Ако в бъдеще към системата бъдат добавени още стойности... prefers-color-schemeВсе още ще имате правилно дефиниран режим на изчистване по подразбиране.
Можете също така да бъдете още по-ясни и да посочите и двата режима:
@media (prefers-color-scheme: light) {
:root {
--body-bg: #FFFFFF;
--body-color: #000000;
}
}
@media (prefers-color-scheme: dark) {
:root {
--body-bg: #000000;
--body-color: #FFFFFF;
}
}Това ще направи вашия сайт Той автоматично се адаптира към светлия или тъмния режим, избран в операционната система., без потребителят да се налага да докосва каквито и да било настройки в уебсайта.
Тъмен режим без JavaScript, използващ :has() и квадратче за отметка
Ако искате да предложите превключване на тема в страницата, но не ви се иска да използвате JavaScript, можете да използвате релационен селектор. :has()Този селектор ви позволява да прилагате стилове към родителски елемент, когато Съдържа дете, което отговаря на определено условие., в този случай отметнато квадратче за отметка.
Идеята е първо да се дефинират светлите цветове като основа:
:root {
--bg-color: #ffffff;
--text-color: #222222;
}
body {
background: var(--bg-color);
color: var(--text-color);
transition: background 0.3s, color 0.3s;
}И тогава се възползвайте :has() За да промените променливите, когато е активирано квадратчето за отметка за тъмен режим:
body:has(#darkmode-toggle:checked) {
--bg-color: #1e1e1e;
--text-color: #f5f5f5;
}В HTML ви е нужен само един квадратче за отметка, което служи като превключвател:
<input type="checkbox" id="darkmode-toggle" />
<label for="darkmode-toggle">Modo oscuro</label>Когато потребителят отметне квадратчето, селекторът body:has(#darkmode-toggle:checked) влиза в действие и променливите се променят на тъмни стойности. Голямото „но“ на този подход е, че предпочитанието не се запазва между страниците или посещенията, защото не се използва място за съхранение или допълнителна логика.
Превключвател на теми с класове, JavaScript и localStorage
Ако търсите по-цялостна система, обичайният подход е да добавите или премахнете клас (или атрибут на данни) в коренния елемент и да управлявате промяната с JavaScript, като същевременно запазвате избора на потребителя.
Дефинирайте променливи според тематичния клас
Първо, дефинирате цветовете на светлината по подразбиране в :root и след това неясен вариант, когато коренният елемент има конкретен клас, като например tema-oscuro:
:root {
--color-fondo: #ffffff;
--color-texto: #000000;
--color-principal: #007bff;
}
:root.tema-oscuro {
--color-fondo: #333333;
--color-texto: #ffffff;
--color-principal: #BB86FC;
}Другите стилове продължават да се използват var(-background-color), var(-text-color) и други променливитака че смяната на предмета е еквивалентна на смяна на клас tema-oscuro en <html> o <body>.
Създайте превключвателя в HTML и го вдъхнете живот с JavaScript.
В маркировката можете да използвате просто квадратче за отметка, бутон или по-сложен превключвател. Един прост пример би бил:
<input type="checkbox" id="interruptor-tema" />
<label for="interruptor-tema">Tema oscuro</label>С JavaScript, вие слушате промяната на switch-а и добавяте или премахвате класа на коренния елемент, в допълнение към запазете предпочитанието в localStorage за да избегнете загубата му по време на сърфиране или презареждане:
// Al cargar la página, aplicamos el tema guardado
if (localStorage.getItem('tema') === 'oscuro') {
document.documentElement.classList.add('tema-oscuro');
document.getElementById('interruptor-tema').checked = true;
}
// Actualizamos cuando el usuario cambia el toggle
document.getElementById('interruptor-tema').addEventListener('change', function () {
if (this.checked) {
document.documentElement.classList.add('tema-oscuro');
localStorage.setItem('tema', 'oscuro');
} else {
document.documentElement.classList.remove('tema-oscuro');
localStorage.setItem('tema', 'claro');
}
});С този подход постигате постоянен, контролиран от потребителя тъмен режим, като същевременно се възползва от CSS променливите, за да се поддържа кодът чист.
Използвайте атрибути на данни или тема на данни като селектор
Вместо клас, можете да използвате и атрибут като data-themeТова е особено удобно, ако работите с рамки или помощни програми като Tailwind CSS, които ви позволяват да конфигурирате варианта. тъмен така че да се активира, когато има селектор от типа вместо медийното запитване.
В нативния CSS моделът би бил много подобен:
:root {
--color-fondo: #FFFFFF;
--color-texto: #333333;
--color-acento: #007BFF;
}
{
--color-fondo: #121212;
--color-texto: #E0E0E0;
--color-acento: #BB86FC;
}Прилагане на атрибута към коренния елемент:
<html lang="es" data-theme="dark">Целият сайт ще премине към използване на тъмни стойности. Ако промените атрибута на light Или го премахнете и ще се върнете към ясната тема. JavaScript кодът за превключване между едното и другото не се променя много в сравнение със случая с класовете: просто извиквате setAttribute('тема-данни', 'тъмно') o „светлина“ в зависимост от избора на потребителя.
Комбинирайте системна тема и ръчен селектор
Много често срещан сценарий е желанието да се подкрепят три щата: светла тема, тъмна тема и „използване на системна тема“За да направите това, можете да комбинирате prefers-color-scheme с класове или атрибути и използвайте window.matchMedia() за да се открие системният режим, когато потребителят избере да следва тази опция.
Общата идея е:
- Ако потребителят изрично избере светло или тъмно, запазвате това предпочитание и го прилагате с клас или атрибут (например, тема на данни="тъмно").
- Ако изберете „система“, не налагате никаква конкретна тема и оставяте медийните заявки да поемат контрола. предпочита-цвят-схема тези, които определят стойностите по подразбиране.
- По желание, можете да слушате за промени в matchMedia('(предпочита цветова схема: тъмна)') да реагира, ако потребителят промени системната тема в движение.
Този модел се съчетава много добре с инструменти като Tailwind, където можете да решите дали вариантът тъмен базира се на prefers-color-scheme или в клас/атрибут и дори да го синхронизирате с предпочитание, съхранено на клиента или сървъра.
Отвъд цвета: типография и елементи на интерфейса
Активирането на тъмния режим не бива да се ограничава само до промяна на четири цвята. Има и други детайли, които си струва да се настроят, за да се направи изживяването наистина комфортно и последователно.
На първо място е препоръчително леко увеличете размера на шрифта и разстоянието между редовете в тъмни теми, защото текстът на тъмен фон е склонен да изглежда по-плътен. Малко увеличение на основния размер или на Онлайн-височина може да има значение.
Добра идея е също да прегледате бутони, връзки, карти и други компоненти на потребителския интерфейс. В тъмен режим можете да използвате меки сенки, фини ръбове или много леки градиенти да се придаде усещане за дълбочина, без да се прибягва до плоски фонове, които карат всичко да изглежда заседнало на едно и също ниво.
Не забравяйте визуалната обратна връзка: състояния задържане на курсора, фокусиране и активно действие Те трябва да останат ясни. В тъмна тема, промяната на цвета или лекото увеличаване на яркостта на акцентния цвят обикновено работи по-добре от прекалено агресивен нюанс.
Инструменти за тестване, достъпност и валидиране
След като сте настроили системата си от теми, е време наистина да я тествате. Само да я виждате в основния си браузър не е достатъчно; важно е. Проверете дали тъмният режим работи добре на различни устройства, браузъри и настройки.
Някои полезни инструменти за тази фаза са Chrome DevTools (опитайте как да наложите тъмен режим в Google Chrome)Firefox или Safari, които включват опции за симулиране предпочита-цвят-схема без да е необходимо да променяте системната си тема. Можете също да използвате Lighthouse за проверка на достъпността и контрастите или услуги за кръстосано тестване като CrossBrowserTesting, за да се провери дали стиловете не са нарушени в по-рядко срещаните браузъри.
В допълнение към техническите тестове, си струва да се съберат обратна връзка от реални потребителиМалки анкети, формуляри в самия сайт или потребителски тестови сесии могат да разкрият проблеми с четимостта, недостатъчен контраст или елементи, които остават незабелязани в тъмен режим.
Внедряването на модерен тъмен режим с CSS променливи ви позволява да спазвате системните предпочитания, да предлагате гъвкав селектор на теми, да поддържате кода чист и да осигурявате достъпност – нещо, което все повече се цени от потребителите и търсачките. Със солидна основа от променливи, добре проектирани медийни заявки и, когато е необходимо, малко JavaScript за постоянство, вашият сайт може безпроблемно да превключва между светли и тъмни теми, без да се превръща в хаотична бъркотия от неподдържани стилове.