<div class="head">HEADER</div>
    <div class="wrapper">
         <div class="leftPanel">
             <!-- link untuk ganti themes -->
             <a href="#" class="biru">Biru</a> |
             <a href="#" class="merah">Merah</a> |
             <a href="#" class="hijau">Hijau</a>
             <!-- end links -->
            <h3>Judul 1</h3>
            <div class="contentModul">Content</div>
        </div> 
        <div class="rightPanel">
          <h3>Detail</h3>
          <div class="contentModul">
            Content Kanan
          </div>
        </div>
    </div>

body {
    font-family:arial;
    font-size:11px;
}
 
h3, ul, h4 {
   padding:0px;
   margin:0px;
}
.head {
   width:800px;
   border:1px solid blue;
   height:100px;
   background:#315091;
}
.wrapper{
   width:800px;
   float:left;
   border:1px solid blue;
}
.leftPanel {
   float:left;
   width:200px;
   border:1px dotted blue;  
   margin:5px;
}
 
.leftPanel h3 {
   background:#929db5;
}
 
.rightPanel{
   float:left;
   width:550px;
   border:1px dotted blue;
   margin:5px;
}
 
.rightPanel h3 {
   background:#929db5;
}

.merah .head{
    border:1px solid #d06c36;
    background:#d06c36;
}
.merah .leftPanel,.merah .rightPanel{
    border:1px dotted red;
}
.merah .leftPanel h3, .merah .rightPanel h3{
   background:#dba07f;
}
.hijau .head{
   border:1px solid #8fc960;
   background:#8fc960;
}
.hijau .leftPanel,.hijau .rightPanel{
   border:1px dotted green;
}
.hijau .leftPanel h3, .hijau .rightPanel h3{
   background:#b6d1a0;
}

<script>
$(document).ready(function(){
  $(".leftPanel > a").click(function(){
            $('body').attr('class',$(this).attr('class')); 
    } )
})
</script>