WordPress: Как включить темный режим без плагинов?

/* Базовые (светлые) стили */
body {
  background-color: #ffffff;
  color: #333333;
  transition: background-color 0.3s ease, color 0.3s ease;
}

a {
  color: #0073aa;
}

/* Стили для темного режима */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #1e1e1e;
    color: #e0e0e0;
  }

  a {
    color: #90caf9;
  }

  /* Переопределение других элементов */
  .site-header {
    background-color: #2c2c2c;
    border-bottom-color: #444444;
  }

  input[type="text"],
  input[type="email"],
  textarea {
      background-color: #333;
      color: #eee;
      border-color: #555;
  }
}

:root {
  --background-color: #ffffff;
  --text-color: #333333;
  --link-color: #0073aa;
  /* ... другие переменные */
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #1e1e1e;
    --text-color: #e0e0e0;
    --link-color: #90caf9;
    /* ... переопределение переменных для темного режима */
  }
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

a {
  color: var(--link-color);
}

  ☀️
  🌙

/**
 * Переключает тему между светлой и темной и сохраняет выбор.
 */
function toggleTheme(): void {
    const body: HTMLElement = document.body;
    const currentTheme: string | null = localStorage.getItem('theme');
    const newTheme: string = (currentTheme === 'dark') ? 'light' : 'dark';

    body.classList.remove(currentTheme === 'dark' ? 'dark-mode' : 'light-mode');
    body.classList.add(newTheme === 'dark' ? 'dark-mode' : 'light-mode');
    localStorage.setItem('theme', newTheme);
    updateToggleButton(newTheme);
}

/**
 * Обновляет вид кнопки переключения темы.
 * @param {string} theme - Текущая тема ('light' или 'dark').
 */
function updateToggleButton(theme: string): void {
    const toggleButton = document.getElementById('theme-toggle');
    if (!toggleButton) return;

    const lightIcon = toggleButton.querySelector('.icon-light') as HTMLElement;
    const darkIcon = toggleButton.querySelector('.icon-dark') as HTMLElement;

    if (lightIcon && darkIcon) {
        lightIcon.style.display = (theme === 'dark') ? 'none' : 'inline';
        darkIcon.style.display = (theme === 'dark') ? 'inline' : 'none';
    }
    toggleButton.setAttribute('aria-label', `Переключить на ${theme === 'dark' ? 'светлую' : 'темную'} тему`);
}

/**
 * Применяет сохраненную тему при загрузке страницы.
 */
function applyInitialTheme(): void {
    const savedTheme: string | null = localStorage.getItem('theme');
    // Проверяем также системные предпочтения как fallback
    const prefersDark: boolean = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
    const initialTheme: string = savedTheme || (prefersDark ? 'dark' : 'light');

    document.body.classList.add(initialTheme === 'dark' ? 'dark-mode' : 'light-mode');
    localStorage.setItem('theme', initialTheme); // Сохраняем, если не было сохранено
    updateToggleButton(initialTheme);
}

// Инициализация при загрузке DOM
document.addEventListener('DOMContentLoaded', () => {
    applyInitialTheme();

    const themeToggleButton = document.getElementById('theme-toggle');
    if (themeToggleButton) {
        themeToggleButton.addEventListener('click', toggleTheme);
    }
});

/* Базовые (светлые) стили - можно использовать :root или body.light-mode */
body {
    /* ... стили по умолчанию ... */
}

/* Стили для темного режима, активируемые классом */
body.dark-mode {
    background-color: #1e1e1e;
    color: #e0e0e0;
}

body.dark-mode a {
    color: #90caf9;
}

/* ... другие стили для .dark-mode ... */

/* Можно совмещать с prefers-color-scheme для начальной установки */
@media (prefers-color-scheme: dark) {
  /* Начальные стили, если JS отключен или еще не отработал */
  body:not(.light-mode) {
      /* Применяем темные стили, если нет явного класса light-mode */
      background-color: #1e1e1e;
      color: #e0e0e0;
  }
   body:not(.light-mode) a {
      color: #90caf9;
   }
   /* ... */
}

get('Version') // Версия файла
    );

    // Подключение JavaScript для переключателя
    wp_enqueue_script(
        'my-theme-dark-mode-toggle',
        get_template_directory_uri() . '/js/dark-mode-toggle.js', // Путь к вашему JS файлу
        [], // Зависимости
        wp_get_theme()->get('Version'),
        true // В подвал
    );
}
add_action('wp_enqueue_scripts', 'my_theme_dark_mode_scripts');

/**
 * Добавляет класс к body в зависимости от куки (если используется серверный подход).
 *
 * @param array $classes Массив классов body.
 * @return array Обновленный массив классов body.
 */
function my_theme_body_classes(array $classes): array {
    // Пример: проверка куки 'theme', установленной через JS или PHP
    if (isset($_COOKIE['theme']) && $_COOKIE['theme'] === 'dark') {
        $classes[] = 'dark-mode';
    } else {
        // Можно добавить класс 'light-mode' по умолчанию
        $classes[] = 'light-mode';
    }
    // Можно добавить класс для поддержки prefers-color-scheme без JS
    $classes[] = 'supports-color-scheme';
    return $classes;
}
add_filter('body_class', 'my_theme_body_classes');

?>

add_section('dark_mode_section', [
        'title'    => __('Темный режим', 'my-theme'),
        'priority' => 160,
    ]);

    // Настройка: включить/выключить переключатель темы
    $wp_customize->add_setting('dark_mode_toggle_enabled', [
        'default'           => true,
        'sanitize_callback' => 'wp_validate_boolean',
    ]);

    $wp_customize->add_control('dark_mode_toggle_enabled_control', [
        'label'    => __('Включить переключатель темного режима', 'my-theme'),
        'section'  => 'dark_mode_section',
        'settings' => 'dark_mode_toggle_enabled',
        'type'     => 'checkbox',
    ]);

    // Настройка: основной цвет фона в темном режиме
    $wp_customize->add_setting('dark_mode_background_color', [
        'default'           => '#1e1e1e',
        'sanitize_callback' => 'sanitize_hex_color',
        'transport'         => 'postMessage', // Для мгновенного предпросмотра с JS
    ]);

    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'dark_mode_background_color_control', [
        'label'    => __('Фон темного режима', 'my-theme'),
        'section'  => 'dark_mode_section',
        'settings' => 'dark_mode_background_color',
    ]));

     // Настройка: основной цвет текста в темном режиме
    $wp_customize->add_setting('dark_mode_text_color', [
        'default'           => '#e0e0e0',
        'sanitize_callback' => 'sanitize_hex_color',
        'transport'         => 'postMessage',
    ]);

    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'dark_mode_text_color_control', [
        'label'    => __('Текст темного режима', 'my-theme'),
        'section'  => 'dark_mode_section',
        'settings' => 'dark_mode_text_color',
    ]));
}
add_action('customize_register', 'my_theme_customize_register');

/**
 * Выводит CSS из настроек Customizer.
 */
function my_theme_dark_mode_customizer_css(): void {
    $toggle_enabled = get_theme_mod('dark_mode_toggle_enabled', true);
    // Если переключатель отключен, возможно, не нужно выводить стили или JS
    if (!$toggle_enabled) {
        // Можно скрыть кнопку или не подключать JS
    }

    $dark_bg = get_theme_mod('dark_mode_background_color', '#1e1e1e');
    $dark_text = get_theme_mod('dark_mode_text_color', '#e0e0e0');

    // Генерация CSS на основе настроек
    $css = ":root {\n"; // Если используете CSS переменные
    // Можно проверять валидность цвета перед выводом
    if ($dark_bg && $dark_text) {
       $css .= "    --dark-mode-bg: {$dark_bg};\n";
       $css .= "    --dark-mode-text: {$dark_text};\n";
    }
    $css .= "}\n";

    $css .= "body.dark-mode { \n";
    if ($dark_bg) $css .= "    background-color: var(--dark-mode-bg, {$dark_bg});\n";
    if ($dark_text) $css .= "    color: var(--dark-mode-text, {$dark_text});\n";
    $css .= "}\n";

    // Добавляем сгенерированный CSS в 
    wp_add_inline_style('my-theme-dark-mode', $css); // 'my-theme-dark-mode' - хэндл основного файла стилей темного режима
}
add_action('wp_enqueue_scripts', 'my_theme_dark_mode_customizer_css', 20); // Позже, чтобы $wp_add_inline_style сработал

?>