Ajouter un bouton pour basculer entre les jeux de couleurs sur Tumblr?

Question

J'aimerais ajouter un bouton à mon thème tumblr pour basculer entre deux jeux de couleurs distincts - du texte noir sur fond blanc au texte blanc sur fond noir.

Comment puis-je ajouter cette fonction au code HTML de mon thème?

Je n'ai pu trouver aucune information jusqu'à présent.

Answer 1

Vous pouvez ajouter cette fonctionnalité en modifiant le code HTML de votre site à l'aide de l'éditeur de Tumblr. Le moyen le plus simple serait probablement d'utiliser une configuration comme suit:

CSS (à l'intérieur des balises <style>]):

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 (à l'intérieur des balises <script>):

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>