Content has not been updated for more than 2 years, proceed with caution.
Using Theme UI with RedwoodJS
This is current as of Redwood v0.28 and Theme-UI v0.6
While I was completing the tutorial I got curious about using Theme UI with Redwood. Theme UI is a frontend library for creating themeable user interfaces with constraint-based design principles. Under the hood it extends Emotion for css-in-js styling. It has a great developer experience and is my favorite way to write css-in-js!
Turns out it is pretty straightforward to use Theme UI with RedwoodJS projects.
Install Theme UI and theme presets
Create a theme specification file
The theme specification is what defines your projects visual appearance. This ensures consistent spacing, font sizes, colors, line heights, etc. Imagine it like an interior designer for your home - they come in and provide a unified visual design.
In this theme file we use a theme preset based on TailwindCSS to provide a default set of styles that can be extended and customized.
Wrap ThemeProvider around App.js
RedwoodJS has an
App.js component which manages wrapping context providers and other global APIs/state around your root app - very similar to NextJS’s
Here is an example of how to set that up:
Save and checkout the results!
Save your files and look at the browser. Checkout that awful color combination! You can quickly swap colors across the entire site. This same principal can be used to customize all visual areas of a project with Theme UI; spacing, fonts, line heights, breakpoints, etc. Theme UI becomes a command center for your CSS.
Experiment with what is possible
To start enabling the full power out of Theme UI you can experiment with the sx prop and the Themed component. It is also worth reading about how media queries and breakpoints are handled in Theme UI - the syntax and developer experience for this is great!
Try this in your Redwood layout file:
Add this to your theme file:
Hopefully this has given you a taste of what is possible when combining Theme UI and RedwoodJS!