No colors for default light theme

[eriknyk]

I'm using exacly code:

<script lang="ts">
  import { xml } from "@codemirror/lang-xml";
  import CodeMirror from "svelte-codemirror-editor";
  import xmlFormat from "xml-formatter";

  export let contents: string = "<xml>.....</xml>";
</script>

<CodeMirror
  value={contents ? xmlFormat(contents) : ""}
  lang={xml()}
  styles={{
    "&": {
      width: "100%",
      maxWidth: "100%",
      height: "100%",
    },
  }}
/>

And displays xml code without colors as following:

But if I use exactly same code with including dark theme as following:

<script lang="ts">
  import { xml } from "@codemirror/lang-xml";
  import CodeMirror from "svelte-codemirror-editor";
  import xmlFormat from "xml-formatter";
  import { oneDark } from "@codemirror/theme-one-dark";

  export let contents: string = "<xml>.....</xml>";
</script>

<CodeMirror
  value={contents ? xmlFormat(contents) : ""}
  lang={xml()}
  theme={oneDark}
  styles={{
    "&": {
      width: "100%",
      maxWidth: "100%",
      height: "100%",
    },
  }}
/>

xml is correctly hightlighed

---

I'm using versions:

"@codemirror/lang-xml": "^6.0.0", "@codemirror/theme-one-dark": "^6.1.2", "svelte-codemirror-editor": "^1.1.0",

Any feedback will be appreciated! Regards.

[SomaticIT]

Hello,

Thank you for your feedback. Indeed, that's unexpected!

My first thought is that when you specify styles, you have to specify a theme since we do not specify one by default. However, if I remember correctly, I use the lib like you in most of my projects, I will take a look a come back.

Thanks, Maxime