Смяна на режим светъл/тъмен

Ticketa

Registered
Привет,
имам един бутон за смяна на режима дали да използа светла или тъмна тема посетителя.

Изключително просто съм го направил, обаче ми се иска да запазя режима в бисквитка или нещо подобно, така че браузъра му да го помни.

js;
Код:
const toggle = document.querySelector('#toggle')
const body = document.body

toggle.addEventListener('click', () => {
  body.classList.toggle('dark')
  toggle.classList.toggle('toggle')
})


html
Код:
      <div class="switch-content">
        <button class="switch" type="button" id="toggle"><span class="sun">
            <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor">
              <path d="M6.995 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007-2.246-5.007-5.007-5.007S6.995 9.239 6.995 12zM11 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2H2zm17 0h3v2h-3zM5.637 19.778l-1.414-1.414 2.121-2.121 1.414 1.414zM16.242 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.344 7.759 4.223 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path>
            </svg></span><span class="moon">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"></path>
            </svg></span></button>
      </div>

css
Код:
.switch{
  height: 3em;
  width: 3em;
  appearance: none;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: all .3s ease-in-out;
  background-color: var(--switch-bg);
  &:hover{
    background-color: var(--switch-hover-bg);
  }
  span{
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-flex;
    transition: all .3s ease-in-out;
    opacity: 0;
  }
  .sun{
    color: #333;
    transform: translate(-50%, -50%);
    opacity: 9;
  }
  .moon{
    color: yellow;
    transform: translate(-100%, -50%) scale(-1);
  }
  // Animation
  &.toggle{
    .sun{
      transform: translate(-50%, -50%) scale(3);
      opacity: 0;
    }
    .moon{
      left: 50%;
      transform: translate(-50%, -50%) scale(1);
      opacity: 9;
    }
  }
}
 
Според мен е по-добър вариант да се запазва в базата на сесия, след като реално му закачи такава, и тази сесия да не изтича. Ако беше с логване и седеше логнат, нещата щяха да са още по-лесни и приложими.

 
Доколкото разбирам, ти трябва просто в click listener'а на toggle копчето да setнеш бисквитка "theme:dark/light" според новоизбраната стойност, а при зареждане на страницата да ѝ вземеш стойността и да приложиш темата?
 
The localStorage object allows you to save key/value pairs in the browser.

The localStorage object stores data with no expiration date.

The data is not deleted when the browser is closed, and are available for future sessions.

 
 
Коригирах го така ( https://www.w3schools.com/jsref/prop_win_localstorage.asp ), обаче явно грешка (гол и бос съм с js)
Код:
<script id="rendered-js">
const toggle = document.querySelector('#toggle');
const body = document.body;


toggle.addEventListener('click', () => {
  localStorage.setItem("theme", "dark");
  body.classList.toggle(localStorage.getItem("theme"));
  toggle.classList.toggle('toggle');
});
</script>
 
Според мен в случая трябва да използваш el.classList.add() и да добавяш класа за dark ако localStorage.getItem("theme") ти връща, че потребителя е избрал dark. И съответно всеки път на клик да записваш правилната стойност, вместо всеки път да записваш dark :D
 
Ето кво върна ChatGPT, че ме мързеше да пиша като му показах твоя код :D


Код:
const toggle = document.querySelector('#toggle')
const body = document.body

// check if the user has a preference saved in local storage
const isDarkMode = localStorage.getItem('dark-mode') === 'true'

// if the user has a preference, set the body class accordingly
if (isDarkMode) {
  body.classList.add('dark')
  toggle.classList.add('toggle')
}

toggle.addEventListener('click', () => {
  // toggle the body class
  body.classList.toggle('dark')
  toggle.classList.toggle('toggle')

  // save the preference to local storage
  localStorage.setItem('dark-mode', body.classList.contains('dark'))
})

This code will check if the user has a dark mode preference saved in local storage. If they do, it will set the body class accordingly. When the toggle is clicked, it will toggle the body class and save the preference to local storage.
 
Ето кво върна ChatGPT, че ме мързеше да пиша като му показах твоя код :D
ХАхахахахахах работи. Аз наскоро си правих експерименти и като цяло е доста добро ChatGPT

EDIT: Как му зададе точно въпроса, че ти върна готовия код?
 
Код:
I have the following JavaScript code.. How to modify it to save dark mode in local storage?

```const toggle = document.querySelector('#toggle')
const body = document.body

toggle.addEventListener('click', () => {
  body.classList.toggle('dark')
  toggle.classList.toggle('toggle')
})```

Ей тва му написах :D
 
Боже, какви неща измисли, Боже...
Е, сигурно rapture заради това не се е случил, яде пуканки и гледа до къде ще стигне хомосапиенс..
Приятна изненада..
 
Даже сега го питах на български и ми даде по-як код :D

Код:
const toggle = document.querySelector('#toggle')
const body = document.body

function setDarkMode(value) {
  localStorage.setItem('darkMode', value)
  body.classList.toggle('dark', value)
  toggle.classList.toggle('toggle', value)
}

toggle.addEventListener('click', () => {
  const isDarkMode = localStorage.getItem('darkMode') === 'true'
  setDarkMode(!isDarkMode)
})

const isDarkMode = localStorage.getItem('darkMode') === 'true'
setDarkMode(isDarkMode)
 
Искаш да кажеш, че се е сетило да добави setDarkMode още при зареждане на скрипта, за да си спомни от предишната сесия?? Стига бе...
 
Даже сега го питах на български и ми даде по-як код :D

Код:
const toggle = document.querySelector('#toggle')
const body = document.body

function setDarkMode(value) {
  localStorage.setItem('darkMode', value)
  body.classList.toggle('dark', value)
  toggle.classList.toggle('toggle', value)
}

toggle.addEventListener('click', () => {
  const isDarkMode = localStorage.getItem('darkMode') === 'true'
  setDarkMode(!isDarkMode)
})

const isDarkMode = localStorage.getItem('darkMode') === 'true'
setDarkMode(isDarkMode)
Това вече ме изненада и мен. :)
 
Привет,
имам един бутон за смяна на режима дали да използа светла или тъмна тема посетителя.

Изключително просто съм го направил, обаче ми се иска да запазя режима в бисквитка или нещо подобно, така че браузъра му да го помни.

js;
Код:
const toggle = document.querySelector('#toggle')
const body = document.body

toggle.addEventListener('click', () => {
  body.classList.toggle('dark')
  toggle.classList.toggle('toggle')
})


html
Код:
      <div class="switch-content">
        <button class="switch" type="button" id="toggle"><span class="sun">
            <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor">
              <path d="M6.995 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007-2.246-5.007-5.007-5.007S6.995 9.239 6.995 12zM11 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2H2zm17 0h3v2h-3zM5.637 19.778l-1.414-1.414 2.121-2.121 1.414 1.414zM16.242 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.344 7.759 4.223 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path>
            </svg></span><span class="moon">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"></path>
            </svg></span></button>
      </div>

css
Код:
.switch{
  height: 3em;
  width: 3em;
  appearance: none;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: all .3s ease-in-out;
  background-color: var(--switch-bg);
  &:hover{
    background-color: var(--switch-hover-bg);
  }
  span{
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-flex;
    transition: all .3s ease-in-out;
    opacity: 0;
  }
  .sun{
    color: #333;
    transform: translate(-50%, -50%);
    opacity: 9;
  }
  .moon{
    color: yellow;
    transform: translate(-100%, -50%) scale(-1);
  }
  // Animation
  &.toggle{
    .sun{
      transform: translate(-50%, -50%) scale(3);
      opacity: 0;
    }
    .moon{
      left: 50%;
      transform: translate(-50%, -50%) scale(1);
      opacity: 9;
    }
  }
}

вече има OpenAI ChatGPT и можеш да го питаш за всичко.... по-бързо отговаря от хора по форумите :D :D п.с. е, стига и дa не е претоварен и да работи де :D
 

Горе