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, dark-opacity-20, 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

1. Create a component variant for the secondary button style

2. Switch the mode to the secondary mode

Connecting Theme to Component Props

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

• The inherit variant should have no styles. It will inherit from whatever the theme of the page is.

• On the dark variant, set the Variable mode to the dark theme

• Set the text color to theme text and background to theme background

• Do the same for all other theme variants

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.0.9/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.

Automatic Tints & Shades - WebflowAutomatic Tints & Shades