CODEWITHSUNDEEP
javascripthtmlcssasp.net
rixlayer
rixlayer

Reputation: 23

How do i prevent CSS file from resetting on page reload?

I'm trying to change the accent color across my asp project, the color changes on click, but gets reset to the default color on page reload, how do I get to change a CSS root variable and prevent the client CSS page from resetting to server copy?

Or, what is a better way to enable theming like this?

CSS

:root {
    --custom_accent_purple: #cd40ff;
    --custom_accent_blue: #40acff;
    --custom_accent_orange: #ff8c40;
    --custom_accent_lime: #d3ff40;
    --custom_accent_green: #40ffb3;

    --ac: var(--custom_accent_green);
}

JavaScript in aspx

<script type="text/javascript" >
    function ChangeAccent() {
    document.documentElement.style.setProperty('--ac', 'var(--custom_accent_blue)');
    }
</script>

ASP | HTML

<asp:Button ID="bt_th_1" class="th_c1" runat="server" Text="" OnClientClick="ChangeAccent()"/>

Upvotes: 1

Views: 922

Answers (2)

Nandl66
Nandl66

Reputation: 284

In general you should save the button state in some place and restore its style depending on its state, at page reload. Depending on persistence requirements, you can save the button state server-side or locally as cookie or using the browser storage.

Upvotes: 1

Trent
Trent

Reputation: 4306

You can use the ASP.NET Session State to persist the button state between page reloads.

For example, first modify your ChangeAccent function to save your button state as follows:

function ChangeAccent() {
  document.documentElement.style.setProperty('--ac', 'var(--custom_accent_blue)');
  Session["buttonClicked"] = true;
}

Then you can hook into your Page_Load event to check whether this state is true; and if so, invoke the ChangeAccent function:

protected void Page_Load(object sender, EventArgs e)
{
    if (Session["buttonClicked"] != null) ChangeAccent();
}

Upvotes: 1

Related Questions