В настоящее время многие приложения имеют темный режим (dark mode). Ваше консольное приложение, IDE и браузер, вероятно, уже имеют темную тему. Почему бы не добавить эту возможность и вашему веб-сайту? Это можно сделать гораздо проще, чем вы думаете.
Использование CSS для поддержки темной темы
Самый простой способ добавить поддержку темной темы — это использование медиа-запроса prefers-color-scheme. Давайте рассмотрим пример:
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: #ccc;
}
}И вот, ваш сайт переключается на темную сторону. Этот сниппет переопределяет стили для темной темы пользователя.
Поддержка браузерами
Этот подход работает в актуальных версиях большинства современных браузеров, включая:
- Chrome 76 и выше
- Firefox 67 и выше
- Safari 12.1 и выше
- Opera 62 и выше
Подстраховка с помощью JavaScript
Чтобы убедиться, что браузер поддерживает темный режим, можно добавить небольшой JavaScript-код:
if (window.matchMedia('(prefers-color-scheme)').media === 'not all') {
console.log('Браузер не поддерживает dark mode');
}Этот код проверяет, поддерживает ли браузер медиа-запрос prefers-color-scheme.
Заключение
Добавление поддержки темной темы на ваш веб-сайт — это простой и эффективный способ улучшить пользовательский опыт. Используя медиа-запросы и небольшие фрагменты кода, вы можете легко адаптировать внешний вид вашего сайта под предпочтения пользователя.
Пример полного кода
Вот пример полного кода, который включает поддержку темной темы:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Mode Example</title>
<style>
body {
background-color: white;
color: black;
}
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: #ccc;
}
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is an example of dark mode support.</p>
<script>
if (window.matchMedia('(prefers-color-scheme)').media === 'not all') {
console.log('Браузер не поддерживает dark mode');
}
</script>
</body>
</html>Теперь ваш сайт будет автоматически переключаться на темную тему, если браузер пользователя поддерживает этот режим и настроен соответствующим образом.
