The Color system in Lumos allows you to have dynamic theme switching where you can modify the theme of a card, section, or even page, and every element inside it will respond automatically to have the correct color. This system is incredibly scalable and helps you to use color more consistently throughout your site.

Swatches

These are the raw color values used in your site, start by adding/editing your swatches in the default collection and afterwards move onto updating the Theme collection.

1. Add the core swatches used in the design
2. Add extra variables if needed for styles like brand-secondary-500, brand-secondary-text, and so on. (You can use the color-mix function to automatically create shades or different opacities based on another swatch)

<aside> <img src="/icons/info-alternate_gray.svg" alt="/icons/info-alternate_gray.svg" width="40px" />

Whenever --swatch--brand-500 is applied as a background color, --swatch--brand-text is applied as its font color. If the brand color ever needs to change in the future to a darker color that requires light text, we can update that brand-text color from one place.

</aside>

Theme variable collection

• Set the section's background, text, & border colors across all modes
• Set the primary (solid) & secondary (outlined) button styles across all modes
• Add additional folders inside the Theme collection if needed for styles like card/background, input/border-hover, input/border-focus, and so on.

image.avif

Button Style variable collection

• Reference the button styles created in the Theme collection so that each button style automatically updates in both light and dark mode.
• Add any additional button style modes if needed.
• Apply these button style variables to any buttons

image-1.avif

Connecting Button Style to Component Props

1. Create a component variant for the secondary button style
2. Switch the mode to the secondary mode