Сохранение и получение темы в Javascript из атрибута data-* ⇐ CSS

[Anonymous]

Извините, если это дубликат, но у меня возникли проблемы, поскольку я не могу сохранить режим темы в локальном хранилище.
Вот мой HTML-код:< /p>

Код: Выделить всё

Hello world


Click Me !


[url=#]
This is a link
[/url]

Как видите, все обрабатывается data-theme="light" для применения моего CSS и onclick="darkMode()" для запуска моего яваскрипт. Вот CSS:

Код: Выделить всё

:root {
--colour-bck: #FFFAFA;
--colour-font: #222;
}

[data-theme="light"],
a {
transition-duration: 1s;
}

/* If mode is swicthed, then apply following changes to the variable  */

[data-theme="dark"] {
--colour-bck: #222;
--colour-font: #FFFAFA;
transition-duration: 1s;
}

/* Styling the DOM */

body {
margin: 0
}

.container {
height: 100vh;
background-color: var(--colour-bck);
}

body {
color: var(--colour-font);
}

a {
text-decoration: none;
color: var(--colour-font);
display: block;
margin-top: 2em;
}

И JavaScript:

Код: Выделить всё

/*
darkMode switches to a dark/light mode view : body which renders the mode is fetch alongside data-theme holding the styles to render
if the theme is dark, change it to light, which applies "data-theme = light" styles & vice-sersa
*/
console.log(localStorage)

function darkMode() {
const container = document.getElementById('webPage');
// const theme = container.getAttribute('data-theme');

var dataTheme = container.getAttribute('data-theme');
localStorage.setItem("theme", dataTheme);

(localStorage.theme === 'dark') ? container.setAttribute('data-theme', 'light'): container.setAttribute('data-theme', 'dark');

}

Дело в том, что я не получаю никаких ошибок, и мое значение сохраняется в localStorage в соответствии с console.log(). Отсюда мой вопрос, что я сделал не так?

Подробнее здесь: https://stackoverflow.com/questions/659 ... -attribute