:root { --h1-font-family: "Manrope", Helvetica; --h1-font-weight: 800; --h1-font-size: 28px; --h1-letter-spacing: 0px; --h1-line-height: normal; --h1-font-style: normal; --h2-font-family: "Manrope", Helvetica; --h2-font-weight: 700; --h2-font-size: 22px; --h2-letter-spacing: 0px; --h2-line-height: normal; --h2-font-style: normal; --h3-font-family: "Manrope", Helvetica; --h3-font-weight: 700; --h3-font-size: 18px; --h3-letter-spacing: 0px; --h3-line-height: normal; --h3-font-style: normal; --h4-font-family: "Manrope", Helvetica; --h4-font-weight: 500; --h4-font-size: 15px; --h4-letter-spacing: 0px; --h4-line-height: normal; --h4-font-style: normal; --h5-font-family: "Manrope", Helvetica; --h5-font-weight: 500; --h5-font-size: 12px; --h5-letter-spacing: 0px; --h5-line-height: normal; --h5-font-style: normal; --volume-form-block: 2px 2px 6px 0px rgba(211, 223, 240, 0.9), -2px -2px 4px 0px rgba(255, 255, 255, 0.9); --notification: 0px 0px 14px 0px rgba(211, 223, 240, 0.9); --variable-collection-boolean: initial; --variable-collection-palette-primary-light-txt: rgba(254, 254, 254, 1); --variable-collection-palette-contrast: rgba(255, 255, 255, 1); --variable-collection-palette-background: rgba(245, 247, 250, 1); --variable-collection-palette-accent: rgba(0, 122, 255, 1); --variable-collection-palette-secondary-first-fill: rgba(0, 122, 255, 0.1); --variable-collection-palette-secondary-second-fill: rgba(0, 122, 255, 0.2); --variable-collection-palette-secondary-disabled-fill: rgba( 255, 255, 255, 0.5 ); --variable-collection-palette-primary-first-fill: rgba(0, 95, 204, 1); --variable-collection-palette-primary-second-fill: rgba(0, 78, 170, 1); --variable-collection-palette-primary-disabled-txt: rgba(160, 160, 160, 1); --variable-collection-palette-primary-disabled-backround: rgba( 224, 224, 224, 1 ); --variable-collection-palette-hint-txt: rgba(140, 144, 149, 1); --variable-collection-palette-basic-txt: rgba(32, 33, 36, 1); --variable-collection-palette-error-txt-border: rgba(255, 59, 48, 1); --variable-collection-palette-error-backround: rgba(255, 245, 245, 1); --variable-collection-palette-dark-toogle-backround: rgba(58, 58, 58, 1); --variable-collection-palette-light-border: rgba(210, 219, 224, 1); --variable-collection-small-icon: 14px; --variable-collection-meduim-icon: 24px; --variable-collection-volume-2-2-4: rgba(255, 255, 255, 0.9); --variable-collection-volume-2-2-6: rgba(211, 223, 240, 0.9); --variable-collection-active-input-glow: rgba(0, 122, 255, 0.3); --variable-collection-error-input-glow: rgba(255, 59, 48, 0.3); --Palette-Secondary---First-fill: rgba(0, 122, 255, 0.10); --Accent-Stroke: linear-gradient(180deg, var(--Palette-Accent), var(--Palette-Secondary---First-fill)); } /* 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-variable-collection-mode="light"] { --variable-collection-palette-contrast: rgba(255, 255, 255, 1); --variable-collection-palette-background: rgba(245, 247, 250, 1); --variable-collection-palette-accent: rgba(0, 122, 255, 1); --variable-collection-palette-secondary-first-fill: rgba(0, 122, 255, 0.1); --variable-collection-palette-secondary-second-fill: rgba(0, 122, 255, 0.2); --variable-collection-palette-secondary-disabled-fill: rgba( 255, 255, 255, 0.5 ); --variable-collection-palette-primary-first-fill: rgba(0, 95, 204, 1); --variable-collection-palette-primary-second-fill: rgba(0, 78, 170, 1); --variable-collection-palette-basic-txt: rgba(32, 33, 36, 1); --variable-collection-palette-light-border: rgba(210, 219, 224, 1); --variable-collection-volume-2-2-4: rgba(255, 255, 255, 0.9); --variable-collection-volume-2-2-6: rgba(211, 223, 240, 0.9); --variable-collection-active-input-glow: rgba(0, 122, 255, 0.3); --variable-collection-error-input-glow: rgba(255, 59, 48, 0.3); } [data-variable-collection-mode="dark"] { --variable-collection-palette-contrast: rgba(32, 33, 36, 1); --variable-collection-palette-background: rgba(18, 20, 23, 1); --variable-collection-palette-accent: rgba(76, 130, 255, 1); --variable-collection-palette-secondary-first-fill: rgba(159, 188, 255, 0.24); --variable-collection-palette-secondary-second-fill: rgba(159, 188, 255, 0.5); --variable-collection-palette-secondary-disabled-fill: rgba( 255, 255, 255, 0.2 ); --variable-collection-palette-primary-first-fill: rgba(109, 153, 255, 1); --variable-collection-palette-primary-second-fill: rgba(159, 188, 255, 1); --variable-collection-palette-basic-txt: rgba(218, 218, 218, 1); --variable-collection-palette-light-border: rgba(52, 53, 58, 1); --variable-collection-volume-2-2-4: rgba(33, 33, 33, 0.9); --variable-collection-volume-2-2-6: rgba(0, 0, 0, 0.9); --variable-collection-active-input-glow: rgba(76, 130, 255, 0.3); --variable-collection-error-input-glow: rgba(236, 134, 134, 0.72); }