Написал скрипт для авто-переключения тёмной и светлой темы на 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);
});
})();
ᅠ ᅠ
Теперь ночью вас не будет слепить белая тема, а днём не будет мешать читать тёмная!
13 комментариев