How to set up ThemeProvider or variables for css

What is the best way to go about having variables for fonts, colors, spacing etc… ?

If I create a theme.js file with an object and import it into my index.js file it works but then I’d also have to import it into each file that I need to access those variables? Is there a cleaner way to approach this?

Hi @dpickering

Welcome to the forum.

Using the import statement is the normal way of doing what you want, so I can’t think of a cleaner way of doing it than importing the file into whichever component needs it.

If you only need certain variables in certain components you could put the variables into separate objects within the theme.js file and export each object individually, then import just the needed object into the component.

Hope this helps, and hopefully I haven’t misunderstood your question.

By the way, what are you planning to build with Frontity? We’d love to know and perhaps, with your permission of course, feature your project in our showcases page.