1

I would like to add a button to my tumblr theme to toggle between two separate colour schemes - ie from black text on a white background to white text on a black background.

How can I add this function to my theme's html?

I have been unable to find any information so far.

1

You can add this functionality by editing the HTML for your site using Tumblr's editor. The easiest way would probably to use a setup as follows:

CSS (inside <style> tags):

body { background-color: black; color: white; }
body.inverted { background-color: white; color: black; }

/* You can also style sub elements by selecting `body.inverted elem` etc. */

JS (inside <script> tags):

function invertColors() {
    var bodyClasses = document.body.classList;
    if(bodyClasses.contains("inverted")) {
        bodyClasses.remove("inverted");
    } else {
        bodyClasses.add("inverted");
    }
}

HTML:

<button onclick="invertColors()">Invert this page's colors</button>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.