The goals of this week
After spending last week setting up the multi-tenant verification and routing, I spent this week focusing on a more creative topic. Theming.
If you've ever used website builders like Wix or Squarespace, you're probably familiar with the concept of a theme template. Selecting a pre-defined set of variables that then get applied to your entire website. For the most part, this is just some simple css variable replacement, but on the surface it can look like a daunting engineering challenge. Fortunately, like all problems, the solution can be found by breaking it up into steps
Creating theme templates
The first step is to create a structure for our themes. Generally speaking, website themes comprise of a color palette, fonts, and spacing. Tailwindcss (the css library we are using for Nexus) uses a JSON config file that lets you configure and extend your base theme. This structure can let us make sweeping changes to our entire theme with a single variable change. Taking this a step further, shadcn gives us a bunch of css variables that are set in our global.css file. Combined with the shadcn component library, we can build extensive components that all adhere to a single global theme as dictated by the variables in the globals.css file.
Setting variables on the server
With this in mind we've used Payload to build a UI that lets users select themes from a dropdown. These themes link to JSON objects, setting color and text fields within Payload with pre-defined values after selecting one. With some help from custom components such as NouanceLab's SmartColour and Range fields, we're able to make changes to these themes to allow for more control of the front end.
Fetching theme variables
Now comes the easy bit. After saving our themes to the server, we can treat this data just like everything else coming from Payload. Because we are pulling down data that applies to our entire website, it makes sense to fetch this data at the same time as our Navbar or Footer. In NextJS App Router, our Layout.tsx file is considered the top-level document, with all other components being nested within. With this in mind, we just do a simple fetch request to pull down the website theme and then pass it into a Theme component.
Substituting CSS variables
Now that we have our data, the last step is to overwrite the base css variables in our global.css file. In order to do that, we have made a Theme component that makes use of the StyleRegistry from styled-jsx. Vercel has some really useful documentation around this topic, you can read more about it here. In a nutshell, Next provides a way for us to set server-side css styles before the content is served to our visitors. This removes the possibility for pop-in to occur and also protects us from dangerously injecting HTML.
Conclusion
And we're done! Thanks for checking in for this week's dev log. With the base work of theming complete, we're going to start pivoting our focus towards actually generating content for our website. Components, Blocks, and more! Check in next week to follow along with the development of this project.