-2

I made a light and dark css for my web. Light css as default and dark css as alternative. It works perfectly with the help of JavaScript. Now the problem is, if a user select dark version and refresh the page or go to next page, it goes back to light css again. I need my web to load dark css as default css if a user select dark css. How will be it made? Is it with the help of JavaScript? If yes please give the codes too.

Thanks

Shamshid
  • 403
  • 3
  • 11
  • 20 seconds of research is all it takes to find a solution for your question. – Banana Mar 07 '16 at 19:13
  • @Banana 2 days research couldn't find anything about this. If you could find it please help me out. Thanks – Shamshid Mar 07 '16 at 19:16
  • Investigate cookies. – Quentin Mar 07 '16 at 19:17
  • [Here](http://stackoverflow.com/questions/12421055/keep-the-changes-of-a-web-page-after-refresh) is one. [Here](http://stackoverflow.com/questions/34132502/keeping-js-changes-on-dom-after-refresh) is another one. [Here](http://stackoverflow.com/questions/23851413/how-to-keep-the-changes-made-to-dom-by-javascript-jquery-on-page-refresh) is a third one. and [Here](http://stackoverflow.com/questions/16722910/keep-the-same-colour-after-page-refresh) is 4th one. – Banana Mar 07 '16 at 19:18
  • And another from CSS Tricks - [A webpage with alternate user-selectable stylesheets](https://css-tricks.com/examples/AlternateStyleSheets/) – Yogi Mar 07 '16 at 19:25

2 Answers2

1

If you know how to change CSS via javascript (described like in Replacing css file on the fly (and apply the new style to the page)), it is 80% done. Now you must save user selection of CSS somewhere, for example, using cookies. If you use jquery.cookie.js, try to create cookie:

$.cookie('myvalue', 'here is value', { expires: 30 });

and to remove cookie:

$.removeCookie('myvalue', { path: '/' });

Hope, it'll help!

Community
  • 1
  • 1
Ray Nelius
  • 11
  • 2
1

You have to save this information in browser cookies. Whenever, a user accesses the site, check in the cookies if he prefers the darker version. To set the cookie use :
document.cookie = "style=black; expires=Thu, 01 Jan 1970 00:00:00 UTC";

Then check the cookie when the site is loaded using this function:- [credits : w3schools] . . function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for(var i=0; i<ca.length; i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1); if (c.indexOf(name) == 0) return c.substring(name.length,c.length); } return ""; }

Sachin
  • 3,350
  • 2
  • 17
  • 29