Site theme data model that uses CSS variables

Technical Questions
1

What are you trying to accomplish
I am looking to create a global data model that provides a list of css variables to apply to Text and Box backgrounds. I have been able to do this through custom components just fine but am wondering if there is a way to have this set up globally so that I can apply it to as text and background colors of some of the built in components.

(I tried just overriding the Text component, while the color selector worked the inline editing and formatting was all screwed up.)

Code stack you are integrating Builder with
NextJS App Router

2

Hey @joshuafbarker I would recommend following our docs to create a site theme using data model. You can also checkout this forum post for alternatives.

3

@sheema Neither of those solve my problem.

I currently run a space that powers multiple sites, and all of those sites will share a set a CSS Variables that will be set to different values depending on the site. So, the colors will not be defined within Builder, but in my codebase. So what I need is the ability to select a css variable to apply to text or backgrounds.

Is there a way to do that using a data model?

4

Hey @joshuafbarker you have the option to create a data model specifically for colors, treating them as variables. Ensure to incorporate these variables into your global.css file. Subsequently, you can link this data model entry with your Builder page. I’ve added a loom video detailing the process for you. Let me know if you need more help.