Переключатель фона сайта в HTML + CSS + JS

Переключатель фона страницы и/или отдельных фрагментов — задача не часто нужная. Но бывает такая необходимость, например, для демонстрации элементов дизайна/изображений на разных вариантах цветового оформления сайта. Наверное есть и иные функциональные задачи.

В материале этой странице предложен очередной вариант реализации смены цвета/картинки фона на сайтах Joomla 5. Вполне себе имеющий право на жизнь.

В текущей реализации скрипта фон:

Фон сохраняется до тех пор, пока:
• Пользователь не очистит данные браузера (кэш, куки, localStorage).
• Пользователь не нажмет кнопку «Сбросить настройки».
• Не будет выполнен скрипт очистки localStorage.

Фон сохраняется между:
• Перезагрузками страницы.
• Закрытием и открытием браузера.
• Сессиями пользователя.

Фон НЕ сохраняется:
• При использовании режима инкогнито/приватного просмотра (localStorage очищается при закрытии такого окна).
• При смене браузера (каждый браузер имеет свой localStorage).
• При смене устройства.

Подключение обычное. В нужном месте страницы прописываем код html, css и js на этой же странице материала в соответствующих тегах: style и script (встроенный редактор Joomla в этом процессе выключен, конечно). При необходимости (использования смены фона на многих страницах) имеет смысл «вынести» css в общий файл стилей Joomla и аналогично подключить скрипт в body. Можно оформить «примочку» в виде модуля и размещать оный в любом нужном месте сайта.

Вопросы можно задать в Комментариях, если они (вдруг) возникнут.

• HTML контейнера, у которого меняем фон

  <div id="change-background"> Любое содержимое с форматированием или без, безразлично. </div>

• HTML блока кнопок

  <div class="color-panel color-options">
  <div class="reset-btn" uk-tooltip="Сброс фона">
  </div>
  <div class="switcher-btn cp-dark" data-type="color" data-value="#2e2723" uk-tooltip="Темный фон">
  </div>
  <div class="switcher-btn cp-white" data-type="color" data-value="#ffffff" uk-tooltip="Белый фон">
  </div>
  <div class="switcher-btn cp-green" data-type="color" data-value="#936900" uk-tooltip="Зеленый фон">
  </div>
  <div class="switcher-btn cp-red" data-type="color" data-value="#800000" uk-tooltip="Бордовый фон">
  </div>
  <div class="switcher-btn cp-img" data-type="image" data-value="url('/images/background/bg-seo-2.jpg')" uk-tooltip="Фон картинка">
  </div>
  </div>
  

• CSS

  Стили прописаны под конкретный дизайн конкретной страницы, каждый волен сваять переключатели уникальными «на свой вкус и цвет». В этом проекте:

  .color-panel {height:24px; padding:0; display:flex; align-items:center;}
  .color-panel div {height:18px; width:18px; border-radius:500px; float:left; margin:0 3px; cursor:pointer !important; display:block;}
  .reset-btn {background-color:#f00; height:22px !important; width:22px !important; display:block;}
  .reset-btn:hover {color:#33cc00;}
  .cp-white {background-color:#fff; border:1px solid rgba(0,0,0,.1);}
  .cp-dark {background-color:#2e2723;}
  .cp-green {background-color:#936900;}
  .cp-red {background-color:#800000;}
  .cp-img {background:-webkit-radial-gradient(circle, red, orange, yellow, green, blue, indigo, violet);}
  #change-background {transition:all 0.5s ease; min-height:10vh; margin:0; background-size:cover; background-position:center; background-repeat:no-repeat;}

• JS

  document.addEventListener('DOMContentLoaded', function() {
      // Функция для определения яркости цвета
      function getBrightness(color) {
          if (color.startsWith('rgb')) {
              const rgb = color.match(/\d+/g);
              return (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
          }
          if (color.startsWith('#')) {
              const hex = color.replace('#', '');
              const r = parseInt(hex.substr(0, 2), 16);
              const g = parseInt(hex.substr(2, 2), 16);
              const b = parseInt(hex.substr(4, 2), 16);
              return (r * 299 + g * 587 + b * 114) / 1000;
          }
          return 128;
      }
  
      // Функция сброса настроек
      function resetSettings() {
          const body = document.getElementById('change-background');
          
          // Полностью сбрасываем все стили
          body.removeAttribute('style');
          
          // Очищаем localStorage
          localStorage.clear();
          
          // Сбрасываем активные классы
          document.querySelectorAll('.mode-btn').forEach(btn => {
              btn.classList.remove('active');
          });
          document.querySelector('.mode-btn[data-mode="color"]').classList.add('active');
          
          document.querySelectorAll('.color-options, .image-options').forEach(option => {
              option.classList.remove('active');
          });
          document.querySelector('.color-options').classList.add('active');
      }
  
      // Переключение режимов
      const modeButtons = document.querySelectorAll('.mode-btn');
      const colorOptions = document.querySelector('.color-options');
      const imageOptions = document.querySelector('.image-options');
      
      modeButtons.forEach(button => {
          button.addEventListener('click', function() {
              // Удаляем активный класс у всех кнопок
              modeButtons.forEach(btn => btn.classList.remove('active'));
              // Добавляем активный класс текущей кнопке
              this.classList.add('active');
              
              // Переключаем видимость опций
              if (this.dataset.mode === 'color') {
                  colorOptions.classList.add('active');
                  imageOptions.classList.remove('active');
              } else {
                  colorOptions.classList.remove('active');
                  imageOptions.classList.add('active');
              }
          });
      });
  
      // Обработка выбора цвета или изображения
      const switcherButtons = document.querySelectorAll('.switcher-btn');
      const body = document.getElementById('change-background');
      
      switcherButtons.forEach(button => {
          button.addEventListener('click', function() {
              const type = this.dataset.type;
              const value = this.dataset.value;
              
              if (type === 'color') {
                  body.style.backgroundImage = 'none';
                  body.style.backgroundColor = value;
                  
                  // Определяем цвет текста
                  const brightness = getBrightness(value);
                  body.style.color = brightness > 128 ? '#000000' : '#ffffff';
                  
                  // Сохраняем настройки
                  localStorage.setItem('backgroundType', 'color');
                  localStorage.setItem('backgroundValue', value);
                  localStorage.setItem('textColor', brightness > 128 ? '#000000' : '#ffffff');
              } else {
                  body.style.backgroundColor = 'transparent';
                  body.style.backgroundImage = value;
                  body.style.color = '#ffffff';
                  
                  // Сохраняем настройки
                  localStorage.setItem('backgroundType', 'image');
                  localStorage.setItem('backgroundValue', value);
                  localStorage.setItem('textColor', '#ffffff');
              }
          });
      });
  
      // Обработка кнопки сброса
      document.querySelector('.reset-btn').addEventListener('click', resetSettings);
  
      // Восстановление сохраненных настроек
      const savedType = localStorage.getItem('backgroundType');
      const savedValue = localStorage.getItem('backgroundValue');
      const savedTextColor = localStorage.getItem('textColor');
      
      if (savedType && savedValue) {
          if (savedType === 'color') {
              body.style.backgroundColor = savedValue;
              body.style.color = savedTextColor || '#000000';
              document.querySelector('.mode-btn[data-mode="color"]').click();
          } else {
              body.style.backgroundImage = savedValue;
              body.style.color = savedTextColor || '#ffffff';
              document.querySelector('.mode-btn[data-mode="image"]').click();
          }
      }
  }); 
  

• Скачать скрипт change-background.js

Контейнер, у которого меняем фон, прописываем как: id="change-background". Внутри размещается необходимое содержание. Где-то сверху-снизу-сбоку размещается блок кнопок-переключателей (лучше оформить блок модулем при многоразовом использовании на сайте). Ниже на странице css + js. Добавить более нечего. Кроме того, что: цвет шрифта в контейнере реагирует на цвет фона. Темный фон — светлый шрифт и наоборот.
Можно сделать изящнее? Дык, всё в наших/ваших лапках, Банзай!

Тестируйте, «перепиливайте», пользуйте. Если нужно. Оставьте свой комментарий, при желании. Вопросы, если возникнут, задавайте, при наличии времени/возможности — ответимУдачи!