Switch Theme

Простой скрипт переключения цветовой темы

Инструкция по установке:

  1. Скачать файл скрипта: Скачать скрипт
  2. Подключить скрипт switchTheme.js на странице
  3. Задать настройки скрипта через объект options
  4. Вызвать функцию setTheme(options) и передать ей объект с настройками

Пример кода:


    <script>
        let blurDark = document.querySelector('.blur-dark')
        let blurLight = document.querySelector('.blur-light')
    </script>

    <script src="switchTheme.js"></script>

    <script>
        const options = {
            rootBlockClass: null,  //-------------------- Имя класса блока, в котором будем менять тему или null - для работы с <body>
            defaultTheme: 'dark',  //-------------------- Тема по умолчанию, dark или light
            transition: 0.5,  //------------------------- Скорость изменения цветовой темы в секундах
            toggleButtonClass: 'theme-switch-button',  // Название класса кнопки для переключения темы
            lightThemeBackground: '#e9f1ff',  //--------- Цвет фона для светлой темы
            lightThemeText: '#111',  //------------------ Цвет текста для светлой темы
            darkThemeBackground: '#1c1b1f',  //---------- Цвет фона для тёмной темы
            darkThemeText: '#e0e6f7',  //----------------- Цвет текста для тёмной темы
            customFunctionDark: darkBlur,  // ----------- Имя пользовательской функции срабатывающей при тёмном режиме
            customFunctionLight: lightBlur,  // --------- Имя пользовательской функции срабатывающей при светлом режиме
        }

        setTheme(options)

        // * Пользовательские функции *

        // Эта функция сработает при включенном тёмном режиме
        function darkBlur() {
            blurDark.style.display = 'block'
            blurLight.style.display = 'none'
        }
    
        // Эта функция сработает при включенном светлом режиме
        function lightBlur() {
            blurDark.style.display = 'none'
            blurLight.style.display = 'block'
        }
    </script>