Community forum for knowledge and support

Updated last month

Theming and Styling in the New Version

At a glance

The community member is having issues with the new style guide, where switching themes does not automatically update button colors and other custom elements. In the old version, they could apply a single "theme-orange" class to inherit all the necessary styles, but the new approach seems more divided. The community member is seeking advice or a tutorial on how to properly use the new style guide, as even switching from dark to light mode breaks the out-of-the-box solution for black/white buttons.

Other community members respond that they will be providing more information soon, including a video tutorial. They also mention that the only difference with the new approach is that UI elements like buttons and forms need their classes to be changed when switching between light and dark themes. Once "Modes" is available through the API, the experience is expected to improve further. One community member also shares their interesting implementation using variables in the previous style guide.

Useful resources

So with the new style guide, when you switch themes, the button colors etc is not part of the themeing so in the old version, it made more sense because I could just ad in the classes needed and then when I added a class on top of a section with something like "theme-orange" everything would inherit, so background, text, buttons and some custom elements we reuse in every project would just "work" by applying one single class.

In the new everything is divided up and then we have themes, so I added in our colors in folders etc, but then the whole idea of changing the look of a section kind of vanish, or am I just tired? Please advice or send me a tutorial on how it's ment to be used.

Even just switching from dark to light etc brakes in the out-of-the box solution when it comes to black/white buttons etc so im prob thinking about this in the wrong way.

Attachments
Screenshot 2025-03-07 at 13.55.32.png
Screenshot 2025-03-07 at 13.57.35.png
M
K
V
5 comments

@Victor Svedberg happy to address this with more information soon. We also have a video in the final stages, hoping to release soon as well that should help shed some light here.

Hey @Victor Svedberg! That's an interesting approach you've set up there with modes. Very cool. Have never seen someone set their project up like this. Would you be open to sharing an example or read-only link to a project that you've utilized this on? (Feel free to DM)

Curious to hear your thoughts on the new approach once you've watched the videos above.

Happy to share @Kaleb Jae. So this is how we set it up in in the old sg, and we usually copy and paste a base "Agera" project/our custom version of the Relume Style Guide but with minor changes and our template pages for various engagement campaign-setups. That connects to our infra running in the cloud to sync things to clients CRM-systems.

We work for most of the worlds largest NGOs in some capacity, so fun fact is that Relume is a part of driving home money and engagement for some of the most noble causes.

Thanks for sharing @Victor Svedberg! The way you're thinking about it is the way we're also thinking about it. In short the only difference with the new approach is that UI Elements (buttons and forms) need their classes to be changed if you switch from light to dark theme background.

I will be putting out a video soon walking through best practices. And once Modes is available through the API, we aim to improve the experience even further.

Freakin awesome implementation btw! Best use of variables in our previous style guide that I have seen πŸ™Œ

Add a reply
Sign up and join the conversation on Slack