:root { --size-space-200: 8px; --size-space-300: 12px; --size-space-400: 16px; --size-radius-200: 8px; --color-background-default-default: #fff; --color-border-default-default: #ccc; --color-border-brand-default: #143109; --color-text-brand-on-brand: #fff; --single-line-body-base-font-family: "Poppins", sans-serif; --single-line-body-base-font-weight: 400; --single-line-body-base-font-size: 16px; --single-line-body-base-letter-spacing: 0; --single-line-body-base-line-height: 24px; --single-line-body-base-font-style: normal; --btn-bg-user: #dcdcdc; --btn-bg-notifications: #dcdcdc; } /* 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-color-mode="SDS-light"] { --color-text-brand-on-brand: var(--color-primitives-brand-100); --color-background-default-default: var(--color-primitives-white-1000); --color-border-brand-default: var(--color-primitives-brand-800); } [data-color-mode="SDS-dark"] { --color-text-brand-on-brand: var(--color-primitives-brand-900); --color-background-default-default: var(--color-primitives-gray-900); --color-border-brand-default: var(--color-primitives-brand-100); } [data-color-mode="brand-b-light"] { --color-text-brand-on-brand: var(--color-primitives-brand-100); --color-background-default-default: var(--color-primitives-white-1000); --color-border-brand-default: var(--color-primitives-brand-800); }