Для сайта francoscarpa.com существуют светлый и темный режимы. Светлый режим полезен при значительном внешнем освещении, темный - уменьшает нагрузку на глаза при низком уровне окружающего света. Вы можете переключать режимы с помощью кнопки, размещенной в шапке сайта. Выбранный режим сохраняется при последующем посещении сайта. Давайте разберемся, как это работает.

Кнопка

В данном случае кнопка написана с нуля. Это SVG-изображение, которое состоит из фонового прямоугольника с закругленными углами и переключателя в виде кружка. Источником вдохновения для кнопки безусловно является iOS Switches, прежде всего, из-за простоты воспроизведения. Для выключенной кнопки: фоновый прямоугольник - серый, кружок - слева. Для включенной: фоновый прямоугольник - зеленый, кружок - справа. Так же, для изменения состояния кнопки определен эффект анимации, который положительно влияет на взаимодействия пользователя с элементом.

HTML-код кнопки:

<svg id="themeButton" width="60" height="30">
  <rect x="0" y="0" width="60" height="30" fill="#ddd" fill="15" />
  <circle onclick="toggleTheme()" cx="15" cy="15" r="12" fill="#fff" /> 
</svg>

Событие onclick() привязано именно к кружку. Таким образом, кнопка меняет свое состояние только при нажатии на кружок. Клик по свободному пространству фонового прямоугольника неэффективен.

JavaScript

Основу реализации состовляет следующий JavaScript код:

function toggleTheme() {
  if (localStorage.getItem("theme") !== "dark") {               // if the theme is dark
    themeButton.children[0].setAttribute("fill", "#6ee559");    // color the button green
    themeButton.children[1].setAttribute("cx", "45");           // move the circle inside the button to the right
    root.id = "dark";                                           // set the id of the html element to "dark"
    localStorage.setItem("theme", root.id);                     // save the info about the dark theme 
    localStorage.setItem("themeButtonFill", "#6ee559");         // ...
    localStorage.setItem("themeButtonX", "45");                 // ...
  } else {                                                      // if the theme id clear
      themeButton.children[0].setAttribute("fill", "#ddd");     // color the button gray
      themeButton.children[1].setAttribute("cx", "15");         // move the circle inside the button to the left
      root.id = "";                                             // set the id of the html element to ""  
      localStorage.setItem("theme", root.id);                   // save the info about the clear theme 
      localStorage.setItem("themeButtonFill", "#ddd");          // ...
      localStorage.setItem("themeButtonX", "15");               // ...
    }
  };
        
var root = document.documentElement;                            // references the html element
var themeButton = document.getElementById("themeButton");       // references the button to change the mode
        
if (localStorage.getItem("theme")) {                                                        // if the "theme" property is set on localStorage
  themeButton.children[0].setAttribute("fill", localStorage.getItem("themeButtonFill"));    // set the "fill" attribute using the key of the same name on localStorage 
  themeButton.children[1].setAttribute("cx", localStorage.getItem("themeButtonX"));         // set the "cx" attribute using the key of the same name on localStorage
  root.id = "dark";
}

Функция toggleTheme() предназначена для переключения между режимами. Несколько переменных определяют свойства HTML-элементов и состояние кнопки. Наконец оператор выбора if обеспечивает сохранение выбранного режима при переходе на другие страницы. Глупо будет видеть установленный по умолчанию светлый режим после перехода на другие странице при уже выбранном темном режиме. Сохранение выбранных настроек возможно благодаря Web Storage API, особенно, благодаря механизму localStorage , предоставляющему место для хранения информации сайта. Настройки сохранятся, даже когда Вы покинете сайт и вернетесь к нему спустя некоторое время. То есть, с помощью этого API сохраняются настройки как при переходе на другие страницы, так и при повторном посещении сайта.

Функция toggleTheme() определяет необходимый режим отображения с помощью метода setItem(), который позволяет сохранять значения определенных переменных. Так как светлый режим установлен по умолчанию, каждый раз возникает необходимость проверять - нужно ли включить темный режим.

Последний оператор if нужен для того, чтобы с помощью метода getItem() получить значения необходимых переменных.

Код функции, определяющий необходимый режим, выполняется каждый раз при загрузке страницы веб-сайта.

Спасибо за внимание.

Перевод статьи Franco Scapa “How I Implemented the Dark Mode on My Website”.