Change code block theme according to the Light/Dark mode

[iqfareez]

Hi, I'm aware of we can customize the look of code block via prism.css. But, I'm wondering if I can change the code block style based on the light/dark mode of the website.

Thank you.

[eduardo-escoto]

This is definitely a pain point for me as well! Would be awesome if we could do this. 👍🏼

[dlarroder]

You can use tailwind to style your code blocks in prism.css

For example:

.token.constant,
.token.function,
.token.builtin,
.token.char {
  @apply text-gray-400 dark:text-white;
}

This should result to:

Screen.Recording.2022-07-20.at.12.48.55.AM.mov

Hope this helps!