:root { --collection-1-color-mono-1000: rgba(0, 0, 0, 1); --collection-1-color-mono-0: rgba(255, 255, 255, 1); --collection-1-color-grey-200: rgba(228, 228, 228, 1); --collection-1-color-grey-100: rgba(244, 244, 244, 1); --collection-1-color-grey-300: rgba(212, 212, 212, 1); --collection-1-color-grey-600: rgba(82, 82, 91, 1); --collection-1-color-grey-800: rgba(39, 39, 39, 1); --collection-1-color-gradient-magenta: rgba(233, 97, 255, 1); --collection-1-color-gradient-cyan: rgba(0, 229, 229, 1); --collection-1-color-grey-900: rgba(24, 24, 24, 1); --collection-1-color-gradient-blue: rgba(0, 124, 239, 1); --collection-1-color-gradient-yellow: rgba(255, 238, 50, 1); --collection-1-color-gradient-red: rgba(255, 75, 50, 1); --collection-1-color-grey-400: rgba(161, 161, 161, 1); --collection-1-color-grey-50: rgba(250, 250, 250, 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-collection-1-mode="dark"] { --collection-1-color-gradient-magenta: rgba(233, 97, 255, 1); --collection-1-color-gradient-cyan: rgba(0, 229, 229, 1); --collection-1-color-gradient-blue: rgba(0, 124, 239, 1); --collection-1-color-gradient-yellow: rgba(255, 238, 50, 1); --collection-1-color-gradient-red: rgba(255, 75, 50, 1); } [data-collection-1-mode="light"] { --collection-1-color-gradient-magenta: rgba(234, 162, 236, 1); --collection-1-color-gradient-cyan: rgba(169, 190, 244, 1); --collection-1-color-gradient-blue: rgba(150, 205, 255, 1); --collection-1-color-gradient-yellow: rgba(255, 247, 161, 1); --collection-1-color-gradient-red: rgba(254, 177, 133, 1); }