Всё гораздо проще. Современные браузеры понимают вот такую прелесть
Дальше можно пойти вот так.
Как определить тему на устройстве?
Мы в проектах делаем вот так. Определяем тему, и записываем куки.
var toggleSwitch = $('[data-theme="toggle"]');
// Получение значения куки
var currentTheme = Cookies.get('theme');
// Если значение undefined (т.е. пользователь первый раз на сайте или не выбрал явно тему)
if (typeof (currentTheme) === 'undefined') {
// Проверяем тему ос, если она темная, то дописываем значение dark
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
Cookies.set('theme', 'dark');
// Присваиваем значение переменной - dark
currentTheme = 'dark';
}
}
if (currentTheme === 'dark') {
$('html').attr('data-theme', currentTheme);
toggleSwitch.attr('checked', 'checked');
}
Еще несколько
решений 
