[🐞BUG]: colorReplacements not working on the <pre> container

[xsjcTony]

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Describe the bug

Please refer to the reproduction, it's pretty clear.

Reproduction

https://stackblitz.com/edit/vitejs-vite-4byr7f?file=src%2Fmain.ts

Contributes

• I am willing to submit a PR to fix this issue
• I am willing to submit a PR with failing tests

[hddhyq]

It seems that colorReplacements is only used to replace code colors, you should use the bg property to replace the background color.

document.querySelector<HTMLDivElement>('#app')!.innerHTML = await codeToHtml(
  JSON.stringify(obj, null, 2),
  {
    lang: 'json',
    theme: {
      name: 'one-dark-pro',
      bg: '#ff0000', // change the bg
    },
    colorReplacements: {
      // This doesn't work (color on container)
      '#282c34': '#ff0000',
      // This works
      '#e06c75': '#00ffff',
    },
  }
);

[xsjcTony]

How can I change the bg color for dual theme then? I only want to change the dark one.
This is my usage.

highlighter.codeToHtml(JSON.stringify(parsedJson, null, 2), {
  lang: 'json',
  themes: {
    light: 'vitesse-light',
    dark: 'material-theme-palenight',
  },
  colorReplacements: { '#282c34': '#141414' },
});

This doesn't seem to work:

highlighter.codeToHtml(JSON.stringify(parsedJson, null, 2), {
  lang: 'json',
  themes: {
    light: 'vitesse-light',
    dark: {
      name: 'material-theme-palenight',
      bg: '#141414',
    },
  },
});

[xsjcTony]

It seems that colorReplacements is only used to replace code colors, you should use the bg property to replace the background color.

document.querySelector<HTMLDivElement>('#app')!.innerHTML = await codeToHtml(
  JSON.stringify(obj, null, 2),
  {
    lang: 'json',
    theme: {
      name: 'one-dark-pro',
      bg: '#ff0000', // change the bg
    },
    colorReplacements: {
      // This doesn't work (color on container)
      '#282c34': '#ff0000',
      // This works
      '#e06c75': '#00ffff',
    },
  }
);

This won't work either, since if you use object as theme, it means a custom theme, the registered theme string as name won't work