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

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;
    }
  }
}
 

Blinky

Administrator
Екип
Според мен е по-добър вариант да се запазва в базата на сесия, след като реално му закачи такава, и тази сесия да не изтича. Ако беше с логване и седеше логнат, нещата щяха да са още по-лесни и приложими.

 

anonimen

Super Moderator
Доколкото разбирам, ти трябва просто в click listener'а на toggle копчето да setнеш бисквитка "theme:dark/light" според новоизбраната стойност, а при зареждане на страницата да ѝ вземеш стойността и да приложиш темата?
 

deam0n

Super Moderator
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.

 

Pok4

Registered
 

Ticketa

Registered
Коригирах го така ( 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>
 

deam0n

Super Moderator
Според мен в случая трябва да използваш el.classList.add() и да добавяш класа за dark ако localStorage.getItem("theme") ти връща, че потребителя е избрал dark. И съответно всеки път на клик да записваш правилната стойност, вместо всеки път да записваш dark :D
 

deam0n

Super Moderator
Ето кво върна 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.
 

Ticketa

Registered
Ето кво върна ChatGPT, че ме мързеше да пиша като му показах твоя код :D
ХАхахахахахах работи. Аз наскоро си правих експерименти и като цяло е доста добро ChatGPT

EDIT: Как му зададе точно въпроса, че ти върна готовия код?
 

deam0n

Super Moderator
Код:
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
 

Pok4

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

deam0n

Super Moderator
Даже сега го питах на български и ми даде по-як код :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)
 

anonimen

Super Moderator
Искаш да кажеш, че се е сетило да добави setDarkMode още при зареждане на скрипта, за да си спомни от предишната сесия?? Стига бе...
 

Blinky

Administrator
Екип
Даже сега го питах на български и ми даде по-як код :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)
Това вече ме изненада и мен. :)
 

webstationbg

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;
    }
  }
}

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

Горе