Trouble setting a css file from LocalStorage

Question

I am trying to create a theme selector for a web page using two different css files. I have accomplished to do so but I am stuck when try to make the user selection persist over time. I am trying to use LocalStorage to do so but I can not make it work. This is my html and js code here:

    <!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<link href="app.css" rel="stylesheet" id="theme-link">
</head>

<body>
<button class="btn-toggle">Themes</button>

<p>At vero eos et accusam et justo duo dolores et ea rebum. </p>
    <a href="#">Link</a>
    <script>
    const btn = document.querySelector(".btn-toggle");

    const currentTheme = localStorage.getItem("theme");
    if (currentTheme == "dark") { (theme.getAttribute("href") == "app.css")
        theme.href = "appdark.css";
        }
    const theme = document.querySelector("#theme-link");

    btn.addEventListener("click", function() {

    if (theme.getAttribute("href") == "app.css") {
        theme.href = "appdark.css";
        themeName = "dark";
        } else {
        theme.href = "app.css";
        themeName = "light";
        }
        localStorage.setItem("theme", theme);
    });
    </script>
</body>

</html>

and both css files here:

    /* app.css */
html {
background: #f2f2f2;
}
body {
color: #222;
background: #f2f2f2;
padding: 20px;
}
a {
color: #0033cc;
}

and

    /* appdark.css */
html{
filter: invert(1);
}
html {
background: #f2f2f2;
}
body {
color: #222;
background: #f2f2f2;
padding: 20px;
}
a {
color: #0033cc;
}

Any solution that make it work will be appreciated.

Did you check this: https://stackoverflow.com/questions/19844545/replacing-css-file-on-the-fly-and-apply-the-new-style-to-the-page? — Darshna Rekha, Jul 22 '21 at 12:47
`if (currentTheme == "dark") { (theme.getAttribute("href") == "app.css")` – looks like you are missing a second `if` keyword here. Or you’d need to combine both of those conditions using a logical operator. — CBroe, Jul 22 '21 at 12:47
CBroe, I think so but I am very new to js and would not know how to do what you suggest. — SIMBIOSIS surl, Jul 22 '21 at 12:55
Darshna Rekha, I saw that example but I can not use Jquery and those approaches use it. Any way my code is working when changing the css files. What is not working is when the stored link is called to be applied in further sessions. — SIMBIOSIS surl, Jul 22 '21 at 13:03
You can probably remove that check altogether, because when `currentTheme == "dark"`, then you want to set the dark theme anyway, so why still check whether the current theme is the other one in that place anyway? Apart from that anything else can hardly happen to begin with - this code executes when the page loads, so nothing will have changed the initial ` — CBroe, Jul 22 '21 at 13:37
CBroe, when you load the page for the first time its light theme, then, if you change it to dark and close the page it will be light theme loaded again the next time you load the page. So, what I am trying to do is to store in the localStorage the user selected theme for next time he loads the page it display the selected one. — SIMBIOSIS surl, Jul 22 '21 at 13:42
It looks like you need to store the `themeName` in the localStorage rather than `theme` — Professor Abronsius, Jul 22 '21 at 14:53

score 1 · Accepted Answer · answered Jul 22 '21 at 15:01

In the logic test you have to load the CSS file on pageload you test whether the value from localStorage is equal to a string representing either light or dark yet later attempt to store the theme in localStorage. At that stage theme is a reference to the actual stylesheet rather than the theme colour so within the click handler you need to save the themeName

Whether simply changing the url of the stylesheet will actually load the new styles or not is another matter - a page reload might be required!?

const btn = document.querySelector('.btn-toggle');
const theme = document.querySelector('#theme-link');
const currentTheme = localStorage.getItem('theme');

if( currentTheme == 'dark' && theme.getAttribute('href')=='app.css' ){
    theme.href='appdark.css';
}




btn.addEventListener('click', function(e){
    if( theme.getAttribute('href') == 'app.css' ) {
        theme.href = 'appdark.css';
        themeName = 'dark';
    } else {
        theme.href = 'app.css';
        themeName = 'light';
    }
    localStorage.setItem( 'theme', themeName );
});

Professor Abronsius, this approach is exactly what I needed. Now its working as expected. Thank you very much. — SIMBIOSIS surl, Jul 22 '21 at 15:27
Professor Abronsius, I've just finished adding it to the real website and its working like a charm. Thank you again. — SIMBIOSIS surl, Jul 22 '21 at 18:50
To be fair you were mostly there - just a small mistook is all. Good luck with the rest of the coding adventure — Professor Abronsius, Jul 22 '21 at 22:12

Trouble setting a css file from LocalStorage

1 Answers1