JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tema">
    
    <header id="navContainer">
        <select name="item-0-status" id="id_item-0-status">
            <option value="">-- Mudar de tema --</option>
            <option value="1">Tema 1 - Verde</option>
            <option value="2">Tema 2 - Azul</option>
            <option value="3">Tema 3 - Laranja</option>
        </select>
        <ul class="navLinks">
            <li><a href="#sec1">1ª Secção</a></li>
            <li><a href="#sec2">2ª Secção</a></li>
            <li><a href="#sec3">3ª Secção</a></li>
        </ul>
    </header>
    
    <div class="container" id="sec1">
    <button class='btn btn-primary'>botão principal</button>
        <h2>Bem-vindo ao site!</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices rutrum ligula id pharetra. Nulla non ex euismod, sagittis diam semper, porttitor nulla. Vivamus semper, nisi et pellentesque venenatis, dolor risus viverra quam, id pretium nunc ante sit amet dolor. Nulla in metus pellentesque, cursus ipsum eget</p>
        
        <div class="rdContainer">
            <div class="randomBox"></div>
        </div>
        
    </div>
    <div class="container" id="sec2">
        <img class="imagem" src="http://i.stack.imgur.com/7pORh.jpg">
    </div>
    <div class="container" id="sec3"></div>
</div>

CSS

body {font-family: sans-serif;}

#navContainer {
    position: fixed;
    left: 0;
    top: 0;
    padding: 10px 0;
    width: 100%;
    background-color: #fff;
    border-bottom: 1px solid #000;
}
.navLinks {
    margin: 0;
    padding: 0;
    display: inline-block;
    float: right;
}
.navLinks li {
    display: inline-block;
    padding: 0 10px;
}

.navLinks a {
    font-weight: bold;
}
.t1 .navLinks a {color: green;}
.t2 .navLinks a {color: cornflowerblue;}
.t3 .navLinks a {color: orange;}
.tema #navContainer {border-top:4px solid #000;}
.t1 #navContainer {border-top:4px solid green;}
.t2 #navContainer {border-top:4px solid cornflowerblue;}
.t3 #navContainer {border-top:4px solid orange;}

select option, .tema { background-color:white;}
.tema.t1 {
    background-color:green;
    color:#fff;
}
.tema.t2 {
    background-color:cornflowerblue;
}
.tema.t3 {
    background-color:orange;
}

.tema {
    min-height: 100px;
    border: 1px solid #C2C2C2;
    margin-top: 15px;
    padding: 10px;
}
.container {
    height: 80vh;
    border: 1px solid #000;
    padding: 0 10px;
    margin: 30px;
}

.imagem {
    width: 200px;
    height: auto;
}

.tema .randomBox {
    text-align: center;
    margin: 20px;
    border: 6px solid #000;
    color: #000;
    font-size: 35px;
    font-weight: bold;
}
.tema .randomBox:after{content:'Neutro';}
.t1 .randomBox {
    text-align: center;
    margin: 20px;
    border: 6px solid #fff;
    color: #fff;
    font-size: 35px;
    font-weight: bold;
}
.t1 .randomBox:after{content:'Verde';}
.t2 .randomBox {
    text-align: center;
    margin: 20px;
    border: 6px solid #fff;
    color: #fff;
    font-size: 35px;
    font-weight: bold;
}
.t2 .randomBox:after{content:'Azul';}
.t3 .randomBox {
    text-align: center;
    margin: 20px;
    border: 6px solid #fff;
    color: #fff;
    font-size: 35px;
    font-weight: bold;
}
.t3 .randomBox:after{content:'Laranja';}

.tema #sec3 {
    background:url(http://i.stack.imgur.com/iKpxb.jpg) center...

JavaScript

$('select[id$=-status][id^=id_item-]').change(function (){
    var color = $(this).find('option:selected').val();
    
    $(".tema").removeClass('t1 t2 t3').addClass('t' + $(this).find('option:selected').val());
}).change();