Toggle between two stylesheets

This is an alternative solution to consider if, for some reason, Rory's solution cannot be applied. It's ideal to simply toggle a body class and use this class as a base selector - I've recently applied this method for an application switching between a dark and light theme, then storing it to localStorage so that the changes are "remembered" e.g:

<style>
    .nocturnal-theme p {
       background: black;
       color: white;
    }

    .diurnal-theme p {
       background: white;
       color: black;
    }
</style>

<script>
/* Toggle Theme */
jQuery('.toggle-theme').on('click', function(){
    if(jQuery(this).hasClass('toggle-diurnal')) {
        jQuery('body').removeClass('diurnal-theme').addClass('nocturnal-theme');
        localStorage.setItem('theme','nocturnal-theme');
    } else if(jQuery(this).hasClass('toggle-nocturnal')) {
        jQuery('body').removeClass('nocturnal-theme').addClass('diurnal-theme');
        localStorage.setItem('theme','diurnal-theme');
    }
    var themeSet = localStorage.getItem('theme');
});
</script>

Summary

  1. The below solution stores the relative filepaths (typical of standard Wordpress installations) to variables (you may not always have unique identifiers (id attribute values) available to use, and since editing core files, to include one, is not considered good practice (for reasons that won't be touched on here) it may be better to store these filepaths in variables);
  2. On .click() of '#css_toggle', the .each() method is used to loop through all instances of stylesheets (of which there would most likely be a few), it also allows us to redefine the scope of $(this) which will prove helpful moving forward;
  3. Through each iteration of the loop, the link currently in scope has its href attribute stored in a variable;
  4. The stored value of this attribute is then compared with the relative filepaths we stored in variables previously
  5. If they are found to contain these stored values, the href attribute of the link element in question is updated accordingly

Code Snippet Demonstration:

var defaultSS = '/wp-content/themes/RIP/assets/css/style.css',
    altSS = '/wp-content/themes/RIP/assets/css/style1.css',
    hrefAttr;

$('#css_toggle').click(function () {

  $('link').each(function(){
    hrefAttr = $(this).attr('href');
    if (hrefAttr.indexOf(defaultSS) >= 0) {
      $(this).attr('href', altSS);
      
      console.log('Was:',hrefAttr);
      console.log('Now:',$(this).attr('href'));
      
    } else if (hrefAttr.indexOf(altSS) >= 0) {
      $(this).attr('href', defaultSS);
      
      console.log('Was:',hrefAttr);
      console.log('Now:',$(this).attr('href'));
      
    }
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://localhost:8888/rip-access/wp-content/themes/RIP/assets/css/style.css" type="text/css" media="all">

<button id="css_toggle" title="I'm a tooltip!">Text</button>

A better, and more reliable, solution would be to use a single stylesheet and alternate the styling by making the rules depend on a class on the body. You can then just toggle that class when needed, something like this:

$('#css_toggle').click(function() {
  $('body').toggleClass('default highlight');
});
body.default .sq {
  border: 1px solid #C00;
}   

body.highlight .sq {
  background-color: #CC0;
  border: 2px dotted #C00;
}

.sq {
  margin: 10px 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="default">
  <button id="css_toggle" title="I'm a tooltip!">Text</button>
  <div class="sq">
    Foo
  </div>
</body>

There is the requested simple example:

HTML:

<link rel="stylesheet" type="text/css" id='styles' href='path_to_your_style_1'>
<button id="css_toggle" title="I'm a tooltip!">Text</button>

JS:

 $('#css_toggle').click(function () {
  if ($("link[id='styles']").attr('href') == 'path_to_your_style_1'){
    $("link[id='styles']").attr('href', 'path_to_your_style_2');
  } else { 
    $("link[id='styles']").attr('href', 'path_to_your_style_1');
  }
});

Tags:

Css

Jquery

Recent Posts