M

MLOG

Български

Научете как да използвате CSS за създаване на светли и тъмни теми, които се адаптират към предпочитанията на потребителите, подобрявайки достъпността и визията.

CSS Light-Dark функция: Автоматична адаптация на темата за глобалната мрежа

В днешния глобално свързан свят уебсайтовете трябва да бъдат достъпни и визуално привлекателни за потребители от различен произход и с различни предпочитания. Един от най-ефективните начини за постигане на това е чрез автоматична адаптация на темата, по-специално предлагането на светла и тъмна тема, които се настройват според системните настройки на потребителя. Тази блог публикация ще ви преведе през имплементирането на тази функционалност с помощта на CSS медийни заявки и потребителски свойства, осигурявайки безпроблемно и удобно изживяване при сърфиране за вашата международна аудитория.

Защо да имплементираме автоматични светли и тъмни теми?

Има няколко убедителни причини да включите автоматична адаптация на темата във вашите уеб проекти:

Как да имплементираме автоматична адаптация на темата с CSS

Ядрото на автоматичната адаптация на темата се крие в медийната заявка prefers-color-scheme. Тази CSS медийна заявка ви позволява да откриете предпочитаната от потребителя цветова схема (светла или тъмна) и да приложите съответните стилове.

Стъпка 1: Дефинирайте потребителски свойства (CSS променливи)

Започнете с дефиниране на потребителски свойства (CSS променливи), за да съхранявате цветовите стойности за вашите светли и тъмни теми. Това улеснява превключването между темите, като просто актуализирате стойностите на променливите.


:root {
  --background-color: #ffffff; /* Фон на светла тема */
  --text-color: #000000; /* Текст на светла тема */
  --link-color: #007bff; /* Връзка на светла тема */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212; /* Фон на тъмна тема */
    --text-color: #ffffff; /* Текст на тъмна тема */
    --link-color: #66b3ff; /* Връзка на тъмна тема */
    --button-background-color: #333;
    --button-text-color: #fff;
  }
}

В този пример дефинираме променливи за цвят на фона, цвят на текста, цвят на връзките и цветове на бутоните. Селекторът :root прилага тези променливи към целия документ. След това медийната заявка @media (prefers-color-scheme: dark) презаписва тези променливи със стойности за тъмна тема, когато потребителят е настроил системата си на тъмен режим.

Стъпка 2: Приложете потребителските свойства към вашите стилове

След това приложете тези потребителски свойства към вашите CSS стилове, за да контролирате външния вид на елементите на вашия уебсайт.


body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* Плавен преход */
}

a {
  color: var(--link-color);
}

button {
  background-color: var(--button-background-color);
  color: var(--button-text-color);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

Тук използваме функцията var() за достъп до стойностите на нашите потребителски свойства. Добавили сме и свойството transition към елемента body, за да създадем плавен преход между темите.

Стъпка 3: Тестване и усъвършенстване

Тествайте обстойно вашата имплементация в различни браузъри и операционни системи. Съвременните браузъри като Chrome, Firefox, Safari и Edge напълно поддържат медийната заявка prefers-color-scheme. Можете да превключвате между светъл и тъмен режим в настройките на операционната си система, за да видите промените, отразени във вашия уебсайт.

Напреднали техники и съображения

Осигуряване на ръчен превключвател на теми

Въпреки че автоматичната адаптация на темата е чудесна отправна точка, някои потребители може да предпочетат ръчно да заменят системните си настройки. Можете да предоставите ръчен превключвател на теми, използвайки JavaScript и локално хранилище (local storage).

HTML:


<button id="theme-toggle">Превключи тема</button>

JavaScript:


const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

let currentTheme = localStorage.getItem('theme') || 'auto'; // По подразбиране е 'auto'

function setTheme(theme) {
  if (theme === 'dark') {
    body.classList.add('dark-theme');
    body.classList.remove('light-theme');
  } else if (theme === 'light') {
    body.classList.add('light-theme');
    body.classList.remove('dark-theme');
  } else {
    body.classList.remove('light-theme', 'dark-theme');
  }
  localStorage.setItem('theme', theme);
  currentTheme = theme;
}

// Прилагане на първоначалната тема при зареждане на страницата
if (currentTheme === 'dark') {
  setTheme('dark');
} else if (currentTheme === 'light') {
  setTheme('light');
} else {
  //Ако е зададено на 'auto', позволете на prefers-color-scheme да реши
}


themeToggle.addEventListener('click', () => {
    if (currentTheme === 'auto'){
        setTheme('light');
    } else if (currentTheme === 'light') {
        setTheme('dark');
    } else {
        setTheme('auto');
    }
});

CSS: Добавете следния CSS заедно с предишния. Забележете ръчното презаписване:


body.light-theme {
  --background-color: #ffffff; /* Фон на светла тема */
  --text-color: #000000; /* Текст на светла тема */
  --link-color: #007bff; /* Връзка на светла тема */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

body.dark-theme {
  --background-color: #121212; /* Фон на тъмна тема */
  --text-color: #ffffff; /* Текст на тъмна тема */
  --link-color: #66b3ff; /* Връзка на тъмна тема */
  --button-background-color: #333;
  --button-text-color: #fff;
}

Този фрагмент от код добавя бутон, който позволява на потребителите да превключват между светла, тъмна и автоматична тема. Избраната тема се съхранява в локалното хранилище, така че да се запази при презареждане на страницата.

Обработка на изображения и SVG файлове

Някои изображения и SVG файлове може да не изглеждат добре както в светла, така и в тъмна тема. Можете да използвате CSS медийни заявки, за да показвате условно различни версии на тези ресурси.


img.light-mode {
  display: block;
}

img.dark-mode {
  display: none;
}

@media (prefers-color-scheme: dark) {
  img.light-mode {
    display: none;
  }

  img.dark-mode {
    display: block;
  }
}

Този фрагмент от код показва едно изображение (с клас light-mode) в светъл режим и различно изображение (с клас dark-mode) в тъмен режим.

Съображения за цветовата палитра за международна аудитория

Когато избирате цветови палитри за вашите светли и тъмни теми, имайте предвид културните асоциации и съображенията за достъпност. Ето някои общи насоки:

Съображения за производителността

Въпреки че имплементирането на автоматична адаптация на темата е сравнително лесно, важно е да се вземе предвид потенциалното въздействие върху производителността. Избягвайте използването на прекалено сложни CSS селектори или анимации, които могат да забавят рендирането. Също така, уверете се, че вашите потребителски свойства са дефинирани ефективно, за да се сведе до минимум натоварването от търсенето на променливи.

Ето някои добри практики за оптимизиране на производителността:

Най-добри практики за достъпност

Уверете се, че вашите светли и тъмни теми отговарят на указанията за достъпност, като WCAG (Web Content Accessibility Guidelines). Това включва осигуряване на достатъчен цветови контраст, използване на семантичен HTML и гарантиране, че всички интерактивни елементи са достъпни чрез клавиатура.

Ето някои специфични най-добри практики за достъпност, които да следвате:

Примери от различни региони

Разгледайте тези примери за това как светлите и тъмните теми могат да бъдат пригодени за разнообразна глобална аудитория:

Заключение

Имплементирането на автоматични светли и тъмни теми е решаваща стъпка към създаването на по-достъпно и удобно за потребителя уеб изживяване за глобална аудитория. Като използвате CSS медийни заявки и потребителски свойства, можете лесно да адаптирате външния вид на вашия уебсайт, за да съответства на предпочитанията на потребителите, да намалите напрежението в очите и да подобрите достъпността за потребители със зрителни увреждания. Не забравяйте да вземете предвид културните асоциации, указанията за достъпност и съображенията за производителност, за да осигурите безпроблемно и приобщаващо изживяване при сърфиране за всички.

Прилагайки тези техники, вие демонстрирате ангажираност към съвременните принципи на уеб дизайна и отговаряте на разнообразните нужди на вашата международна аудитория, превръщайки вашия уебсайт в гостоприемно и удобно място за всички.