CODEWITHSUNDEEP
jquerycsscookiesthemesjquery-cookie
buzlink
buzlink

Reputation: 21

Storing current style sheet with a cookie when changing style sheets file with jQuery?

I am trying to keep the current theme set by a stylesheet when the page is refreshed.

I am currently swapping out css files with a row of buttons at the bottom of the page.

How do I add on to the following code so that it sets and checks the current stylesheet upon page refresh with a cookie?

So when the user refreshes the page the current theme selected will stay in place until another theme is selected?

jQuery

 $("#css-light").click(function() {
    $("link[rel=stylesheet]").attr({href : "stylesheet.css"});
 });

 $("#css-dark").click(function() {
     $("link[rel=stylesheet]").attr({href : "stylesheetdark.css"});
 });

<button onclick="location.href='#dark'" id="css-dark" class="" type="button">Dark</button>

<button onclick="location.href='#light'" id="css-light" class="" type="button">Light</button>

Thanks

Minimal, Complete, and Verifiable example with included code for the provided solution. 

    <!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" href="css/stylesheet.css" type="text/css">
    <meta charset="UTF-8">
    <title>Switch CSS Themes and Store as a Cookie</title>
</head>

<body>
    <script>
        //suggested code answer
        var sheet = document.querySelector("link[rel=stylesheet]"); // id might be better on `<link>` 
        var theme = localStorage.getItem('theme');
        if (theme && theme !== sheet.getAttribute('href')) {
            sheet.setAttribute('href', theme);
        }

        // Theme selection script
        $(document).ready(function() {
                    // light
                    $("#css-light").click(function() {
                        $("link[rel=stylesheet]").attr({
                            href: "css/stylesheet.css"
                        });
                        localStorage.setItem('theme', "stylesheet.css")
                    });
                    // dark
                    $("#css-dark").click(function() {
                        $("link[rel=stylesheet]").attr({
                            href: "css/stylesheetdark.css"
                        });
                        localStorage.setItem('theme', "stylesheetdark.css")
                    });
    </script>

    Site Content

</body>


<footer>
    Theme
    <button onclick="location.href='#dark'" id="css-dark" class="button-footer" type="button">Light</button>
    <button onclick="location.href='#light'" id="css-light" class="button-footer" type="button">Dark</button>
</footer>

</html>

Upvotes: 0

Views: 221

Answers (1)

charlietfl
charlietfl

Reputation: 171698

Can use localStorage

 $("#css-light").click(function() {    
    $("link[rel=stylesheet]").attr({href : "stylesheet.css"});
    localStorage.setItem('theme', "stylesheet.css")
 });

 $("#css-dark").click(function() {
     $("link[rel=stylesheet]").attr({href : "stylesheetdark.css"});
     localStorage.setItem('theme', "stylesheetdark.css")
 });

then I would put a script tag right after the <link> so it gets changed before much content loads

<script>
   var sheet = document.querySelector("link[rel=stylesheet]");// id might be better on `<link>` 
   var theme = localStorage.getItem('theme');
   if(theme && theme !== sheet.getAttribute('href')){
     sheet.setAttribute('href', theme);
   }
</script>

Upvotes: 0

Related Questions