Написал скрипт для авто-переключения тёмной и светлой темы на Reddit (у них было только ручное)

Написал скрипт для авто-переключения тёмной и светлой темы на Reddit (у них было только ручное)

Другие варианты, типа расширения Dark Reader (у которого авто-переключение есть) – тоже кривовато работают на этом сайте, так что пришлось заморочиться самому.
ᅠ ᅠ
Вот скрипт:

Устанавливать в расширении TamperMonkey для браузеров

(здесь скопировать, там добавить +)

// ==UserScript== // @name Reddit - Automatic Dark Mode (conditional by cookie, live) // @version 2025-04-07 // @author 333hronos + ChatGPT // @description Переключает тёмную тему на Reddit, только если cookie "theme" отличается от системного предпочтения. При изменении темы, когда браузер передаёт событие смены темы скрипту он тоже срабатывает в реальном времени без перезагрузки страницы. // @match *://*.reddit.com/* // @icon https://www.redditstatic.com/shreddit/assets/favicon/64x64.png // @grant none // @license MIT // ==/UserScript== (function(){ 'use strict'; // Функция для получения значения cookie по имени function getCookie(name) { const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)')); return match ? match[2] : null; } // Определяем системное предпочтение: dark или light function getPreferredTheme() { return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; } // Преобразуем системное предпочтение в значение, которое ожидается в cookie: // dark -> "2", light -> "1" function getDesiredCookieValue() { return getPreferredTheme() === 'dark' ? '2' : '1'; } // Функция для переключения темы через открытие меню function switchTheme() { const userDrawerBtn = document.getElementById('expand-user-drawer-button'); if (userDrawerBtn) { userDrawerBtn.click(); // Открываем меню console.log('Меню открыто для переключения темы.'); } // Ждем, чтобы меню успело открыться setTimeout(() => { const darkModeToggle = document.getElementsByName("darkmode-switch-name")[0]; if (darkModeToggle) { // Определяем текущую тему на сайте через атрибут aria-checked: const currentTheme = darkModeToggle.getAttribute("aria-checked") === "true" ? 'dark' : 'light'; if (currentTheme !== getPreferredTheme()) { darkModeToggle.click(); console.log(`Переключено на ${getPreferredTheme()} тему.`); } else { console.log(`Текущая тема (${currentTheme}) уже соответствует системной.`); } } else { console.warn("Переключатель темы не найден."); } // Закрываем меню, если оно было открыто if (userDrawerBtn) { userDrawerBtn.click(); console.log('Меню закрыто.'); } }, 1000); // Задержка 1 секунда для открытия меню } // Функция, которая проверяет cookie и переключает тему, если необходимо function switchThemeIfNeeded() { const currentCookieValue = getCookie('theme'); const desiredCookieValue = getDesiredCookieValue(); console.log(`Cookie theme: ${currentCookieValue}, ожидается: ${desiredCookieValue}`); // Если значение cookie не соответствует системному предпочтению, выполняем переключение if (currentCookieValue !== desiredCookieValue) { switchTheme(); } else { console.log('Тема уже соответствует системному предпочтению – переключение не требуется.'); } } // Первоначальный запуск после задержки (чтобы элементы успели загрузиться) setTimeout(switchThemeIfNeeded, 1000); // Слушаем событие изменения системной темы и в случае наступления запускаем переключение через 500 мс window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { console.log('Обнаружена смена системной темы.'); setTimeout(switchThemeIfNeeded, 500); }); })();

ᅠ ᅠ

Теперь ночью вас не будет слепить белая тема, а днём не будет мешать читать тёмная!

6
2
1
13 комментариев