Color

Default variable collection

Add the core swatches used in the design
Add extra variables if needed for styles like brand-2, brand-2-text, and so on.

Whenever --swatch--brand 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.

Theme variable collection

Set the section's background, text, & border colors across all modes
Set the primary & secondary button styles across all modes
Add additional folders inside the Theme collection if needed for styles like link/text-hover, link/text-active, card/background, input/border-hover, input/border-focus, and so on.
Add an additional "Brand mode" if needed with section's background set to brand
Add additional section variables if needed like background-secondary, text-secondary, border-faded, and so on.

Button Style variable collection

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

Connecting Button Style to Component Props

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

Connecting Theme to Component Props

1. Create component variants for Inherit, Light, Dark, and any other themes

The inherit variant should have no theme applied. It will inherit the theme of the page.

2. Apply the theme/text variable and theme/background variable (if not using the Global / Background component) to the base variant

Reducing the opacity of a variable

We can use Custom Properties in the style panel to reduce a variable's opacity.

color-mix(in srgb, var(--_theme---text) 60%, transparent);

Or we can add custom css in an embed automatically reduce the opacity of a variable.

<style>
:root {
    --swatch--dark-opacity-10: color-mix(in srgb, var(--swatch--dark) 10%, transparent);
}
</style>

Animating between themes with GSAP

This script retrieves all variables from the Theme variable collection.
Any classes starting with "u-theme-" will be included as themes we can animate between.
Any classes starting with "u-brand-" will be included as brands we can animate between.

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/lumosframework/scripts@v1.1.1/theme-collector.js"></script>
<script>
document.addEventListener("colorThemesReady", () => {
  gsap.to(".my-element", { ...colorThemes.getTheme("dark", "3") });
});
</script>

If we have classes of u-theme-dark and u-brand-orange, we can animate to those modes like so...

document.addEventListener("colorThemesReady", () => {
  gsap.to(".my-element", { ...colorThemes.getTheme("dark", "orange") });
});

If we only have theme classes and no brand classes, we can animate between themes like so...

document.addEventListener("colorThemesReady", () => {
  gsap.to(".my-element", { ...colorThemes.getTheme("dark") });
});

Automatic Tints & Shades For Brand Colors

If your project needs multiple tints & shades for a single brand color, this cloneable shows how to setup automatic tints & shades variables from a single color.