:root { --neutralmedium-grey: rgba(203, 213, 225, 1); --subtle-medium-font-family: "Inter", Helvetica; --subtle-medium-font-weight: 500; --subtle-medium-font-size: 14px; --subtle-medium-letter-spacing: 0px; --subtle-medium-line-height: 20px; --subtle-medium-font-style: normal; --body-medium-font-family: "Inter", Helvetica; --body-medium-font-weight: 500; --body-medium-font-size: 14px; --body-medium-letter-spacing: 0px; --body-medium-line-height: 24px; --body-medium-font-style: normal; --h-4-font-family: "Inter", Helvetica; --h-4-font-weight: 600; --h-4-font-size: 20px; --h-4-letter-spacing: -0.1px; --h-4-line-height: 28px; --h-4-font-style: normal; --lead-font-family: "Inter", Helvetica; --lead-font-weight: 400; --lead-font-size: 20px; --lead-letter-spacing: 0px; --lead-line-height: 28px; --lead-font-style: normal; --p-font-family: "Inter", Helvetica; --p-font-weight: 400; --p-font-size: 16px; --p-letter-spacing: 0px; --p-line-height: 28px; --p-font-style: normal; --colors-text-500: rgba(15, 11, 19, 1); --colors-text-white: rgba(255, 255, 255, 1); --colors-text-400: rgba(63, 56, 73, 1); --colors-text-primary-100: rgba(19, 192, 190, 1); --colors-text-error-100: rgba(239, 68, 68, 1); --colors-bg-700: rgba(15, 11, 19, 1); --colors-stroke-100: rgba(241, 245, 249, 1); --colors-bg-300: rgba(241, 245, 249, 1); --colors-stroke-200: rgba(203, 213, 225, 1); --colors-bg-success-200: rgba(49, 194, 107, 1); --colors-bg-100: rgba(255, 255, 255, 1); --colors-bg-400: rgba(203, 213, 225, 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-colors-mode="light"] { --colors-text-500: rgba(15, 11, 19, 1); --colors-text-400: rgba(63, 56, 73, 1); --colors-text-primary-100: rgba(19, 192, 190, 1); --colors-text-error-100: rgba(239, 68, 68, 1); --colors-bg-700: rgba(15, 11, 19, 1); --colors-stroke-100: rgba(241, 245, 249, 1); --colors-bg-300: rgba(241, 245, 249, 1); --colors-stroke-200: rgba(203, 213, 225, 1); --colors-bg-100: rgba(255, 255, 255, 1); --colors-bg-400: rgba(203, 213, 225, 1); } [data-colors-mode="dark"] { --colors-text-500: rgba(250, 250, 250, 1); --colors-text-400: rgba(208, 203, 210, 1); --colors-text-primary-100: rgba(6, 54, 54, 1); --colors-text-error-100: rgba(60, 23, 29, 1); --colors-bg-700: rgba(244, 244, 244, 1); --colors-stroke-100: rgba(35, 30, 43, 1); --colors-bg-300: rgba(74, 69, 82, 1); --colors-stroke-200: rgba(74, 69, 82, 1); --colors-bg-100: rgba(15, 11, 19, 1); --colors-bg-400: rgba(140, 132, 146, 1); }