facebook / facebook/docusaurus

Code blocks flashes in dark mode

Open
#11,566 2 comments 0 reactions 0 assignees View on GitHub
bug external
Dominant language
TypeScript
Stars
66.2k
Forks
10k
Avg merge
1d 3h
Merged PRs (30d)
52

Description

### Have you read the Contributing Guidelines on issues?

- [x] I have read the [Contributing Guidelines on issues](https://github.com/facebook/docusaurus/blob/main/CONTRIBUTING.md#issues).

### Prerequisites

- [x] I'm using the latest version of Docusaurus.
- [x] I have tried the `npm run clear` or `yarn clear` command.
- [x] I have tried `rm -rf node_modules yarn.lock package-lock.json` and re-installing packages.
- [x] I have tried creating a repro with https://new.docusaurus.io.
- [x] 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](https://docusaurus.io/docs/configuration)

### Steps to reproduce

1. Configure Docusaurus with both light and dark Prism themes.
```typescript
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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.