Table of Content

So, I am trying to add in a very simple method of switching between 2 stylesheets/themes.

Switch Theme by Changing Classes

Say we have this:

<body class="dark">
  <button id="theme-toggle" title="I'm a tooltip!">Switch</button>
  <div class="sq">Foo</div>
</body>

and this:

body {
  background-color: #F7F7F7;
}

body.dark .sq {
  border: 1px solid #000;
  background: #ffd43b;
}   

body.light .sq {
  background-color: #fff;
  border: 2px dotted #000;
}

.sq {
  margin: 10px 0 0;
  height: 200px;
}

Save Status

now add JQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

toggle and save:

function toggleTheme() {
  $('body').toggleClass('dark').toggleClass('light');
  if($('body').hasClass('dark')) {
    localStorage.setItem('theme','dark');
  } else {
    localStorage.setItem('theme','light');
  }
}

$('#theme-toggle').click(function() {
  toggleTheme();
});

Load Status

function loadTheme() {
  var themeSet = localStorage.getItem('theme');
  if (themeSet == 'dark') {
    $('body').removeClass('light').addClass('dark');
  } else {
    $('body').removeClass('dark').addClass('light');
  }
}

<body class="dark">
  <!-- ... -->
  <script>
    loadTheme();
  </script>
  <!-- ... -->
</body>

`localStorage` Between Pages from Different Sites

But, do note that the localStorage isn't per page, it's by domain. That means www.abc.com and abc.com aren't considered as the same domain.

Best trick I know is to use iframes and postMessage API do get access to localStorage from external domain.

This technique is quite simple:

on you page you must create iframe to a domain from which you want to get data
your data domain need listen to message event: document.addEventListener ("message", handler, useCapture);
handler will be responsible for accessing localStorage and posting its content to source domain
your source domain may call handler function on data domain with postMessage API

For security of your data you can use HTTP header X-Frame-Options ALLOW-FROM uri

Switch Different Stylesheets

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://localhost:8888/demo/assets/themes/css/style1.css" type="text/css" media="all">

<button id="theme-toggle" title="I'm a tooltip!">Switch</button>

var defaultSS = '/assets/themes/css/style1.css',
    altSS = '/assets/themes/css/style2.css',
    hrefAttr;

$('#theme-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'));  
    }
  });
});

The Theme Toggler

Switch Theme by Changing Classes

Save Status

Load Status

localStorage Between Pages from Different Sites

Switch Different Stylesheets

`localStorage` Between Pages from Different Sites