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.
Is it alright if I install manually styled-component so I can wrap the entire app with ThemeProvider and pass the value of state.theme to it so that all of my components could have an access to theme object that resides in index.js?
Hi @mh123
Frontity uses Emotion for CSS-in-JS. This is already baked in. Emotion has a <ThemeProvider> component as well.
Hope this helps.