Changing the Font Size of CM6

There is a similar thread to this, however it doesn’t solve my problem. I would like to change the font size and font family of the editor text using CM6. The solutions I can find online only apply to CM5 and below. Since I can’t hack the CSS manually, are there any editor methods for setting the styles I need?
Thanks.

Create a small theme that sets a font size on the wrapper or the content element, and add it to your configuration.

Here is such a minimal example, to get people started:

import { Extension } from "@codemirror/state";
import { EditorView } from "@codemirror/view";

const FontSizeTheme = EditorView.theme({
  $: {
    fontSize: "11pt"
  }
});

const FontSizeThemeExtension: Extension = [FontSizeTheme];

I updated from 0.17.1 to 0.18.2, and it seems my Theme stopped working. Any clues?

The theme:

const Theme = EditorView.theme({
  $: {
    fontSize: "10.5pt",
    border: "1px solid #c0c0c0"
  },
  $content: {
    fontFamily: "Menlo, Monaco, Lucida Console, monospace",
    minHeight: "200px"
  },
  $gutter: {
    minHeight: "200px"
  },
  $scroller: {
    overflow: "auto",
    maxHeight: "600px"
  }
});

// Theme is used directly in the Extension list

Thanks!

The input format for EditorView.theme changed. See the release notes for @codemirror/view 0.18.0.

Thanks Marijn.

For the record, this is an updated version of the theme posted before, that works with v0.18.2:

const Theme = EditorView.theme({
  "&": {
    fontSize: "10.5pt",
    border: "1px solid #c0c0c0"
  },
  ".cm-content": {
    fontFamily: "Menlo, Monaco, Lucida Console, monospace",
    minHeight: "200px"
  },
  ".cm-gutters": {
    minHeight: "200px"
  },
  ".cm-scroller": {
    overflow: "auto",
    maxHeight: "600px"
  }
});