JSFiddle - React, Tailwind, and code Playground

by sridhar reddy

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="">
<div class="imagePath"  src="/imgdark/">
    hello my name is Sample
</div>
</div>
<button class="themeColor" id="darkTheme">
    change theme
</button>

<script>
	$('.themeColor').click(function () {
        var getId = $(this).attr('id');
        var imagePath = $('.imagePath');
        if (getId === 'darkTheme') {

            imagePath.attr('src', function (index, attr) {
                return attr.replace('/img/', '/imgdark/');
            });
            $(this).attr('id',  'lightTheme');
        } else if (getId === 'lightTheme') {
            imagePath.attr('src', function (index, attr) {
                return attr.replace('/imgdark/', '/img/');
            });
            $(this).attr('id',  'darkTheme');
        }
    });
</script>

CSS

div[src="/img/"] {
    color: red;
}
div[src="/imgdark/"] {
    color: black;
}
#darkTheme {
    color: #009688;
}
#lightTheme {
     color: #4c4c4c;   
}