facebook / facebook/docusaurus
Code blocks flashes in dark mode
- 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
Assessment
This issue has not been assessed yet.