2

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.

Kalamarico
  • 5,466
  • 22
  • 53
  • 70
Hallam Curry
  • 51
  • 1
  • 5
  • 2
    What are you building the site with? This sort of thing would be easily done by storing a cookie based on what the user current has opted to see. – Chris Morris Jan 25 '18 at 11:20
  • Yes, use a cookie and control that either through PHP or JS – Nico Haase Jan 25 '18 at 11:20
  • I'm just building the documentation webpages as part of a placement, the rest of the site it setup. I'm using Sphinx for the documentation pages – Hallam Curry Jan 25 '18 at 11:47
  • I would advise against the use of client-side (i.e. JavaScript) for this job, as the change of style will be noticeable to the user, unless you hide the page completely until the page, the JS, and the new stylesheet is loaded. (The JS is only executed after page load.) So I'd go for PHP and a cookie here. If that's not possible I can write you an example using jQuery, if that's alright? – Bram Vanroy Jan 25 '18 at 12:21
  • Please do :) thanks – Hallam Curry Jan 25 '18 at 14:27

2 Answers2

3

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';
Adrian Frunza
  • 96
  • 2
  • 1
    Sweet i wasn't aware of the localStorage functionality :-) Would save some trouble in the future! – CodeAt30 Jan 31 '18 at 11:20
0

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.

Evgeny Melnikov
  • 952
  • 7
  • 13