How to apply styles to inner CodeMirror elements like ".cm-selectionBackground"?

[janriemer]

Hello there 👋 ,

I'm trying to style inner CodeMirror elements like .cm-selectionBackground or .cm-gutters.

The official CodeMirror docs show how to do this:
https://codemirror.net/examples/styling/

But I don't know how to do it with vue-codemirror.

I've tried with :style binding, but it seems it's only used for general styling of the CodeMirror component, not specific parts within the editor.

So how can I style specific parts of the editor, like background color of highlighted text etc.?

Thank you for your help. 🙂

[janriemer]

Ok, I think I've found the answer thanks to AI search phind:
https://www.phind.com/search?cache=5d629319-43c5-4111-b8f5-498d9bdf0308

The gist is: You need to provide a custom theme and provide it as a :theme prop into the vue-codemirror component.
When you create a custom theme, you have access to the inner classes of codemirror. See an example for the oneDark theme here:
https://github.com/codemirror/theme-one-dark