Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to add multiple color schemes in one stylesheet In HTML?

How to add multiple color schemes in one stylesheet In HTML?

Problem

I want to know how to add Multiple Color Schemes in one stylesheet which works onclick like wordpress, magento etc.. where themes are available on their stores with different colors.

Problem courtesy of: Salman Qureshi

Solution

Swap the Color Schemes by toggling a class on the body element. Make multiple versions in your CSS referencing this class for all elements that change with the 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 schemes like this.

Now change them with a simple function like this:

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

jQuery for clarity, just comment if you'd like that in vanilla js.

Solution courtesy of: JonJomate

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How to add multiple color schemes in one stylesheet In HTML?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×