Incorrect theme for code blocks in light mode

[victornoleto]

I followed the steps:

npx @docusaurus/init@latest init docs classic
cd docs
npm docusaurus start

Then I realized that the code blocks had a dark theme, unlike the rest of the project. If I switch to dark mode everything will change, except for the code blocks that remain the same.

1. My project in light mode: https://i.imgur.com/ayshMzw.png
2. My project in dark mode: https://i.imgur.com/Dz474na.png

I would like the theme to be the same as that shown on the official website in which the code blocks respect the light theme.

1. Docusaurus website in light mode: https://i.imgur.com/YVUn2G5.png
2. Docusaurus website in dark mode: https://i.imgur.com/aTvQXkn.png

[slorber]

Looks like a similar issue: #4788

  themeConfig: {
    prism: {
      theme: require('prism-react-renderer/themes/github'),
      darkTheme: require('prism-react-renderer/themes/dracula'),
    },
  },

How can we document this better? Where did you expect to find such information?

[victornoleto]

That worked, but it didn't fix the whole problem. The highlighted lines are still being shown with the wrong colors.

1. My project: https://i.imgur.com/yk23EmX.png
2. Docusaurus website: https://i.imgur.com/XgsGAkq.png

How can we document this better? Where did you expect to find such information?

Perhaps in Docs > Guides> Styling and Layout?

[slorber]

I believe this is documented: https://docusaurus.io/docs/markdown-features/code-blocks#line-highlighting

You have to use custom CSS and define your own highlighting color.

[victornoleto]

Thank you! And sorry for not seen that ...

[slorber]

That happens :)

Please submit a doc PR if you feel we could make it more obvious

[Josh-Cena]

@slorber Should we document it in the documentation or should we rather just modify the init template? Most users will be satisfied with a default code block style resembling the Docusaurus website.

[slorber]

We could do both, do you want to open a PR?

That seems reasonable to improve the discoverability of the code block theming