Alter the color themes by toggling a class on the body
tag. Create multiple variations in your CSS that correspond to this class for all elements affected by the color changes.
body.colorscheme-dark {
/* Modifications applied across */
color: #fff;
}
body.colorscheme-dark #content #comment-section {
/* Specific alterations for this element */
border-color: whitesmoke;
}
You have the ability to generate endless themes using this method.
Easily switch between themes with a straightforward function like the one below:
function swapTheme(theme) {
$(body).removeClass().addClass(theme);
}
jQuery is used here for clarity, but feel free to request vanilla JavaScript if preferred.