Advice for authoring custom themes

v6
1

I’m trying to tweak my editor’s current CodeMirror 6 theme to fit the surrounding brand, and it’s been a bit tricky. For example - styling the hover-triggered popup that shows lint issues:

  • I can’t select it in the Chrome Devtools because if I right-click on it to inspect, it’ll disappear.
  • I can’t find a reference for what the classes are that apply to this element, like .cm-diagnosticAction. Reading the source code of the @codemirror/lint package is helpful, but doesn’t tell the full story about what structure those classes are in, what nesting is like.
  • It’s not clear how to override built-in lints in a predictable way. @codemirror/lint brings with it default styles, which aren’t overridden if you just write ".cm-diagnostic": {} - you need to specifically override each default rule. It’s not clear if there’s a way to use a package like @codemirror/lint but not include its default styles.

Any help from folks who have worked out a good workflow here would be super useful, thanks!

2

Definitely annoying, yeah. If you know the tooltips are all cm-tooltip, you could use a setTimeout to log the element via querySelector or something.

You can’t because that would be entirely broken (a lot of the styles are load-bearing). You can override them by providing styles with the same specificity in a theme (or plain CSS file).

Reading the source for the one-dark theme might help. That styles panels and tooltips. If you need to style specific lint-related elements, the base styles in the lint package will tell you precisely what you need to override.

1 Like
3

Another trick I’ve found very useful is

setTimeout(() => {
  debugger;
}, 2000)

Which will freeze the whole page after 2 seconds, allowing you to inspect and style the element without it disappearing.