CODEWITHSUNDEEP
javascripthtmlcss
Hallam Curry
Hallam Curry

Reputation: 51

Keep CSS from refreshing on page reload

I have a html page with two CSS files - one for a light theme and one for a dark theme. When I click the respective button, the theme changes to either light.css or dark.css.

However, whenever I refresh the page, reload the page, go back etc. It changes back to the default css (being the light.css file).

Is there any way I can get it to stay on the dark.css theme when I click the button and refresh the page?

Thanks.

Upvotes: 2

Views: 4309

Answers (2)

Evgeny Melnikov
Evgeny Melnikov

Reputation: 1092

If you don't want to use back-end methods to substitute the style.css file, you can try using local storage like this:

If you don't want to use back-end methods to substitute the style.css file, you can try using local storage like this:

$(function(){

  setSiteTheme(getSiteTheme());
  
  function setSiteTheme(themeName) {
    //Uncomment this in your app: window.localStorage.setItem('themeName', themeName);
    $('link[data-theme]').attr('href', themeName);
  }
  
  function getSiteTheme() {
    //Uncomment this in your app: return window.localStorage.getItem('themeName') || 'light.css';
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="/css/styles.css?version=5a6992221f52c" data-theme>

After that add DATA-THEME attribute to the link tag of the head. And don't forget to uncomment necessary lines.

Upvotes: 0

Adrian Frunza
Adrian Frunza

Reputation: 106

You can use a cookie, localStorage or sessionStorage where you keep the default theme and the choosen one. So when your page loads you have to read that info from cookie/localStorage/sessionStorage and to apply the chosen theme.

e.g when page is loading

let theme = localStorage.getElement('theme');
if(!theme){
theme = 'light';
localStorage.setElement('theme', 'light');
}
// and you use theme variable to load the light theme

e.g when the user changes the theme

localStorage.setElement('theme', 'dark');
theme = 'dark';

Upvotes: 4

Related Questions