JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
        <li id="carbonTheme">carbon Theme </li>
        <li id="quartzTheme">Quartz Theme </li>
    </ul>


            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no results</p>
            <p>There are no...

CSS

body.carbon {
        font-family:Arial,Helvetica,sans-serif;
        font-size:8.5pt;
        width:inherit;
        min-width:100px;
        max-width:250px;
        margin:10px;
        background-color:#191919;
        color:#fff;
    }
    
    body.carbon #carbonTheme,body.carbon #quartzTheme {
        text-decoration:underline;
        color:blue;
        cursor:pointer;
    }
    
    ::-webkit-scrollbar {
        width:12px;
    }
    
    body.carbon::-webkit-scrollbar-track {
        background-color:#aaa;
    }
    
    body.carbon::-webkit-scrollbar-thumb {
        background-color:#000;
    }
    
    body.quartz {
        font-family:Arial,Helvetica,sans-serif;
        font-size:8.5pt;
        width:inherit;
        min-width:100px;
        max-width:250px;
        margin:10px;
    }
    
    body.quartz #carbonTheme,body.quartz #quartzTheme {
        text-decoration:underline;
        color:blue;
        cursor:pointer;
    }
    
    body.quartz::-webkit-scrollbar-track {
        background-color:#333;
    }
    
    body.quartz::-webkit-scrollbar-thumb {
        background-color:#fff;
    }
    
    .constraint {
        height:100px;
        overflow-y:scroll;
    }

JavaScript

$('body').addClass('carbon');
$('#carbonTheme').on('click', function(){
    $('body').removeClass('quartz');
    $('body').addClass('carbon');
});
$('#quartzTheme').on('click', function(){
    $('body').removeClass('carbon');
    $('body').addClass('quartz');
});