В настоящее время многие приложения имеют dark mode. Наверняка, у Вашего консольного приложения, IDE, браузера уже есть темная тема. Чем хуже созданный Вами веб-сайт? Тем-более, сайт можно переключить в соответствующий режим при включенной темной теме браузера. И сделать это гораздо проще, чем Вы думаете.

Разберем на примере:

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: #ccc;
  }
}

Вот и все - мы перешли на темную сторону, друзья.

Этот сниппет переопределяет стили для пользовательской темной темы. Такой прием будет работать в актуальных версиях большинства современных браузеров, в том числе:

1. Chrome 76 и выше,
2. Firefox 67 и выше,
3. Safari 12.1 и выше,
4. Opera 62. и выше.

Для того, чтобы подстраховаться, можно дописать JavaSript-код, который будет проверять - поддерживает ли браузер dark mode:

if (window.matchMedia('(prefers-color-scheme)').media === 'not all') {
  console.log('Браузер не поддерживает dark mode');
}

Спасибо за внимание.

Перевод статьи Gábor Soós “Add dark mode to your site with this short CSS trick”.