:root { --subtitle-font-family: "Inter", Helvetica; --subtitle-font-weight: 400; --subtitle-font-size: 32px; --subtitle-letter-spacing: 0px; --subtitle-line-height: 120.00000476837158%; --subtitle-font-style: normal; --m3-label-medium-emphasized-font-family: "Roboto", Helvetica; --m3-label-medium-emphasized-font-weight: 600; --m3-label-medium-emphasized-font-size: 12px; --m3-label-medium-emphasized-letter-spacing: 0.5px; --m3-label-medium-emphasized-line-height: 16px; --m3-label-medium-emphasized-font-style: normal; --m3-body-large-font-family: "Roboto", Helvetica; --m3-body-large-font-weight: 400; --m3-body-large-font-size: 16px; --m3-body-large-letter-spacing: 0.5px; --m3-body-large-line-height: 24px; --m3-body-large-font-style: normal; --m3-body-medium-font-family: "Roboto", Helvetica; --m3-body-medium-font-weight: 400; --m3-body-medium-font-size: 14px; --m3-body-medium-letter-spacing: 0.25px; --m3-body-medium-line-height: 20px; --m3-body-medium-font-style: normal; --m3-schemes-surface: rgba(254, 247, 255, 1); --m3-schemes-surface-variant: rgba(231, 224, 236, 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: rgba(254, 247, 255, 1); --m3-schemes-surface-variant: rgba(231, 224, 236, 1); } [data-m3-mode="light-high-contrast"] { --m3-schemes-surface: rgba(253, 247, 255, 1); --m3-schemes-surface-variant: rgba(231, 224, 235, 1); } [data-m3-mode="light-medium-contrast"] { --m3-schemes-surface: rgba(253, 247, 255, 1); --m3-schemes-surface-variant: rgba(231, 224, 235, 1); } [data-m3-mode="dark"] { --m3-schemes-surface: rgba(20, 18, 24, 1); --m3-schemes-surface-variant: rgba(73, 69, 79, 1); } [data-m3-mode="dark-high-contrast"] { --m3-schemes-surface: rgba(20, 18, 24, 1); --m3-schemes-surface-variant: rgba(73, 69, 78, 1); } [data-m3-mode="dark-medium-contrast"] { --m3-schemes-surface: rgba(20, 18, 24, 1); --m3-schemes-surface-variant: rgba(73, 69, 78, 1); } [data-m3-mode="monochrome-LT"] { --m3-schemes-surface: rgba(249, 249, 249, 1); --m3-schemes-surface-variant: rgba(226, 226, 226, 1); } [data-m3-mode="monochrome-DT"] { --m3-schemes-surface: rgba(19, 19, 19, 1); --m3-schemes-surface-variant: rgba(71, 71, 71, 1); } [data-m3-mode="pink-LT"] { --m3-schemes-surface: rgba(255, 248, 248, 1); --m3-schemes-surface-variant: rgba(238, 223, 227, 1); } [data-m3-mode="pink-DT"] { --m3-schemes-surface: rgba(25, 17, 20, 1); --m3-schemes-surface-variant: rgba(59, 50, 53, 1); } [data-m3-mode="rose-LT"] { --m3-schemes-surface: rgba(255, 248, 247, 1); --m3-schemes-surface-variant: rgba(240, 222, 223, 1); } [data-m3-mode="rose-DT"] { --m3-schemes-surface: rgba(25, 17, 18, 1); --m3-schemes-surface-variant: rgba(61, 50, 51, 1); } [data-m3-mode="red-LT"] { --m3-schemes-surface: rgba(255, 248, 247, 1); --m3-schemes-surface-variant: rgba(241, 222, 220, 1); } [data-m3-mode="red-DT"] { --m3-schemes-surface: rgba(26, 17, 16, 1); --m3-schemes-surface-variant: rgba(61, 50, 49, 1); } [data-m3-mode="orange-LT"] { --m3-schemes-surface: rgba(255, 248, 245, 1); --m3-schemes-surface-variant: rgba(240, 223, 215, 1); } [data-m3-mode="orange-DT"] { --m3-schemes-surface: rgba(26, 18, 13, 1); --m3-schemes-surface-variant: rgba(61, 51, 45, 1); } [data-m3-mode="yellow-LT"] { --m3-schemes-surface: rgba(255, 248, 242, 1); --m3-schemes-surface-variant: rgba(235, 225, 212, 1); } [data-m3-mode="yellow-DT"] { --m3-schemes-surface: rgba(23, 19, 11, 1); --m3-schemes-surface-variant: rgba(57, 52, 43, 1); } [data-m3-mode="chartreuse-LT"] { --m3-schemes-surface: rgba(252, 250, 237, 1); --m3-schemes-surface-variant: rgba(229, 227, 214, 1); } [data-m3-mode="chartreuse-DT"] { --m3-schemes-surface: rgba(19, 20, 13, 1); --m3-schemes-surface-variant: rgba(53, 53, 45, 1); } [data-m3-mode="green-LT"] { --m3-schemes-surface: rgba(247, 251, 242, 1); --m3-schemes-surface-variant: rgba(224, 228, 219, 1); } [data-m3-mode="green-DT"] { --m3-schemes-surface: rgba(16, 21, 16, 1); --m3-schemes-surface-variant: rgba(49, 54, 48, 1); } [data-m3-mode="teal-LT"] { --m3-schemes-surface: rgba(244, 251, 248, 1); --m3-schemes-surface-variant: rgba(221, 228, 225, 1); } [data-m3-mode="teal-DT"] { --m3-schemes-surface: rgba(14, 21, 19, 1); --m3-schemes-surface-variant: rgba(48, 54, 52, 1); } [data-m3-mode="cyan-LT"] { --m3-schemes-surface: rgba(245, 250, 253, 1); --m3-schemes-surface-variant: rgba(222, 227, 230, 1); } [data-m3-mode="cyan-DT"] { --m3-schemes-surface: rgba(15, 20, 22, 1); --m3-schemes-surface-variant: rgba(48, 54, 56, 1); } [data-m3-mode="blue-LT"] { --m3-schemes-surface: rgba(250, 248, 255, 1); --m3-schemes-surface-variant: rgba(226, 226, 233, 1); } [data-m3-mode="blue-DT"] { --m3-schemes-surface: rgba(18, 19, 24, 1); --m3-schemes-surface-variant: rgba(51, 52, 58, 1); } [data-m3-mode="indigo-LT"] { --m3-schemes-surface: rgba(252, 248, 255, 1); --m3-schemes-surface-variant: rgba(229, 225, 233, 1); } [data-m3-mode="indigo-DT"] { --m3-schemes-surface: rgba(19, 19, 24, 1); --m3-schemes-surface-variant: rgba(53, 52, 58, 1); } [data-m3-mode="purple-LT"] { --m3-schemes-surface: rgba(254, 247, 255, 1); --m3-schemes-surface-variant: rgba(231, 224, 232, 1); } [data-m3-mode="purple-DT"] { --m3-schemes-surface: rgba(21, 18, 24, 1); --m3-schemes-surface-variant: rgba(55, 51, 58, 1); }