:root { --optimistic-gray80: rgba(63, 60, 54, 1); --mindful-brownwhite: rgba(255, 255, 255, 1); --mindful-brown80: rgba(79, 52, 34, 1); --heading-sm-extrabold-font-family: "Urbanist", Helvetica; --heading-sm-extrabold-font-weight: 800; --heading-sm-extrabold-font-size: 30px; --heading-sm-extrabold-letter-spacing: -0.3px; --heading-sm-extrabold-line-height: 38px; --heading-sm-extrabold-font-style: normal; --text-md-extrabold-font-family: "Urbanist", Helvetica; --text-md-extrabold-font-weight: 800; --text-md-extrabold-font-size: 16px; --text-md-extrabold-letter-spacing: -0.048000001907348634px; --text-md-extrabold-line-height: normal; --text-md-extrabold-font-style: normal; --m3-schemes-surface-container-high: rgba(236, 230, 240, 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-surface-container-high: rgba(236, 230, 240, 1); } [data-m3-mode="light-high-contrast"] { --m3-schemes-surface-container-high: rgba(236, 230, 238, 1); } [data-m3-mode="light-medium-contrast"] { --m3-schemes-surface-container-high: rgba(236, 230, 238, 1); } [data-m3-mode="dark"] { --m3-schemes-surface-container-high: rgba(43, 41, 48, 1); } [data-m3-mode="dark-high-contrast"] { --m3-schemes-surface-container-high: rgba(43, 41, 47, 1); } [data-m3-mode="dark-medium-contrast"] { --m3-schemes-surface-container-high: rgba(43, 41, 47, 1); } [data-m3-mode="monochrome-LT"] { --m3-schemes-surface-container-high: rgba(232, 232, 232, 1); } [data-m3-mode="monochrome-DT"] { --m3-schemes-surface-container-high: rgba(42, 42, 42, 1); } [data-m3-mode="pink-LT"] { --m3-schemes-surface-container-high: rgba(244, 228, 232, 1); } [data-m3-mode="pink-DT"] { --m3-schemes-surface-container-high: rgba(48, 40, 43, 1); } [data-m3-mode="rose-LT"] { --m3-schemes-surface-container-high: rgba(246, 228, 229, 1); } [data-m3-mode="rose-DT"] { --m3-schemes-surface-container-high: rgba(49, 40, 41, 1); } [data-m3-mode="red-LT"] { --m3-schemes-surface-container-high: rgba(247, 228, 226, 1); } [data-m3-mode="red-DT"] { --m3-schemes-surface-container-high: rgba(50, 40, 38, 1); } [data-m3-mode="orange-LT"] { --m3-schemes-surface-container-high: rgba(246, 229, 221, 1); } [data-m3-mode="orange-DT"] { --m3-schemes-surface-container-high: rgba(49, 40, 35, 1); } [data-m3-mode="yellow-LT"] { --m3-schemes-surface-container-high: rgba(241, 231, 217, 1); } [data-m3-mode="yellow-DT"] { --m3-schemes-surface-container-high: rgba(46, 41, 33, 1); } [data-m3-mode="chartreuse-LT"] { --m3-schemes-surface-container-high: rgba(234, 233, 220, 1); } [data-m3-mode="chartreuse-DT"] { --m3-schemes-surface-container-high: rgba(42, 43, 34, 1); } [data-m3-mode="green-LT"] { --m3-schemes-surface-container-high: rgba(229, 233, 225, 1); } [data-m3-mode="green-DT"] { --m3-schemes-surface-container-high: rgba(39, 43, 38, 1); } [data-m3-mode="teal-LT"] { --m3-schemes-surface-container-high: rgba(227, 234, 231, 1); } [data-m3-mode="teal-DT"] { --m3-schemes-surface-container-high: rgba(37, 43, 42, 1); } [data-m3-mode="cyan-LT"] { --m3-schemes-surface-container-high: rgba(228, 233, 235, 1); } [data-m3-mode="cyan-DT"] { --m3-schemes-surface-container-high: rgba(37, 43, 45, 1); } [data-m3-mode="blue-LT"] { --m3-schemes-surface-container-high: rgba(232, 231, 239, 1); } [data-m3-mode="blue-DT"] { --m3-schemes-surface-container-high: rgba(40, 42, 47, 1); } [data-m3-mode="indigo-LT"] { --m3-schemes-surface-container-high: rgba(234, 231, 239, 1); } [data-m3-mode="indigo-DT"] { --m3-schemes-surface-container-high: rgba(42, 41, 47, 1); } [data-m3-mode="purple-LT"] { --m3-schemes-surface-container-high: rgba(237, 230, 238, 1); } [data-m3-mode="purple-DT"] { --m3-schemes-surface-container-high: rgba(44, 41, 47, 1); }