Instead of physically swapping CSS stylesheets from the head, why not create a global CSS selector for each of the themes within your stylesheet?
You can use onClick or onChange events on the radio buttons to know when they've been changed.
You can then use jQuery's addClass and removeClass functions to alter the class of the highest up (in terms of nesting) element that needs restyling, in my example I use the body tag. This will allow for dynamic changing of CSS.
$(document).ready(function() {
$('input[type=radio][name=theme]').change(function() {
if (this.value == 'darkTheme') {
$('body').removeClass('light');
$('body').addClass('dark');
}
else if (this.value == 'lightTheme') {
$('body').removeClass('dark');
$('body').addClass('light');
}
});
});
The styling is especially easy when you have SCSS or SASS for nesting:
.dark {
h1 {
color: black;
}
/* Dark Styles */
}
.light {
h1 {
color: grey;
}
/* Light Styles */
}
But standard CSS is fine too:
.dark h1 {
color: black;
}
.light h1 {
color: grey;
}
The second you change the class on the DOM element the browser will trigger a rerender and all of your theme styles will waterfall down and take effect.
This technique also allows you the freedom to put all of the selector stuff for each theme in its own css file (dark.css and light.css) and then you can simply import both in the head instead of swapping them.
All stylesheets in the head compile down to one set of styles for the browser anyways. The styles from each stylesheet will only be enabled when the correct class selector is on (in my example) the body tag.
