[Feature] Change theme / dark mode dynamically.

[infacto]

What problem does this feature solve?

Currently you can only pass the theme name to the init method.

What does the proposed API look like?

It would be great if we have a method to change the theme (by name). There is a "darkMode" option. But this is only the half of a real dark mode.

Use case: Your page allows user to switch dark mode dynamically by a button or select list. All the content of the page immediately changes their look. In general by CSS. The echarts chart is a bit more work to implement that. I with it could be done simpler.

[Ovilia]

Do you have a suggest API to do this?

[infacto]

Afaik you can only pass the theme via echarts.init(container, myThemeName) and dispose before new init, right? And btw. why is there also a darkMode property in options? In my case it has no effect or just slighly changes some texts. But it's far away from a real dark mode. But anyway, I would expect to set the theme in options or new method. ...

Another suggestion: The default dark theme init(container, 'dark') should be more decent in my opinion. The normal (light) theme has no background (transparent). The dark mode has a dark puple blue color. Usually you switch to dark theme, when your app is in dark mode. Means, the HTML container also have a dark background and I would expect a transparent background if the charts to harmonize with my app color. To be honest, I just want a light and dark mode that just changes the color contrast without being too flashy. And easy toggle between these themes without hasle dynamically (not init again).

[ed2050]

This is still an issue. Any progress since Feb? Tearing down and rebuilding all the charts with dispose / init (like this) is error-prone, expensive, and doesn't play nice with other libs that use echarts.

[juancarlosgzs]

A preconfigured dark theme that goes in automatically when a .dark class applies should be enough I think. Some progress would be appreciated

[Shyam-Chen]

<!-- Chart.vue -->
<script lang="ts" setup>
import EChart from 'vue-echarts';
import { useColorMode } from '@vueuse/core';
import { use } from 'echarts/core';
import { LegendComponent, GridComponent, TooltipComponent } from 'echarts/components';
import { SVGRenderer } from 'echarts/renderers';

use([LegendComponent, GridComponent, TooltipComponent, SVGRenderer]);

const colorMode = useColorMode();
</script>

<template>
  <EChart v-bind="$attrs" :theme="colorMode" autoresize class="Chart" />
</template>

<style lang="scss" scoped>
.Chart :deep(svg > rect) {
  @apply !fill-transparent;
}
</style>

<script lang="ts" setup>
import type { EChartsOption } from 'echarts';
import { computed } from 'vue';
import { use } from 'echarts/core';
import { LineChart } from 'echarts/charts';

import Chart from '~/components/Chart.vue';

use([LineChart]);

const option = computed<EChartsOption>(() => ...);
</script>

<template>
  <Chart :option="option" class="w-full h-100" />
</template>

https://github.com/apache/echarts/assets/13535256/3c57e3d4-b0ac-4275-abd6-385ce2de6389

[jul-lam]

Are there any updates? We'd like to change themes dynamically within our design system. It would be greatly appreciated if a method such as setTheme(name: string) would be available on the instance. However, it would be sufficient to be able to retrieve the original option object from an instance, enabling the creation of a new instance with a different theme. The issue with getOption is that it returns the current state of the chart, including theme configurations. Any suggestions on how to accomplish this are also highly appreciated.

[sanabel-al-firdaws]

Can't echarts use css variables? @Ziqi-Yang

var(--echarts-red)

then the user can have a stylesheet that changes these variables