How to theme - Rails 7 + Stimulus?

1

I am stumped on how to theme CodeMirror using Rails 7 + Stimulus.

I have a stimulus controller that creates the code mirror element. It works great!
However, I cannot figure out how to add a theme.
What I’ve tried (based on documentation)

  1. Adding ayu-dark.css to my app/assets/stylesheets and setting the theme in my Editor View to ayu-dark.
    I added CodeMirror using the npm package.
    Any help would be appreciated! The below shows a CodeMirror but does not theme it.
import { Controller } from "@hotwired/stimulus"
import { basicSetup, EditorView } from "codemirror"
import { autocompletion } from "@codemirror/autocomplete"
import { sql } from "@codemirror/lang-sql"
import { format } from 'sql-formatter';
import "../../assets/stylesheets/ayu-dark.css"


export default class extends Controller {
  static targets = ["editor", "input"]
  static values = { doc: String }

  connect() {
    let formattedSql = this.docValue ? format(this.docValue, { language: 'sql' }) : "";
    this.editor = new EditorView({
      theme: "ayu-dark",
      doc: formattedSql,
      extensions: [
        basicSetup,
        sql(),
        autocompletion({ override: [this.completions] }),
        EditorView.updateListener.of((view) => {
          if (view.docChanged) { this.sync() }
        }),
        EditorView.lineWrapping,
      ],
      parent: this.editorTarget
    })
    this.updateToMinNumberOfLines(10)
  }
2

Are you using ayu-dark.css from the CodeMirror 5 package? Because those themes will not work at all with version 6.

3

Oh! Yup, I sure am. I grabbed it from here (which I now see has a 5 in in the URL) → Index of /5/theme/
What’s the correct way to theme in Codemirror 6?

4

You can look at this one for an example.