Storing and retrieving a theme in Javascript from a data-* attribute

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?

Solution

I'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.org/en-US/docs/Glossary/IIFE
// you might want to wait for the whole page to load instead 
// https://stackoverflow.com/q/1033398/6398325
(function(){
    // Then set the 'data-theme' attribute to whatever is in localStorage      
    // the line below is commented 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 commented 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 comments 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.