ApexChart does not change colors correctly when you change the theme.mode property

I am using Tailwind and I created a service to check if the page is in dark or light mode. The service works fine, so I try to use it to change the property theme.mode of chartOptions.

I am using Lodash.

ngOnInit(): void {
this.themeService.themeChange.subscribe((isDarkTheme) => {
if (isDarkTheme) {
const theme = this.chartOptions.theme;
this.chartOptions = {
...this.chartOptions,
theme: {
...theme,
mode: 'dark',
},
};
} else {
const theme = this.chartOptions.theme;
this.chartOptions = {
...this.chartOptions,
theme: {
...theme,
mode: 'light',
},
};
}
console.log(this.chartOptions);
});
}


If I start on light mode, the colors are good and if I change to dark mode, the colors change perfectly, but the problems occur when I change to light mode again. The property fill of the tag text on the y-axis remains a light color, so it disappears because in light mode the background is white.

I do not have any style property. This is my chartOptions :

this.chartOptions = {
series: [
{
name: "distibuted",
data: [21, 22, 10, 28, 16, 21, 13, 30]
}
],
chart: {
height: 350,
type: "bar",
events: {
click: function(chart, w, e) {
// console.log(chart, w, e)
}
}
},
theme: {
mode: 'light'
},
colors: [
"#008FFB",
"#00E396",
"#FEB019",
"#FF4560",
"#775DD0",
"#546E7A",
"#26a69a",
"#D10CE8"
],
plotOptions: {
bar: {
columnWidth: "45%",
distributed: true
}
},
dataLabels: {
enabled: false
},
legend: {
show: false
},
grid: {
show: false
},
xaxis: {
categories: [
["John", "Doe"],
["Joe", "Smith"],
["Jake", "Williams"],
"Amber",
["Peter", "Brown"],
["Mary", "Evans"],
["David", "Wilson"],
["Lily", "Roberts"]
],
labels: {
style: {
colors: [
"#008FFB",
"#00E396",
"#FEB019",
"#FF4560",
"#775DD0",
"#546E7A",
"#26a69a",
"#D10CE8"
],
fontSize: "12px"
}
}
}
};


I am using Firefox and Angular 15.

I was just trying to search for information on the web, but nothing was related to my problem.

Continue reading...