Relume Community Icon

Relume Community

Color Scheme Bug in Webflow: Fixing Relume’s Template Issue

·

·

Hello Adam M. Dan Matt J., I’m not sure if this issue has already been raised by someone else, but I recently encountered what I believe to be a bug. I started a project using Relume’s Cloneable template. After importing my project (a wireframe, not a concept) into Webflow, I attempted to create a new color scheme. However, the color values didn’t seem to apply correctly in the Webflow canvas. Upon comparing the Webflow code from two projects—one using a concept with functional color schemes and the other being the standard wireframe version—I noticed a key difference in the “global-styles -> color-schemes” section. Specifically, I found this line: <meta name=“relume-color-schemes” content=“false”/>. Interestingly, it was embedded within a <style> tag, which seemed odd. After removing this meta tag, the issue was resolved, and the color scheme worked as expected. I wanted to share this to save others from potentially wasting an hour or more troubleshooting. It might be worth considering a fix for this in the future. Let me know if you need more details!

9 comments

Matt J.
·
·
Pierre L. in trying to walk through the steps you've outlined, I have not been able to reproduce the issue. There's a really good chance that I'll need some sort of loom video - I honestly don't need audio if you dont want to include it - I just need to see the steps you took to get to the bug you are thinking we might have. I do see the meta tag, and I do also question its purpose as well as location though - I have not heard of meta tags living inside of style tags before and I could see how that might have something to do with it, but when I added a new color variable, and assigned it to Text in color-scheme-1 - the text changed colors in my wireframe. So I would need to see the exact steps you took to "create a new color scheme".
Pierre L.
·
·
Matt J. Here it is. https://www.loom.com/share/5304bd00caf5420f895700eaeebaf1a4?sid=2099cd69-b143-470a-965c-9250f3577fb6 Hope it helps you to reproduce the bug on your side. 🙂
Matt J.
·
·
yeah amazing - thank you so much for walking me through that. I dont think the team intended for anyone to ever make color schemes manually. I bet this color schemes embed code gets replaced when we actually import a new style guide and we probably use this meta tag to intentionally "break" the color schemes variables to help us to determine whether there is a style guide imported or not (so not to override it) but this is just all hypothesis right now. Really appreciate you flagging this!
Pierre L.
·
·
Matt J. Yes, I completely understand what you mean. I’m happy to have come across this and glad you took the time to look into it! If it can help the community and contribute to the product’s improvement, that’s great 💪 If I ever come across another issue, I’ll do the same. Have an excellent day!
Matt J.
·
·
Pierre L. absolutely - thank you again!
Emily M.
·
·
Hi, I'm planning to add custom colour schemes to a current project. I'm in the design phase and have already added them in Figma. Is there a way you would advise doing this in Webflow Matt J.?
Matt J.
·
·
Emily M. for sure - so basically the elements within a section are meant to inherit the styles set at the section level - so if you were to just replicate the variable setup we have already for color scheme 1, and then just select the section, and apply those variables, you should be good to go. For buttons, you would just do what we've been doing for years which is assign the appropriate button class based on your design (is-primary, is-secondary, etc)
Matt J.
·
·
if you wanted to use a combo class to assign a color scheme to a section, you could just create an empty div, create the class, assign the variables, delete the div, and then add that combo class to a section
Matt J.
·
·
we have some custom code that we have to use in order to be able to import things properly/consistently, but its not necessary to do it that way (global styles > color schemes)