I would like to use a different ccs file based on a javascript click event. The user will have a choice of color themes by clicking one of the colored buttons on the screen. I originally have it working by providing the linked css with an id that can be targeted with javascript. The link is in the HTML head tag of course. In WordPress though we enqueue the css file in the functions.php file and so I am not sure how to give the css file an ID to target it with the javascript. If anyone can help me out or point me in the right direction I will really appreciate it. I am open to all possibilities and I thank you all in advance. if you need me to elaborate more feel free to let me know.


1 Answer 1


I think you're working too hard!

My approach to this would be to load all the stylesheets, then use JS to manipulate the BODY with an appropriate modifying class.

An example

You have 3 stylesheets: default.css, red.css, blue.css. Load them all on page load.

default.css body { background: #ccc; color: black;}

red.css body.red { background: red; color: white;}

blue.css body.blue { background: blue; color: white;}

Then just use JS to modify the classes on the BODY tag and the CSS will follow.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.