Server Side Rendering Compatible CSS Theming

Published 📅: ....
Last modified 📝: ....

Share this post on Bluesky See discussion on Bluesky

Earlier today I saw some discussion around how to implement light/dark mode theming for a server side rendered (SSR) React application, in this case it was using Waku, however this pattern is compatible with almost any modern React framework, e.g. Next.js, React Router, etc!

I quickly worked up a , but I figured I could expand on it a bit and outline what it does and how it works in more details. If you're just looking for the snippets of code - I recommend jumping to that demo where you can easily copy them!

function themeCheck() {
  let prefersDarkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
  let preferred = prefersDarkModeQuery.matches ? "dark" : "light";
  document.documentElement.classList.add(preferred);
  prefersDarkModeQuery.addEventListener("change", (

<script
  dangerouslySetInnerHtml={{
    // wrapping parens are necessary in order to invoke the function
    // when this script is parsed and evaluated by the browser!
    __html: `(${themeCheck.toString()})()`
  }}
/>

Server Side Rendering Compatible CSS Theming

Server Side Rendering Compatible CSS Theming

Background Context:

The Pattern:

Tags:

Bluesky Post and Comments:

Related Posts

Web Development

Related Posts

Web Development

CSS

Next.js

React

Tip