Request: Theme preview page.


Similar to other posts here, the extensions/facets concepts add a bit to the learning curve.
I had to read through quite a bit of the v6 styling page:
before realizing none of it covered the very basics that I wanted. I simply wanted to apply one theme.

It would be really useful to have a theme preview page similar to the old one for CodeMirror 5:

Thanks for your hard work,

There are only two themes being provided by me in this version (the default one and @codemirror/theme-one-dark), so a theme preview page wouldn’t provide a lot to look at. Generally, I’m trying to keep the scope of the packages maintained by me under control (all the messy contributed modes and themes in CM5 were no fun to maintain), so you’re going to have to look towards to rest of the community for this. Maybe ThemeMirror helps?

That link is extremely helpful, I never seen it before via google or this site.
I understand you want your focus to be the packages and within that scope.
I am prepared to put some effort in.

Is the codemirror site on github? Do you accept PRs?
If so I’d be happy to make something very similar to thememirror but on the main site, I would need your initial guidance.

In fact if you want to focus on the programming, putting up requests for others to expand docs may be an approach you want to consider in general.


import {basicSetup} from "codemirror"
  • basicSetup is out of date 0.20.0 and doesn’t have a 6.0 version?

Yes it’s on github (codemirror/website), and I do accept PRs, but I don’t want its scope to grow too much (since I will need to maintain everything that lands in it), and this doesn’t sound like something I want to add.

Looks correct to me. @codemirror/basic-setup is now called just codemirror.

The other point is solid, I am find many partial examples in the docs. Could use some simple complete examples of applying a theme. Not sure if I import them or what? For example GitHub - codemirror/theme-one-dark: One Dark theme for the CodeMirror code editor does not tell me how to use it.


import {EditorView} from "@codemirror/view"

let myTheme = EditorView.theme({
  "&": {
    color: "white",
    backgroundColor: "#034"
  ".cm-content": {
    caretColor: "#0e9"
  "&.cm-focused .cm-cursor": {
    borderLeftColor: "#0e9"
  "&.cm-focused .cm-selectionBackground, ::selection": {
    backgroundColor: "#074"
  ".cm-gutters": {
    backgroundColor: "#045",
    color: "#ddd",
    border: "none"
}, {dark: true})

What do I do with myTheme

Themes Preview, Theme Editor