So I have a jquery selector and I am chaining many methods as well as using a toggle

$(document).ready(function(){
    var initial = 'rgb(147, 233, 190)';
    var red     = 'rgb(255, 0, 0)';
    var black   = 'rgb(0, 0, 0)';

    $("header").css({
        "background-color": initial,
        "color": "white",
        "text-align": "center",
        "font-size" : "xx-large"
    }).click(function(){
        if( $(this).css('background-color') === initial ){
            $(this).css('background-color', red);
        }else if( $(this).css('background-color') === red ){
            $(this).css('background-color', black);
        }else{
            $(this).css("background-color", initial);
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header style="height:50px;"></header>