[Solved] How do I switch the bar colors to dark mode (and vice versa)?

Question

Hello! I have a bug in my project that I've been putting off since it's purely a cosmetic thing but it bothers me quite a lot.

I want it so that when users switch theme on the page that this chart is on, the bar chart colors switch too, but I cannot find the answer anywheee that I have looked. This is a simplified snippet of the code I have:
https://code.sololearn.com/WaRoBd0TXw31/?ref=app

You can see that when the switch theme button is hit, the chart is not affect at all and I'm not sure how to change that.

This is how the full page looks if curious. Everything else on the page switches mode colors completely fine, it's only the chart I am having issues with:
https://www.sololearn.com/post/1736647/?ref=app

Answer 1

The chartCreation function should return a chart object, which can be used to access the required properties. After updating the color scheme, you can rerender the chart by calling the chart's update method.

https://code.sololearn.com/Wq17qBuEy5R5/?ref=app

Answer 2

ODLNT Thanks a ton!!! That setColorScheme function was just what I needed.

I actually did not need a chart object returned and I saw that you editted my dark-mode but that lacks a lot of context so I couldn't just use toggle. Like I said in the question, that codebit is simplified code.

The dark mode toggling is not even in the same file or module as the function for the charts, haha. So just incase anyone has the same problem but wants to call the chart from somewhere else, just do something like:

const myChart = Chart.getChart('[chart-id]');

Thanks again a super ton! I can finally take this off my todo list!

Answer 3

It seems like you used a library, I don't know about that... In case you want to do it on the scratch level, it's always wise to have a State machine that handles all theme states.. something like shown in my code. It's possible there's a better implementation but I'm not a web dev btw

https://code.sololearn.com/WhM2IxgYfgl0/?ref=app

Answer 4

Justice, you're welcome. I'm glad I could help check off your todo list.

My thinking behind the edit was what is more simplified that toggle 😉

Keep coding.

Answer 5

Runtime Terror I appreciate this but this doesn't really answer my question at all. My themes are being handle by CSS and my backend server. Javascript does a super simple part of just changing some text, icons and the body class.