score:-1

Accepted answer

Unfortunately it is not possible, so you need to destroy and create new chart.

score:0

This is possible if you're using modern browsers that support CSS variables.

Highcharts.theme = {
    colors: [
      'var(--color1)',
      'var(--color2)',
      'var(--color3)',
      'var(--color4)',
      'var(--color5)',
      'var(--color6)',
    ]
}

Highcharts.setOptions(Highcharts.theme);

function setTheme(themeName) {
  // remove theme-* classes from body
  removeClasses = Array.from(document.body.classList).filter(s => s.startsWith('theme-'));
  document.body.classList.remove(...removeClasses)

  if (themeName) {
    document.body.classList.add('theme-' + themeName);
  }
}

CSS

body {
  --color1: #e00;
  --color2: #b00;
  --color3: #900;
  --color4: #600;
  --color5: #300;
  --color6: #000;
}

body.theme-dark {
  --color1: #555;
  --color2: #444;
  --color3: #333;
  --color4: #222;
  --color5: #111;
  --color6: #000;
}

body.theme-retro {
  --color1: #0f0;
  --color2: #ff0;
  --color3: #0ff;
  --color4: #0a0;
  --color5: #aa0;
  --color6: #00a;
}

Related Query

More Query from same tag