:root { --new-primary-100: rgba(0, 32, 106, 1); --display-MD-semi-36px-font-family: "Degular", Helvetica; --display-MD-semi-36px-font-weight: 400; --display-MD-semi-36px-font-size: 36px; --display-MD-semi-36px-letter-spacing: -0.72px; --display-MD-semi-36px-line-height: 44px; --display-MD-semi-36px-font-style: normal; --text-LG-reg-18px-font-family: "Neue Haas Grotesk Text Pro", Helvetica; --text-LG-reg-18px-font-weight: 400; --text-LG-reg-18px-font-size: 18px; --text-LG-reg-18px-letter-spacing: 0px; --text-LG-reg-18px-line-height: 28px; --text-LG-reg-18px-font-style: normal; --DN-body-3-14pt-font-family: "Neue Haas Grotesk Text Pro", Helvetica; --DN-body-3-14pt-font-weight: 400; --DN-body-3-14pt-font-size: 14px; --DN-body-3-14pt-letter-spacing: 0.14px; --DN-body-3-14pt-line-height: 152.99999713897705%; --DN-body-3-14pt-font-style: normal; --display-SM-semi-30px-font-family: "Degular", Helvetica; --display-SM-semi-30px-font-weight: 400; --display-SM-semi-30px-font-size: 30px; --display-SM-semi-30px-letter-spacing: 0px; --display-SM-semi-30px-line-height: 38px; --display-SM-semi-30px-font-style: normal; --text-MD-reg-16px-font-family: "Neue Haas Grotesk Text Pro", Helvetica; --text-MD-reg-16px-font-weight: 400; --text-MD-reg-16px-font-size: 16px; --text-MD-reg-16px-letter-spacing: 0px; --text-MD-reg-16px-line-height: 24px; --text-MD-reg-16px-font-style: normal; --text-SM-reg-14px-font-family: "Neue Haas Grotesk Text Pro", Helvetica; --text-SM-reg-14px-font-weight: 400; --text-SM-reg-14px-font-size: 14px; --text-SM-reg-14px-letter-spacing: 0.14px; --text-SM-reg-14px-line-height: 20px; --text-SM-reg-14px-font-style: normal; --text-MD-semi-16px-font-family: "Neue Haas Grotesk Text Pro", Helvetica; --text-MD-semi-16px-font-weight: 500; --text-MD-semi-16px-font-size: 16px; --text-MD-semi-16px-letter-spacing: 0px; --text-MD-semi-16px-line-height: 24px; --text-MD-semi-16px-font-style: normal; --text-SM-semi-14px-font-family: "Neue Haas Grotesk Text Pro", Helvetica; --text-SM-semi-14px-font-weight: 500; --text-SM-semi-14px-font-size: 14px; --text-SM-semi-14px-letter-spacing: 0.14px; --text-SM-semi-14px-line-height: 20px; --text-SM-semi-14px-font-style: normal; --m3-schemes-on-surface: rgba(27, 27, 29, 1); --m3-schemes-on-surface-variant: var(--m3-palettes-neutral-variant-30); --m3-palettes-neutral-variant-30: rgba(56, 66, 80, 1); --m3-schemes-surface-container-high: rgba(248, 247, 247, 1); --m3-schemes-primary-fixed: rgba(220, 225, 255, 1); --m3-schemes-outline-variant: var(--m3-palettes-neutral-variant-80); --m3-palettes-neutral-variant-80: rgba(229, 231, 235, 1); --variable-collection-color-3: rgba(226, 231, 253, 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-m3-mode="light"] { --m3-schemes-on-surface: rgba(27, 27, 29, 1); --m3-schemes-on-surface-variant: var(--m3-palettes-neutral-variant-30); --m3-palettes-neutral-variant-30: rgba(56, 66, 80, 1); --m3-schemes-surface-container-high: rgba(248, 247, 247, 1); --m3-schemes-primary-fixed: rgba(220, 225, 255, 1); --m3-schemes-outline-variant: var(--m3-palettes-neutral-variant-80); --m3-palettes-neutral-variant-80: rgba(229, 231, 235, 1); } [data-m3-mode="dark"] { --m3-schemes-on-surface: rgba(228, 226, 227, 1); --m3-schemes-on-surface-variant: rgba(199, 198, 203, 1); --m3-palettes-neutral-variant-30: rgba(71, 70, 71, 1); --m3-schemes-surface-container-high: rgba(42, 42, 43, 1); --m3-schemes-primary-fixed: rgba(220, 225, 255, 1); --m3-schemes-outline-variant: rgba(70, 70, 75, 1); --m3-palettes-neutral-variant-80: rgba(201, 198, 198, 1); } [data-m3-mode="monochrome-LT"] { --m3-schemes-on-surface: rgba(27, 27, 27, 1); --m3-schemes-on-surface-variant: rgba(71, 71, 71, 1); --m3-palettes-neutral-variant-30: rgba(255, 255, 255, 1); --m3-schemes-surface-container-high: rgba(232, 232, 232, 1); --m3-schemes-primary-fixed: rgba(94, 94, 94, 1); --m3-schemes-outline-variant: rgba(198, 198, 198, 1); --m3-palettes-neutral-variant-80: rgba(255, 255, 255, 1); }