CODEWITHSUNDEEP
javascripthtmlasp.netcookies
mihailovsMark
mihailovsMark

Reputation: 72

How do i use cookies to store a different theme colour so it changes on all pages on my site not just the homepage?

I am trying to store my theme colour in a cookie so when i click a button it changes the theme on my homepage but it doesn't change it for my other pages.

JavaScript code: - scroll down to see the new code.

$(document).ready(function () {
    $("button").click(function () {
        document.cookie = "theme=grey";
        return false;
    });
});


let themeColor = document.cookie;

html code: this is on my master page.

    <div id="footer">
      <div id="footer_content">
    <img src="Images/fasthosts2.png" alt="Fasthostslogo" width="150" height="50"  />
          <div class="foot"></div>

  <button> Change Theme</button>

    </div>  
 </div>

links:

  <script src="ThemeChanger.js"></script>

New and better code but still doesn't work on all pages. JS:

$(document).ready(function () {
    $('#ChangeTheme').click(function () {
        document.body.style.setProperty("--color1", "orange")
        document.body.style.setProperty("--color2", "red")
        document.body.style.setProperty("--color3", "white")
        return false;
    });
});

CSS:

:root {
    --color1: #3366cc;
    --color2: #2d2d2d;
    --color3: white;
}

#header {
    background-color: #3366cc;
    height: 110px;
    position: fixed;
    top: 0;
    width: 100%;
    display: table;
    border-bottom: 5px solid #0099ff;
    border-top: 5px solid #2d2d2d;
    background: linear-gradient(var(--color2), var(--color1));
}

#footer {
    background-color: darkblue;
    height: 150px;
    position: fixed;
    bottom: 0;
    width: 100%;
    border-top: 5px solid #0099ff;
    background: linear-gradient(var(--color1), var(--color2));
}

HTML:

  <asp:Button ID="ChangeTheme" runat="server" Text="Change Theme" Width="110px" CausesValidation="false" BackColor="#99CCFF" BorderColor="#000066" BorderStyle="Solid" />

Upvotes: 0

Views: 1852

Answers (4)

user1464675
user1464675

Reputation:

You need to make sure that the other pages also read the cookie value and change the style accordingly. It would be helpful if you added all of your code, like the bits that use the variable themeColor.

Upvotes: 0

Devinder
Devinder

Reputation: 125

You can use localStorage. I think its the preferred way to go.

To save or update use :

localStorage.setItem('theme','value');

To get the Value:

localStorage.getItem('theme');

To clear:

localStorage.clear()

Upvotes: 0

user6656728
user6656728

Reputation:

add ;path=/ to your cookies and you can use cookies on different pages

this will help you more

Upvotes: 0

Inderjeet Singh
Inderjeet Singh

Reputation: 566

Welcome to stack overflow

You need to change your code to

$("button").click(function () {
    document.cookie = "theme=grey;path=/";
    return false;
});

By adding path=/ you tell the browser to save the cookie on domain level. Otherwise the browser will create the cookie for the specific page you are clicking button on.

Upvotes: 2

Related Questions