Code blocks flashes in dark mode

[carolyn-sun]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

When loading a Docusaurus page in dark mode, code blocks briefly flash with light theme colours before switching to the correct dark theme colours. This creates a jarring visual experience.

Reproducible demo

Can reproduce on any official page, https://docusaurus.io/docs/configuration

Steps to reproduce

1. Configure Docusaurus with both light and dark Prism themes.

prism: {
  theme: prismThemes.oneLight,
  darkTheme: prismThemes.oneDark,
},

2. Switch the site to dark mode
3. Navigate to any page with code blocks
4. Observe the code blocks during loading

Expected behavior

Code blocks should immediately display with the dark theme colours when the page loads in dark mode.

Actual behavior

Code blocks briefly display with light theme colours (a white background and light syntax highlighting), then quickly switch to dark theme colours. This flash is very noticeable and disrupts the user experience.

Your environment

N/A

Self-service

• I'd be willing to fix this bug myself.

[slorber]

This is a known issue that is related to how our syntax highlighting dependency works: FormidableLabs/prism-react-renderer#149

Since we don't have any Docusaurus issues open about this topic, I'll keep this one open, although we can't really do anything apart from changing the highlighter (which would be a breaking change), or provide support for an alternative one.

Related to:

• Values derived from useColorMode() can be stale when rendering in prod mode #7986
• useColorMode() cannot safely be used with SSR #9629
• Need to improve the rendering mechanism of some components #11296