2

I have two stylesheets mentioned in my header.php in this order:

<link rel="stylesheet" type="text/css" title="day" href="<?php echo $_layoutParams['root_css']; ?>day.css">
<link rel="stylesheet" type="text/css" title="night" href="<?php echo $_layoutParams['root_css']; ?>night.css">

I also have two buttons in my navigation bar, one for day, one for night. Each one triggers the same function, but with different parameters:

<a onclick="switch_style('day')..."
<a onclick="switch_style('night')..."

Finally, i have some javascript that alternates between the two stylesheets depending on which button in pressed and sets a cookie for 30 days and when no cookie is set, the style defaults to the day.css file. I also fire the switch_style function on top of each page after the DOM is loaded.

For the sake of clarity, 2 additional points. The JS used to alternate between stylesheets:

function switch_style ( css_title )
{
  var i, link_tag ;
  for (i = 0, link_tag = document.getElementsByTagName("link") ;
    i < link_tag.length ; i++ ) {
    if ((link_tag[i].rel.indexOf( "stylesheet" ) != -1) &&
      link_tag[i].title) {
      link_tag[i].disabled = true;
      if (link_tag[i].title == css_title) {
        link_tag[i].disabled = false;
      }
    }
    set_cookie( style_cookie_name, css_title,
      style_cookie_duration, style_domain );
  }
}

The JS i fire on top of each page looks like this:

<script>
document.addEventListener("DOMContentLoaded", function(event) {
    set_style_from_cookie();  
});
</script>

All works pretty well, but: When 'day' is selected, the transitioning between light pages is seamless. But when 'night' is activated, each new dark clicked page loads the day.css for a fraction of a second before being painted dark (flickers) which in the long run really gives me a headache.

When I invert the order of the stylesheets like so:

<link rel="stylesheet" type="text/css" title="night" href="<?php echo $_layoutParams['root_css']; ?>night.css">
<link rel="stylesheet" type="text/css" title="day" href="<?php echo $_layoutParams['root_css']; ?>day.css">

then I have the inverse problem, meaning that the transitioning between dark pages is seamless. But when 'day' is activated, each new light clicked page loads the night.css for a fraction of a second before being painted light.

Any idea how to correct the issue?

John Kerby
  • 83
  • 7
  • 1
    _"I also fire the switch_style function on top of each page **after** the DOM is loaded"_ - Why _after_ and not _before_? – Andreas May 11 '19 at 09:29
  • possible duplicate https://stackoverflow.com/questions/19844545/replacing-css-file-on-the-fly-and-apply-the-new-style-to-the-page – Carlos Alves Jorge May 11 '19 at 09:35
  • @CarlosAlvesJorge it's a similar problem with a different set up. The post you mention is only about live style switching without cookie state retaining. – John Kerby May 11 '19 at 10:30
  • @Andreas Care to show how to load it before the DOM? thanks – John Kerby May 11 '19 at 10:37
  • You've added code so your function is executed after the DOM is fully loaded - which is only necessary because the ` – Andreas May 11 '19 at 10:47
  • @That is correct. So how should i proceed to have the function executed *before* the DOM is loaded as you suggested? – John Kerby May 11 '19 at 11:02
  • @Andreas I tried to fire the function before the DOM is loaded. Doesn't work, reverts automatically to the light.css style. – John Kerby May 11 '19 at 12:06
  • @Andreas Your contribution here was not very efficient if i'm honest. It's been eight hours now and this is important to me. You may be a professional coder but i'm not. Instead of answering questions with questions or implying that i must understand a logic that is obvious to you, you could have simply provided an efficient way to solve my problem, provided you ever had one. Pretty disappointing from someone who has 16,915 points of reputation if you ask me. – John Kerby May 11 '19 at 20:28

1 Answers1

1

You can use Jquery to disable/enable CSS file by this way:

$('link[href="mystyle.css"]').prop('disabled', true);
$('link[href="mystyle.css"]').prop('disabled', false);
Jack Bashford
  • 43,180
  • 11
  • 50
  • 79
Rim Vo
  • 22
  • 2