Clever Geek Handbook

How to add multiple color schemes to one style sheet In HTML?

I want to know how to add multiple color schemes in one stylesheet that works onclick like wordpress, magento, etc. where themes are available in their stores with different colors.

+3


source to share


1 answer


Change the color schemes by switching the class to element body

. Make multiple versions in CSS referencing this class for all elements that change with color schemes.

body.colorscheme-dark {
    /* Changes that are inheritable */
    color: #fff;
}

body.colorscheme-dark #content #comment-section {
    /* Specific changes to this element */
    border-color: whitesmoke;
}

You can create unlimited circuits like this.



Now change them with a simple function:

function swapTheme(theme) {
    $(body).removeClass().addClass(theme);
}

jQuery for clarity, just comment if you want to do this in vanilla js.

+3


source






More articles:


All Articles