A few general things to keep in mind around this.
- 1.
We intentionally left out the accent styling in the style guide builder because it was cascading the complexity of things.
- 2.
Whenever working with Relume color schemes in Webflow, you'll always want to keep the variables in the style panel to be set to color scheme 1 variables and we use CSS to actually swap the VALUES of those variables. Its a bit of a hack to get around some Webflow limitations.
So what does that mean?
In Webflow, you have a tagline element, and in the style panel (right panel in Webflow) you'll want the text color to be set to the color scheme 1 accent variable, but then we use classes like color-scheme-2 etc to change the actual values of this variable.
Another way to go about it, if you wanted to use accents in more ways than just the tagline, is to just create a custom class.
So for me, what I did was just add an is-accent and is-alternate custom class within a color scheme on the style guide. I just added some random elements wrapped in this div, set those elements to the color-scheme-1 accent variable, and then when I use a combo class of color-scheme-2 is-accent the color scheme class sets the values, and the is-accent designates the variable type. This gave me granular control over how accents were used. The alternate is essentially an inverted color - similar to the is-alternate class for buttons.
/* Accent */
.color-scheme-2 .is-accent {
--color-scheme-1--accent: var(--color-scheme-2--accent);
}
.color-scheme-3 .is-accent {
--color-scheme-1--accent: var(--color-scheme-3--accent);
}
.color-scheme-4 .is-accent {
--color-scheme-1--accent: var(--color-scheme-4--accent);
}
.color-scheme-5 .is-accent {
--color-scheme-1--accent: var(--color-scheme-5--accent);
}
/* Alternate */
.color-scheme-2 .is-alternate {
--color-scheme-1--alternate: var(--color-scheme-2--alternate);
}
.color-scheme-3 .is-alternate {
--color-scheme-1--alternate: var(--color-scheme-3--alternate);
}
.color-scheme-4 .is-alternate {
--color-scheme-1--alternate: var(--color-scheme-4--alternate);
}
.color-scheme-5 .is-alternate {
--color-scheme-1--alternate: var(--color-scheme-5--alternate);
}
The custom CSS above I put in its own embed to keep things clean and separate from the Relume CSS.
Essentially this CSS is mapping the color scheme variables, to the class. Again, you only set the element's variable to the color scheme 1 variable in the style panel, and then use classes to swap the values - and this CSS acts like the glue.
A good doc to read over before diving into this would be this one:
https://www.relume.io/resources/docs/understanding-color-schemes-with-relume
If you have no CSS experience at all this is likely a completely foreign language to you. Just let me know where things get a bit confusing and I can expand on it more.
