JSFiddle - React, Tailwind, and code Playground

HTML

<p><input id='newcolor' value='abcabc'></input></p>
<button>go!</button>
<p id='message'></p>

CSS

.myColor {}

JavaScript

$("body").addClass('myColor');
$('button').click(function(e){
    e.preventDefault();
    var color=$('#newcolor').val();
    if(color.match(/^([0-9a-f]{3}){1,2}$/i) && color !== '000000'){
        changeCSSRule('.myColor','background-color','#'+color);
        $('#message').text('changed color to #'+color);
    } else {
        changeCSSRule('.myColor','background-color');
        $('#message').text('invalid input: "'+color+'"');
    }
});


function changeCSSRule(styleSelector,property,value) {
    for (var ssIdx = 0; ssIdx < document.styleSheets.length; ssIdx++) {
        var ss = document.styleSheets[ssIdx];
        var rules = ss.cssRules || ss.rules;
        if(rules){
            for (var ruleIdx = 0; ruleIdx < rules.length; ruleIdx++) {
                var rule = rules[ruleIdx];
                if (rule.selectorText == styleSelector) {
                    if(typeof value == 'undefined' || !value){
                        rule.style.removeProperty(property);
                    } else {
                        rule.style.setProperty(property,value);
                    }
                    return; // stops at FIRST occurrence of this styleSelector
                }
            }
        }
    }
}