Additional documentation for Color Mode support

[rijkvanzanten]

Heya! When working on my own website, I noticed codeblocks weren't properly switching from light to dark mode when using @nuxtjs/color-mode in combination with @nuxt/content.

Turns out it's because of a default setting in Color Mode which is incompatible with @nuxt/content. The docs for @nuxt/content state that the highlight.theme option is compatible with Color Mode, however this isn't the full story. When you use color mode, you have to set the classSuffix option to "", or rename the themes in @nuxt/content, otherwise code blocks aren't properly themed in dark mode. (minimal repro)

I don't know why color mode has a default value of "-mode" for classSuffix. I've started a related issue to ask if that should just be dropped (nuxt-modules/color-mode#314) in which case no changes are needed here. I'm happy to provide a PR with some tweaked language around the color mode integration depending on the outcome of nuxt-modules/color-mode#314 if you'd like 🙂

(Additionally users of @nuxt/ui won't run into this, as @nuxt/ui's colorMode integration actually strips out the suffix on the user's behalf here.)

✌