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.

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

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

3. Apply the related theme to each 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);

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/[email protected]/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/lumosframework/[email protected]/theme-collector.js"></script>
<script>
document.addEventListener("colorThemesReady", () => {
  gsap.to(".my-element", { ...colorThemes.getTheme("dark", "3") });
});
</script>

With Per Page CSS

If using Per Page CSS, use this version instead and ensure the u-theme- classes are included on every page of your site.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/lumosframework/[email protected]/themecollector.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") });
});

Animate Native Color Modes - WebflowAnimate Native Color Modes

Light Mode / Dark Mode Switcher

Variable Modes Toggle - WebflowVariable Modes Toggle