fix(v2): render correct syntax theme for current website theme

[yangshun]

Motivation

Fixes #2149

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

1. Go to Netlify preview's /docs/introduction
2. Set to dark mode if it's not already dark mode
3. Refresh page, see code block syntax theme is dark

Related PRs

#1984

[docusaurus-bot]

Deploy preview for docusaurus-2 ready!

Built with commit 0fae54a

https://deploy-preview-2150--docusaurus-2.netlify.com

[wgao19]

I also noticed this, thanks for fixing!

Meanwhile, I noticed that the new theme renders dark text on top of dark background for code block in light mode which isn't very friendly

[yangshun]

Meanwhile, I noticed that the new theme renders dark text on top of dark background for code block in light mode which isn't very friendly

Yes there's quite a bit of follow up work to do. Our highlighting colors now are just hardcoded without awareness of the current theme.

[endiliey]

You can also use the react context (isClient) from Docusaurus context for the two pass rendering. It is built for the hydration purpose.

docusaurus/packages/docusaurus/src/client/App.js

Line 21 in 167f71a

useEffect(() => {

React toggle is consuming it

[yangshun]

Oh cool. Should I use it? Was thinking of making the codeblocks more standalone 🤔

[endiliey]

we can leave it as it is i guess. Not really sure on the perf benefit gain, probably only the fact that it does not rerender on every mount (?) cos context is on main bundle and we alrd consume context for themeconfig too.

But its safe to leave it. If web performance is concerned, we are still lacking on making the first contentful paint & meaningful content paint faster (need smaller css for non render blocking evaluation 😉)