I'm sorry if that's a duplicate, but I found myself in trouble as I can't get my theme mode stored in local storage.
Here is my HTML code:
<!--
The data-* attribute is used to store custom data private to the page or application.
The data-* attribute gives us the ability to embed custom data attributes on all HTML elements.
-->
<body id="webPage" class="container" data-theme="light">
<div class="">
<h1>Hello world</h1>
</div>
<div class="">
<button id="toggleDarkMode" type="button" class="" onclick="darkMode()">
Click Me !
</button>
</div>
<div class="">
<a href="#">
This is a link
</a>
</div>
</body>
As you can see, everything is handled by data-theme="light" to apply my css and onclick="darkMode()" to trigger my javascript. Here is the 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;
}
And the 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');
}
Now, the thing is, I don't get any errors, and my value is saved into localStorage according to the console.log(). Hence my question, what did I do wrong?
I'm sorry if that's a duplicate, but I found myself in trouble as I can't get my theme mode stored in local storage.
Here is my HTML code:
<!--
The data-* attribute is used to store custom data private to the page or application.
The data-* attribute gives us the ability to embed custom data attributes on all HTML elements.
-->
<body id="webPage" class="container" data-theme="light">
<div class="">
<h1>Hello world</h1>
</div>
<div class="">
<button id="toggleDarkMode" type="button" class="" onclick="darkMode()">
Click Me !
</button>
</div>
<div class="">
<a href="#">
This is a link
</a>
</div>
</body>
As you can see, everything is handled by data-theme="light" to apply my css and onclick="darkMode()" to trigger my javascript. Here is the 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;
}
And the 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');
}
Now, the thing is, I don't get any errors, and my value is saved into localStorage according to the console.log(). Hence my question, what did I do wrong?
-
The way you access local storage is incorrect:
localStorage.theme. You should be usinglocalStorage.getItem('theme'). – Terry Commented Jan 28, 2021 at 18:19 - It looks like you're reading the theme from the document, saving it in local storage, then setting the other value to the document. Basically it doesn't matter what local storage is, you're just toggling it, but it's always based on the current state of the page. – Charlie Bamford Commented Jan 28, 2021 at 18:19
- @Charles Bamford, does that mean I have to set the theme straight from my .js file, rather than the HTML one? – 99Botch Commented Jan 28, 2021 at 18:25
1 Answer
Reset to default 4I'm finding it hard to explain what you did wrong so I'll explain what I did to achieve what you want step-by-step.
const container = document.getElementById('webPage');
// This function will execute itself when the script is loaded
// https://developer.mozilla/en-US/docs/Glossary/IIFE
// you might want to wait for the whole page to load instead
// https://stackoverflow./q/1033398/6398325
(function(){
// Then set the 'data-theme' attribute to whatever is in localStorage
// the line below is mented because stackoverflow won't allow using localStorage on snippets
// container.setAttribute('data-theme', localStorage.getItem('theme'));
})();
function switchTheme() {
// Check what is the current theme and get the opposite one
const targetTheme = container.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
// Set the attribute 'data-theme' to the targetTheme
container.setAttribute('data-theme', targetTheme);
// Save the targetTheme to the localStorage
// the line below is mented because stackoverflow won't allow using localStorage on snippets
// localStorage.setItem('theme', targetTheme);
}main[data-theme="dark"] {
color: white;
background: #333;
}<main id="webPage" onclick="switchTheme()">
MyContent
</main>You can ask in the ments if you need anything
Edit: I'll at least try to explain.
So, you said
I can't get my theme mode stored in local storage
But as you tested in the console.log it is actually saving the attribute value, you just didn't load the theme when the page was loaded, and that's what the function I've added is for.