Setting Up Themes in SSR React Applications

Imagine visiting a website that seamlessly adapts to your preferences—effortlessly switching between light, dark and system-based themes.

This article continues my series on SSR with React. In the basics article, we explored production-ready configurations, while in advanced techniques, we tackled challenges like hydration errors. Now, we’ll take it a step further by implementing robust theming support that integrates seamlessly with SSR.

Table of Contents

• Themes and SSR
• Implementation
  • Install Dependencies
  • Add cookie to the Server Build
  • Apply Themes on the Server
  • Handle Themes on the Client
• Conclusion

Themes and SSR

The main issue is the Initial Flash of Incorrect Theme (FOIT).

Essentially, themes are just about changing CSS variables. In most cases, you’ll work with three themes:

• Light: The default set of CSS variables.
• Dark: Applied when the tag has the class dark.
• System: Automatically switches based on the user's system preference, using the (prefers-color-scheme: dark) media query to determine if the theme should be dark or light.

By default, the server will render the HTML with the light theme and send it to the browser. If a user prefers the dark theme, they will see a visible theme change on the first page load, which disrupts the user experience.

There are two main ways to solve this issue:

• Add a
  • An in-depth analysis of the Bootstrap list group component
  • Detailed explanation of JavaScript function currying
  • Complete example of JS password generation and strength detection (with demo source code download)
  • Angularjs integrates WeChat UI (weui)
  • How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills