Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

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.


G
Guest 3 years ago
HTML Next.js
4 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)

user
Philip T. 2 years ago

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


user
Lauris Stepanovs Author 3 years ago

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


G
Guest 3 years ago

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.


user
Lauris Stepanovs Author 3 years ago

Hi,

Glad to hear that. All the best with your project!

Regards,
Lauris Stepanovs,
Keenthemes Support Team


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(