CSS Stylesheet Switching via adding cookies

Question

Code I'm using, works great but it doesn't stick when navigating around the site - because it needs to trigger a cookie - is there a way to do that? Here's the entire code I'm using:

<!DOCTYPE html>
<html>
<head>
<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css">
<script>
function swapStyleSheet(sheet){
    document.getElementById('pagestyle').setAttribute('href', sheet);
}
</script>
</head>
<body>
<h2>Javascript Change StyleSheet Without Page Reload</h2>
<button onclick="swapStyleSheet('dark.css')">Dark Style Sheet</button>
<button onclick="swapStyleSheet('blue.css')">Blue Style Sheet</button>
<button onclick="swapStyleSheet('default.css')">Default Style Sheet</button>
</body>
</html>

You'll need to be able to add the class on the server side so you don't get a flash when the page is loaded and then the class. I assume you're overriding the default styles instead of replacing it? — Nathaniel Flick, Apr 28 '21 at 19:48
Yes, I've already added the stylesheets to my server - that part's all set. Nothing flashes when they're cued by the buttons. They look great. They don't stick though when you refresh the page, because there's no JS cookies being triggered. Not sure how to do that. — DannyMC01, Apr 28 '21 at 19:56
No I mean not just the css files but the class has to be added to the view before the html loads in the DOM. This you won't want to run with cookies, cookies provide the information too late. — Nathaniel Flick, Apr 28 '21 at 19:58

Liftoff · Answer 1 · 2021-04-28T20:15:26.493

1

Nathaniel is correct in his comment that JS executes after the page is loaded, so you'll see a noticeable flicker if you apply the style after page load.

However, for the sake of answering your question, you can get/set a cookie with some pretty simple javascript.

function setCookie(name, value, days)
{
  var d = new Date();
  d.setTime(d.getTime() + days * 24 * 60 * 60 * 1000);
  document.cookie = name + "=" + value + "; expires=" + d.toUTCString() + "; path=/";
}

function getCookie(name)
{
  var cookies = document.cookie.split(";");
  for(var i = 0; i < cookies.length; i++)
  {
    var ck = cookies[i].trim().split("=");
    if(ck[0] == name)
      return ck[1];
  }
  
  return false;
}

Here's an example with your code:

window.onload = function(){
  var viewmode = getCookie("viewmode");
  if(viewmode)
    document.getElementById('pagestyle').setAttribute('href', viewmode);
}

function swapStyleSheet(sheet){
  document.getElementById('pagestyle').setAttribute('href', sheet);
  setCookie("viewmode", sheet, 30);
}

function setCookie(name, value, days)
{
  var d = new Date();
  d.setTime(d.getTime() + days * 24 * 60 * 60 * 1000);
  document.cookie = name + "=" + value + "; expires=" + d.toUTCString() + "; path=/";
}

function getCookie(name)
{
  var cookies = document.cookie.split(";");
  for(var i = 0; i < cookies.length; i++)
  {
    var ck = cookies[i].trim().split("=");
    if(ck[0] == name)
      return ck[1];
  }
  
  return false;
}

<!DOCTYPE html>
<html>
<head>
<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css">
</head>
<body>
<h2>Javascript Change StyleSheet Without Page Reload</h2>
<button onclick="swapStyleSheet('dark.css')">Dark Style Sheet</button>
<button onclick="swapStyleSheet('blue.css')">Blue Style Sheet</button>
<button onclick="swapStyleSheet('default.css')">Default Style Sheet</button>
</body>
</html>

edited Apr 28 '21 at 20:15

answered Apr 28 '21 at 20:05

Liftoff

24,717
13
66
119

Hey Dave, I added that in - didn't work brother :/ – DannyMC01 Apr 28 '21 at 20:09
What values did you pass into the setCookie function? – Liftoff Apr 28 '21 at 20:12
I didn't, I just copied and pasted it in the head underneath the first function – DannyMC01 Apr 28 '21 at 20:15
You have to actually call the functions. See my edit. I put it in your code. – Liftoff Apr 28 '21 at 20:15
Trying to copy and past it here but it's saying the comment is too long - Oi – DannyMC01 Apr 28 '21 at 20:17
Take the top box of the second code block and put it inside a ` – Liftoff Apr 28 '21 at 20:18
Oh wow, I see that flicker now, that you guys were talking about. It works now (the onclick CSS change sticks, but only for that one page - anyway to make it global? What it is is some box-shadow under the main menu - I just made a second color so when folks browse they can have better dark theme accent lighting. – DannyMC01 Apr 28 '21 at 20:24
You'll have to copy the window.onload and the two cookie functions to every page for it to work. This can be easily done with a single header file (if you're using a server-side language like PHP, for example), but a simple copy/paste will work for now. – Liftoff Apr 28 '21 at 20:26
I can add a file to server, any specific way to go about it? – DannyMC01 Apr 28 '21 at 20:31
Depends on the server you're running. What language is it? PHP? – Liftoff Apr 28 '21 at 20:32
Yes, the server's using PHP. CPanel/Filemanager > (Highly modded wordpress install) – DannyMC01 Apr 28 '21 at 20:34
Then put the code you want to reuse inside a single php file wherever you want on the server, and then on every page where you want to use it, call `include_once "/path/to/your/file.php";` FYI, since you're using PHP, you can also do cookies with `setcookie(name, value)` and get with `$_COOKIE["name"]` which would eliminate your flicker. – Liftoff Apr 28 '21 at 20:37
Within Wordpress too, there's a global file called functions.php that applies whatever functions are written there to the entire site, should I add anything there to skip over the manual adding to each page..? – DannyMC01 Apr 28 '21 at 20:46

CSS Stylesheet Switching via adding cookies

1 Answers1

Linked