JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script>
<div class="main bg1"> 
<h2>Lorem ipsum dolor sit</h2>
</div>

<p>Choose a theme:</p>
<ul class="theme-switcher">
<li class="green">&nbsp;</li>
<li class="purple">&nbsp;</li>
<li class="rust">&nbsp;</li>
</ul>

CSS

body {color:#000; font-family: verdana;}

h2 {font-size: 1.3em; padding: 10px; margin: 10px; color: #fff}

.main { width:400px;}

.bg1 {background: #a0b544;}
.bg2 { background-color:#5b5e7a;}
.bg3 { background-color:#c64b16;}



ul.theme-switcher li
{ width:20px; height:20px; display:block; margin:1px; cursor:pointer; float:left;
}

.green {background-color:  #a0b544;}
.purple {background-color:#5b5e7a;}
.rust {background-color:#c64b16;}

JavaScript

$(document).ready(function(){
    
/* 
On click the theme is changed for the image and the logo. So far I have JQuery cookie working to keep the background color that was selected even after page reload. 

To do: retain the selected theme logo using coookie.
*/
    
    
    $("li.green").click( function(){ $
        (".main").removeClass('bg2 , bg3').addClass("bg1");
        $.cookie('mycookie','bg1');
        $.cookie('mycookieimg','logo-green');
    });

    $("li.purple").click( function(){ $
        (".main").removeClass("bg1 , bg3").addClass("bg2");
        $.cookie('mycookie','bg2');
        $.cookie('mycookieimg','logo-purple');
    });

    $("li.rust").click( function(){ $
        (".main").removeClass("bg1 , bg2").addClass("bg3");
        $.cookie('mycookie','bg3');
        $.cookie('mycookieimg','logo-rust');
    }); 
    
    if ($.cookie('mycookie')) {
        var $imgsrc = $.cookie('mycookieimg');
        $('.main').addClass($.cookie('mycookie'));
    }

});