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

Question

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()"/>

Trent · Accepted Answer · 2018-09-15 21:12:14Z

1

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();
}

answered Sep 15, 2018 at 21:12

Trent

4,3185 gold badges27 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nandl66 · Accepted Answer · 2018-09-15 21:21:31Z

1

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.

edited Sep 15, 2018 at 21:21

answered Sep 15, 2018 at 21:10

Nandl66

2842 silver badges11 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related