:root { --white: rgba(255, 255, 255, 1); --brand-colour: rgba(191, 215, 48, 1); --brand-blue: rgba(92, 187, 212, 1); --brand-orange: rgba(252, 101, 55, 1); --gray: rgba(140, 140, 140, 1); --black: rgba(0, 0, 0, 1); --brown: rgba(207, 158, 71, 1); --labelsprimary: rgba(0, 0, 0, 1); --materialsultrathin: rgba(191, 191, 191, 0.44); --labelsprimary-dark: rgba(255, 255, 255, 1); --materialsultrathin-dark: rgba(37, 37, 37, 0.55); --shadow-1: 2px 4px 5px 1px rgba(0, 0, 0, 0.25); --outline-hover: 2px 2px 4px 0px rgba(0, 0, 0, 0.15); --GTS-BG-icons-grey: rgba(228, 228, 228, 1); --GTS-selected-grey: rgba(246, 246, 246, 1); --GTS-grey: rgba(140, 140, 140, 1); --GTS-black: rgba(0, 0, 0, 1); --GTS-light-grey-BG: rgba(248, 248, 248, 1); --GTS-p1: rgba(163, 184, 42, 1); --GTS-white: rgba(255, 255, 255, 1); --GTS-p2: rgba(92, 187, 212, 1); --GTS-exclusive: rgba(252, 101, 55, 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-GTS-mode="light"] { --GTS-BG-icons-grey: rgba(228, 228, 228, 1); --GTS-selected-grey: rgba(246, 246, 246, 1); --GTS-grey: rgba(140, 140, 140, 1); --GTS-black: rgba(0, 0, 0, 1); --GTS-light-grey-BG: rgba(248, 248, 248, 1); --GTS-p1: rgba(163, 184, 42, 1); --GTS-white: rgba(255, 255, 255, 1); --GTS-p2: rgba(92, 187, 212, 1); } [data-GTS-mode="dark"] { --GTS-BG-icons-grey: rgba(58, 58, 58, 1); --GTS-selected-grey: rgba(7, 7, 7, 1); --GTS-grey: rgba(79, 79, 79, 1); --GTS-black: rgba(255, 255, 255, 1); --GTS-light-grey-BG: rgba(15, 15, 15, 1); --GTS-p1: rgba(191, 215, 48, 1); --GTS-white: rgba(0, 0, 0, 1); --GTS-p2: rgba(103, 204, 231, 1); }