Dark theme is not applying on the Highchart library charts
We are using HTML metronic themes in our ASP .NET MVC application. This application is using Highchart chart library for rendering different charts.
We have used Finance Performance admin dashboard layout for our report dashbaord.
Now when we are switching between light and dark mode, background if Highcharts are still white in dark more and they do not turn as per the dark mode theme.
What changes we need to make dark mode to work with hightchart library.
Replies (4)
If the dark theme isn't applying to Highcharts in your application, ensure that you're not using hardcoded color values. Instead, use CSS variables like KTUtil.getCssVariableValue('--kt-primary'); to dynamically adapt the chart colors to the theme. For further guidance, refer to the documentation on CSS variables in JS. myprepaidcenter com required
Hi,
You should have properties where you are setting color for your hightchart instance, instead of using the hardcoded color value you can set it to CSS variable KTUtil.getCssVariableValue('--kt-primary');.
Check all available CSS variables in our doc:
https://preview.keenthemes.com/html/metronic/docs/base/utilities#css-variables-in-js
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Thanks Lauris for your reply.
We will try the suggested solution and will reach out to you in case further help is required.
Thanks once again.
Hi,
Glad to hear that. All the best with your project!
Regards,
Lauris Stepanovs,
Keenthemes Support Team
