:root { --couleur-BLANC: rgba(255, 253, 241, 1); --couleur-NOIR: rgba(31, 18, 6, 1); --couleur-BLEU: rgba(24, 114, 121, 1); --colors-primary: rgba(31, 18, 6, 1); --colors-primary-50: rgba(31, 18, 6, 0.5); --colors-secondary: rgba(255, 255, 240, 1); --colors-rouge: rgba(85, 145, 127, 1); } /* To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so: You can apply the theme on any DOM node, not just the `body` */ [data-couleur-mode="white"] { --couleur-BLANC: rgba(255, 253, 241, 1); --couleur-NOIR: rgba(31, 18, 6, 1); } [data-couleur-mode="black"] { --couleur-BLANC: rgba(31, 18, 6, 1); --couleur-NOIR: rgba(255, 253, 241, 1); } [data-colors-mode="light"] { --colors-primary: rgba(31, 18, 6, 1); --colors-primary-50: rgba(31, 18, 6, 0.5); --colors-secondary: rgba(255, 255, 240, 1); --colors-rouge: rgba(85, 145, 127, 1); } [data-colors-mode="dark"] { --colors-primary: rgba(255, 255, 240, 1); --colors-primary-50: rgba(85, 145, 127, 0.5); --colors-secondary: rgba(31, 18, 6, 1); --colors-rouge: rgba(85, 145, 127, 1); } [data-colors-mode="print"] { --colors-primary: rgba(0, 0, 0, 1); --colors-primary-50: rgba(255, 255, 255, 1); --colors-secondary: rgba(255, 255, 255, 1); --colors-rouge: rgba(255, 255, 255, 1); }