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

Answer 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 .

Answer 2

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