Theo's Typesafe Cult•3mo ago

why is `react-responsive` not updating darkmode consistently

I'm using react-responsive to make my PrismJS syntax highlighting (used by react-code-block here) switch themes depending on whether the system is in dark mode or not. However, for some reason, whenever I reload the page with dark mode enabled, dark mode isn't set and thus the app defaults to the light mode theme. Attached are screenshots showing the difference. Below is the relevant code:

let darkMode: boolean = useMediaQuery(
    { query: "(prefers-color-scheme: dark)" },
    undefined,
    (dark) => { return dark; }
)
[...]
return (
  <CodeBlock [...]
      theme={darkMode ? themes.vsDark : themes.vsLight}>
[...]
)

let darkMode: boolean = useMediaQuery(
    { query: "(prefers-color-scheme: dark)" },
    undefined,
    (dark) => { return dark; }
)
[...]
return (
  <CodeBlock [...]
      theme={darkMode ? themes.vsDark : themes.vsLight}>
[...]
)

What I am assuming is happening is that the dark mode query is happening after stuff has already loaded, so the theme is not updating properly because the theme has already been loaded on the server side (i'm trying to use SSR wherever I can to reduce the amount of JS pipebombs i shove into users' browsers lmao). However, this doesn't apply to navigating to the page after already loading a different page (the query can happen faster because most of the underlying page content has already loaded? i think?) or changing the system's theme (the callback onChange function should run at that point and that seems to work). I don't think my specs matter, but just in case:

M1 Macbook Air, 8GB RAM, macOS 15.1 Beta (24B5009I), Safari 18.0 (20619.1.22.11.3) next 14.2.4, react-responsive 10.0.0, prismjs 1.29.0, prism-react-renderer 2.3.1

Thank you so much!

1 Reply

KeboOP•3mo ago

AHA i think I was right in how this happened: I accidentally a hydration error so it switched to client side rendering... rendering the content again and thus updating the theme.

Gaming

Programming

why is `react-responsive` not updating darkmode consistently