Can I ask for help, maybe I'm wrong.
A code that changes the style of the site and remembers the user's actions.


'use strict';
// create <link rel="stylesheet" href="light|dark.css">
let head = document.head,
    link = document.createElement('link');
link.rel = 'stylesheet';
// check the value from localStorage
if (localStorage.getItem('themeStyle') === 'dark') {
  link.href = 'css/dark.css'; // link to a dark style
  document.getElementById('switch-1').setAttribute('checked', true); // switch the checkbox to the "dark theme"
}
// default light theme
else {
  link.href = 'css/light.css'; // link to light style
}
head.appendChild(link); // insert the <link rel="stylesheet" href="light|dark.css"> into the header of the page between the head

// event when switching checkbox
document.getElementById('switch-1').addEventListener('change', ev => {
  let btn = ev.target;
  // if the checkbox is enabled
  if (btn.checked) {
    link.href = 'css/dark.css'; // turn off the dark theme
    localStorage.setItem('themeStyle', 'dark'); // write the value in localStorage
  }
  else {
    link.href = 'css/light.css'; // turn on the light theme
    localStorage.setItem('themeStyle', 'light'); // write the value in localStorage
  }
});

  <div class="switch">
    <input type="checkbox" id="switch-1" class="switch-check">
    <label for="switch-1" class="switch-label">
        Опция
        <span class="switch-slider switch-slider-on"></span>
        <span class="switch-slider switch-slider-off"></span>
    </label>
  </div>

  <script type="text/javascript" src="js/script.js?=version=1.0" charset="UTF-8"></script>

How do I properly use the API?

Uh oh!

How to use localStorage? #1399

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions