Conditionally enqueue a stylesheet based off of a javascript click event

Question

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.

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.