How to style the editor outside the createTheme properties in CodeMirror?

[lancejpollard]

I want to change some structural things of the editor as defined here https://codemirror.net/examples/styling/ , how do I get access to the EditorView to create a theme like:

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})

Yet at the same time create a theme using your system:

import { tags as t } from '@lezer/highlight'
import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes'

export const defaultSettingsDracula: CreateThemeOptions['settings'] = {
  background: '#282a36',
  foreground: '#f8f8f2',
  caret: '#f8f8f0',
  selection: 'rgba(255, 255, 255, 0.1)',
  selectionMatch: 'rgba(255, 255, 255, 0.2)',
  gutterBackground: '#282a36',
  gutterForeground: '#6D8A88',
  gutterBorder: 'transparent',
  lineHighlight: 'rgba(255, 255, 255, 0.1)',
}

export const draculaInit = (options?: Partial<CreateThemeOptions>) => {
  const { theme = 'dark', settings = {}, styles = [] } = options || {}
  return createTheme({
    theme: theme,
    settings: {
      ...defaultSettingsDracula,
      ...settings,
    },
    styles: [
      { tag: t.comment, color: '#6272a4' },
      { tag: t.string, color: '#f1fa8c' },
      { tag: t.atom, color: '#bd93f9' },
      { tag: t.meta, color: '#f8f8f2' },
      { tag: [t.keyword, t.operator, t.tagName], color: '#ff79c6' },
      {
        tag: [t.function(t.propertyName), t.propertyName],
        color: '#66d9ef',
      },
      {
        tag: [
          t.definition(t.variableName),
          t.function(t.variableName),
          t.className,
          t.attributeName,
        ],
        color: '#50fa7b',
      },
      { tag: t.atom, color: '#bd93f9' },
      ...styles,
    ],
  })
}

export const purpleTheme = draculaInit()

How do you combine these two?

[lancejpollard]

react-codemirror/themes/theme/src/index.tsx

Line 113 in 042b6c9

const themeExtension = EditorView.theme(themeOptions, {

[lancejpollard]

Now the syntax highlighting doesn't appear to work.

Here I have JSON specified:

import { json } from '@codemirror/lang-json'

    <CodeMirror
      value={value}
      height={height}
      basicSetup={{
        lineNumbers: false,
        defaultKeymap: false,
        searchKeymap: false,
        historyKeymap: false,
        foldKeymap: false,
        completionKeymap: false,
        lintKeymap: false,
        syntaxHighlighting: true,
      }}
      theme={purple}
      extensions={[json()]}
    />

And I'm not seeing any syntax classes added to the DOM:

Any ideas what could be wrong? Just got a basic setup going with Next.js, the color overrides for the background and line highlights is working, just not the syntax highlighting.

[lancejpollard]

I ran pnpm dedupe and now syntax highlighting is working! Strange .... I just installed everything so I don't see how I would have duplicate libs.