:root { --foundationbluelighter: rgba(178, 187, 198, 1); --foundation-bluelight-hover: rgba(163, 173, 187, 1); --foundationbluelight-active: rgba(144, 157, 173, 1); --foundationbluenormal: rgba(84, 104, 129, 1); --foundation-bluenormal-hover: rgba(71, 88, 110, 1); --foundationbluenormal-active: rgba(61, 76, 94, 1); --foundationbluedark: rgba(29, 36, 45, 1); --foundation-bluedark-hover: rgba(21, 26, 32, 1); --foundation-bluedark-active: rgba(9, 11, 14, 1); --colors-labels-vibrant-controls-primary: rgba(26, 26, 26, 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-colors-mode="light"] { --colors-labels-vibrant-controls-primary: rgba(26, 26, 26, 1); } [data-colors-mode="dark"] { --colors-labels-vibrant-controls-primary: rgba(245, 245, 245, 1); } [data-colors-mode="IC-light"] { --colors-labels-vibrant-controls-primary: rgba(0, 0, 0, 1); } [data-colors-mode="IC-dark"] { --colors-labels-vibrant-controls-primary: rgba(255, 255, 255, 1); }