:root { --m3syslighton-surface-variant: rgba(68, 71, 78, 1); --m-3syslightoutline: rgba(116, 119, 127, 1); --branco: rgba(255, 255, 255, 1); --azul-principal: rgba(65, 90, 169, 1); --rosa-principal: rgba(241, 104, 118, 1); --m3syslighton-surface: rgba(25, 28, 32, 1); --m-3syslightprimary: rgba(65, 95, 145, 1); --m-3syslightsurface: rgba(249, 249, 255, 1); --m3state-layerslighton-surface-variantopacity-012: rgba(73, 69, 79, 0.12); --m3state-layerslighton-surface-variantopacity-008: rgba(73, 69, 79, 0.08); --m3-body-large-font-family: "Inter", Helvetica; --m3-body-large-font-weight: 300; --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-small-font-family: "Inter", Helvetica; --m3-body-small-font-weight: 300; --m3-body-small-font-size: 12px; --m3-body-small-letter-spacing: 0px; --m3-body-small-line-height: 16px; --m3-body-small-font-style: normal; --m3-label-large-font-family: "Inter", Helvetica; --m3-label-large-font-weight: 400; --m3-label-large-font-size: 14px; --m3-label-large-letter-spacing: 0.10000000149011612px; --m3-label-large-line-height: 20px; --m3-label-large-font-style: normal; --body-medium-font-family: "Inter", Helvetica; --body-medium-font-weight: 300; --body-medium-font-size: 14px; --body-medium-letter-spacing: 0px; --body-medium-line-height: 20px; --body-medium-font-style: normal; --m3-title-small-font-family: "Inter", Helvetica; --m3-title-small-font-weight: 400; --m3-title-small-font-size: 14px; --m3-title-small-letter-spacing: 0px; --m3-title-small-line-height: 20px; --m3-title-small-font-style: normal; --text-button-font-family: "Inter", Helvetica; --text-button-font-weight: 300; --text-button-font-size: 20px; --text-button-letter-spacing: 0px; --text-button-line-height: 16.399999618530273px; --text-button-font-style: normal; --m3-elevation-light-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3); --m3-schemes-on-secondary-container: rgba(5, 27, 60, 1); --m3-schemes-on-surface: rgba(25, 28, 32, 1); --m3-schemes-on-primary-container: rgba(5, 27, 60, 1); --m3-schemes-primary-container: rgba(217, 227, 253, 1); --m3-schemes-secondary-container: rgba(217, 227, 253, 1); --m3-schemes-on-primary: rgba(255, 255, 255, 1); --m3-state-layers-on-primary-opacity-08: rgba(255, 255, 255, 0.08); --m3-schemes-primary: rgba(103, 80, 164, 1); --m3-schemes-on-surface-duplicate: rgba(25, 28, 32, 1); --m3-schemes-on-surface-variant: rgba(69, 71, 78, 1); --m3-schemes-outline: rgba(117, 119, 126, 1); --m3-state-layers-on-surface-variant-opacity-12: rgba(73, 69, 79, 0.12); --m3-state-layers-on-surface-variant-opacity-08: rgba(73, 69, 79, 0.08); --m3-schemes-custom-on-header-surface: rgba(255, 255, 255, 1); --m3-schemes-custom-header-surface: rgba(4, 18, 35, 1); --m3-state-layers-on-surface-variant-opacity-12-duplicate: rgba( 73, 69, 79, 0.12 ); --m3-state-layers-on-surface-variant-opacity-08-duplicate: rgba( 73, 69, 79, 0.08 ); --m3-schemes-on-primary-duplicate: rgba(255, 255, 255, 1); --m3-schemes-primary-duplicate: rgba(46, 116, 220, 1); --m3-schemes-on-surface-variant-duplicate: rgba(69, 70, 78, 1); --m3-schemes-surface: rgba(249, 249, 249, 1); --m3-schemes-outline-duplicate: rgba(117, 119, 126, 1); --m3-schemes-outline-variant: rgba(196, 198, 207, 1); --m3-state-layers-primary-opacity-12: rgba(46, 116, 220, 0.12); --m3-state-layers-on-surface-opacity-12: rgba(29, 27, 32, 0.12); --m3-state-layers-on-surface-opacity-08: rgba(29, 27, 32, 0.08); --m3-state-layers-primary-opacity-08: rgba(46, 116, 220, 0.08); --m3-schemes-error: rgba(171, 45, 37, 1); --m3-schemes-surface-container-high: rgba(232, 231, 238, 1); --m3-state-layers-on-secondary-container-opacity-08: rgba(29, 25, 43, 0.08); } /* 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-secondary-container: rgba(5, 27, 60, 1); --m3-schemes-on-surface: rgba(25, 28, 32, 1); --m3-schemes-on-primary-container: rgba(5, 27, 60, 1); --m3-schemes-primary-container: rgba(217, 227, 253, 1); --m3-schemes-secondary-container: rgba(217, 227, 253, 1); --m3-schemes-on-primary: rgba(255, 255, 255, 1); --m3-state-layers-on-primary-opacity-08: rgba(255, 255, 255, 0.08); --m3-schemes-primary: rgba(103, 80, 164, 1); --m3-schemes-on-surface-duplicate: rgba(25, 28, 32, 1); --m3-schemes-on-surface-variant: rgba(69, 71, 78, 1); --m3-schemes-outline: rgba(117, 119, 126, 1); --m3-state-layers-on-surface-variant-opacity-12: rgba(73, 69, 79, 0.12); --m3-state-layers-on-surface-variant-opacity-08: rgba(73, 69, 79, 0.08); --m3-schemes-custom-header-surface: rgba(4, 18, 35, 1); --m3-state-layers-on-surface-variant-opacity-12-duplicate: rgba( 73, 69, 79, 0.12 ); --m3-state-layers-on-surface-variant-opacity-08-duplicate: rgba( 73, 69, 79, 0.08 ); --m3-schemes-on-primary-duplicate: rgba(255, 255, 255, 1); --m3-schemes-primary-duplicate: rgba(46, 116, 220, 1); --m3-schemes-on-surface-variant-duplicate: rgba(69, 70, 78, 1); --m3-schemes-surface: rgba(249, 249, 249, 1); --m3-schemes-outline-duplicate: rgba(117, 119, 126, 1); --m3-schemes-outline-variant: rgba(196, 198, 207, 1); --m3-state-layers-primary-opacity-12: rgba(46, 116, 220, 0.12); --m3-state-layers-on-surface-opacity-12: rgba(29, 27, 32, 0.12); --m3-state-layers-on-surface-opacity-08: rgba(29, 27, 32, 0.08); --m3-state-layers-primary-opacity-08: rgba(46, 116, 220, 0.08); --m3-schemes-error: rgba(171, 45, 37, 1); --m3-schemes-surface-container-high: rgba(232, 231, 238, 1); --m3-state-layers-on-secondary-container-opacity-08: rgba(29, 25, 43, 0.08); } [data-m3-mode="dark"] { --m3-schemes-on-secondary-container: rgba(217, 227, 253, 1); --m3-schemes-on-surface: rgba(226, 226, 233, 1); --m3-schemes-on-primary-container: rgba(217, 227, 253, 1); --m3-schemes-primary-container: rgba(46, 71, 116, 1); --m3-schemes-secondary-container: rgba(46, 71, 116, 1); --m3-schemes-on-primary: rgba(56, 30, 114, 1); --m3-state-layers-on-primary-opacity-08: rgba(56, 30, 114, 0.08); --m3-schemes-primary: rgba(208, 188, 255, 1); --m3-schemes-on-surface-duplicate: rgba(226, 226, 233, 1); --m3-schemes-on-surface-variant: rgba(197, 198, 207, 1); --m3-schemes-outline: rgba(143, 144, 152, 1); --m3-state-layers-on-surface-variant-opacity-12: rgba(202, 196, 208, 0.12); --m3-state-layers-on-surface-variant-opacity-08: rgba(202, 196, 208, 0.08); --m3-schemes-custom-header-surface: rgba(3, 23, 76, 1); --m3-state-layers-on-surface-variant-opacity-12-duplicate: rgba( 202, 196, 208, 0.12 ); --m3-state-layers-on-surface-variant-opacity-08-duplicate: rgba( 202, 196, 208, 0.08 ); --m3-schemes-on-primary-duplicate: rgba(21, 49, 92, 1); --m3-schemes-primary-duplicate: rgba(175, 199, 251, 1); --m3-schemes-on-surface-variant-duplicate: rgba(198, 198, 207, 1); --m3-schemes-surface: rgba(25, 28, 32, 1); --m3-schemes-outline-duplicate: rgba(143, 144, 152, 1); --m3-schemes-outline-variant: rgba(69, 71, 78, 1); --m3-state-layers-primary-opacity-12: rgba(175, 199, 251, 0.12); --m3-state-layers-on-surface-opacity-12: rgba(230, 224, 233, 0.12); --m3-state-layers-on-surface-opacity-08: rgba(230, 224, 233, 0.08); --m3-state-layers-primary-opacity-08: rgba(175, 199, 251, 0.08); --m3-schemes-error: rgba(244, 183, 174, 1); --m3-schemes-surface-container-high: rgba(40, 42, 47, 1); --m3-state-layers-on-secondary-container-opacity-08: rgba( 232, 222, 248, 0.08 ); } [data-m3-mode="light-high-contrast"] { --m3-schemes-on-primary: rgba(255, 255, 255, 1); --m3-state-layers-on-primary-opacity-08: rgba(255, 255, 255, 0.08); --m3-schemes-primary: rgba(39, 23, 78, 1); } [data-m3-mode="light-medium-contrast"] { --m3-schemes-on-primary: rgba(255, 255, 255, 1); --m3-state-layers-on-primary-opacity-08: rgba(255, 255, 255, 0.08); --m3-schemes-primary: rgba(73, 57, 113, 1); } [data-m3-mode="dark-high-contrast"] { --m3-schemes-on-primary: rgba(0, 0, 0, 1); --m3-state-layers-on-primary-opacity-08: rgba(0, 0, 0, 0.08); --m3-schemes-primary: rgba(255, 249, 255, 1); } [data-m3-mode="dark-medium-contrast"] { --m3-schemes-on-primary: rgba(27, 9, 66, 1); --m3-state-layers-on-primary-opacity-08: rgba(27, 9, 66, 0.08); --m3-schemes-primary: rgba(211, 193, 255, 1); } [data-m3-mode="monochrome-LT"] { --m3-schemes-on-primary: rgba(226, 226, 226, 1); --m3-state-layers-on-primary-opacity-08: rgba(226, 226, 226, 0.08); --m3-schemes-primary: rgba(0, 0, 0, 1); } [data-m3-mode="monochrome-DT"] { --m3-schemes-on-primary: rgba(26, 28, 28, 1); --m3-state-layers-on-primary-opacity-08: rgba(26, 28, 28, 0.08); --m3-schemes-primary: rgba(255, 255, 255, 1); } [data-m3-mode="pink-LT"] { --m3-schemes-on-primary: rgba(255, 255, 255, 1); --m3-state-layers-on-primary-opacity-08: rgba(255, 255, 255, 0.08); --m3-schemes-primary: rgba(138, 75, 104, 1); } [data-m3-mode="pink-DT"] { --m3-schemes-on-primary: rgba(83, 29, 57, 1); --m3-state-layers-on-primary-opacity-08: rgba(83, 29, 57, 0.08); --m3-schemes-primary: rgba(254, 176, 209, 1); } [data-m3-mode="rose-LT"] { --m3-schemes-on-primary: rgba(255, 255, 255, 1); --m3-state-layers-on-primary-opacity-08: rgba(255, 255, 255, 0.08); --m3-schemes-primary: rgba(143, 74, 86, 1); } [data-m3-mode="rose-DT"] { --m3-schemes-on-primary: rgba(86, 29, 41, 1); --m3-state-layers-on-primary-opacity-08: rgba(86, 29, 41, 0.08); --m3-schemes-primary: rgba(255, 178, 189, 1); } [data-m3-mode="red-LT"] { --m3-schemes-on-primary: rgba(255, 255, 255, 1); --m3-state-layers-on-primary-opacity-08: rgba(255, 255, 255, 0.08); --m3-schemes-primary: rgba(145, 75, 67, 1); } [data-m3-mode="red-DT"] { --m3-schemes-on-primary: rgba(86, 30, 24, 1); --m3-state-layers-on-primary-opacity-08: rgba(86, 30, 24, 0.08); --m3-schemes-primary: rgba(255, 167, 155, 1); } [data-m3-mode="orange-LT"] { --m3-schemes-on-primary: rgba(255, 255, 255, 1); --m3-state-layers-on-primary-opacity-08: rgba(255, 255, 255, 0.08); --m3-schemes-primary: rgba(141, 79, 40, 1); } [data-m3-mode="orange-DT"] { --m3-schemes-on-primary: rgba(83, 34, 0, 1); --m3-state-layers-on-primary-opacity-08: rgba(83, 34, 0, 0.08); --m3-schemes-primary: rgba(255, 182, 140, 1); } [data-m3-mode="yellow-LT"] { --m3-schemes-on-primary: rgba(255, 255, 255, 1); --m3-state-layers-on-primary-opacity-08: rgba(255, 255, 255, 0.08); --m3-schemes-primary: rgba(121, 90, 12, 1); } [data-m3-mode="yellow-DT"] { --m3-schemes-on-primary: rgba(63, 46, 0, 1); --m3-state-layers-on-primary-opacity-08: rgba(63, 46, 0, 0.08); --m3-schemes-primary: rgba(233, 193, 108, 1); } [data-m3-mode="chartreuse-LT"] { --m3-schemes-on-primary: rgba(255, 255, 255, 1); --m3-state-layers-on-primary-opacity-08: rgba(255, 255, 255, 0.08); --m3-schemes-primary: rgba(92, 100, 30, 1); } [data-m3-mode="chartreuse-DT"] { --m3-schemes-on-primary: rgba(45, 52, 0, 1); --m3-state-layers-on-primary-opacity-08: rgba(45, 52, 0, 0.08); --m3-schemes-primary: rgba(195, 205, 124, 1); } [data-m3-mode="green-LT"] { --m3-schemes-on-primary: rgba(255, 255, 255, 1); --m3-state-layers-on-primary-opacity-08: rgba(255, 255, 255, 0.08); --m3-schemes-primary: rgba(55, 106, 62, 1); } [data-m3-mode="green-DT"] { --m3-schemes-on-primary: rgba(0, 57, 19, 1); --m3-state-layers-on-primary-opacity-08: rgba(0, 57, 19, 0.08); --m3-schemes-primary: rgba(156, 212, 159, 1); } [data-m3-mode="teal-LT"] { --m3-schemes-on-primary: rgba(255, 255, 255, 1); --m3-state-layers-on-primary-opacity-08: rgba(255, 255, 255, 0.08); --m3-schemes-primary: rgba(0, 107, 96, 1); } [data-m3-mode="teal-DT"] { --m3-schemes-on-primary: rgba(0, 55, 49, 1); --m3-state-layers-on-primary-opacity-08: rgba(0, 55, 49, 0.08); --m3-schemes-primary: rgba(130, 213, 199, 1); } [data-m3-mode="cyan-LT"] { --m3-schemes-on-primary: rgba(255, 255, 255, 1); --m3-state-layers-on-primary-opacity-08: rgba(255, 255, 255, 0.08); --m3-schemes-primary: rgba(1, 104, 125, 1); } [data-m3-mode="cyan-DT"] { --m3-schemes-on-primary: rgba(0, 54, 66, 1); --m3-state-layers-on-primary-opacity-08: rgba(0, 54, 66, 0.08); --m3-schemes-primary: rgba(134, 209, 234, 1); } [data-m3-mode="blue-LT"] { --m3-schemes-on-primary: rgba(255, 255, 255, 1); --m3-state-layers-on-primary-opacity-08: rgba(255, 255, 255, 0.08); --m3-schemes-primary: rgba(72, 94, 146, 1); } [data-m3-mode="blue-DT"] { --m3-schemes-on-primary: rgba(21, 46, 96, 1); --m3-state-layers-on-primary-opacity-08: rgba(21, 46, 96, 0.08); --m3-schemes-primary: rgba(176, 198, 255, 1); } [data-m3-mode="indigo-LT"] { --m3-schemes-on-primary: rgba(255, 255, 255, 1); --m3-state-layers-on-primary-opacity-08: rgba(255, 255, 255, 0.08); --m3-schemes-primary: rgba(91, 89, 146, 1); } [data-m3-mode="indigo-DT"] { --m3-schemes-on-primary: rgba(45, 41, 96, 1); --m3-state-layers-on-primary-opacity-08: rgba(45, 41, 96, 0.08); --m3-schemes-primary: rgba(197, 192, 255, 1); } [data-m3-mode="purple-LT"] { --m3-schemes-on-primary: rgba(255, 255, 255, 1); --m3-state-layers-on-primary-opacity-08: rgba(255, 255, 255, 0.08); --m3-schemes-primary: rgba(107, 84, 141, 1); } [data-m3-mode="purple-DT"] { --m3-schemes-on-primary: rgba(59, 37, 90, 1); --m3-state-layers-on-primary-opacity-08: rgba(59, 37, 90, 0.08); --m3-schemes-primary: rgba(214, 187, 251, 1); }