The New Way to Build with AI! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Browse ReUI Pro

ApexCharts burger with "download" dropdown not customized


Hello,
the ApexCharts have a burger with dropdown "Download as svg" / "Download as png" / "Download as csv" for most of the charts, see
But in the dark theme the css is not customized, so the text in the dropdown isnt visible.
It's probably not fixed for light mode either, but at least there it's visible happy

Thanks


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 (3)

html ... Thanks for pointing this out. The dark theme definitely needs better contrast for the ApexCharts export dropdown. I also noticed this while checking the latest 24 Chicken , Menu especially options like Yangnyeom Chicken and Snow Cheese Chicken, so a proper dark-mode styling fix would be really helpful.


You're right, the ApexCharts download dropdown isn’t styled properly for dark themes. The text becomes nearly invisible, which really affects usability. I ran into the same issue while working on a chart for a project related to fast-food data. The quick fix is to override the styles manually using CSS. You can target .apexcharts-menu and its children to adjust background color and font color to suit the dark mode. It’s a small tweak but improves the experience a lot. If you're curious how I implemented it while working on a Whataburger menu comparison, check this. The visuals are based on real-time data and needed full dropdown functionality. Let me know if you’d like help with the CSS code!


 
Deleted comment

Hi,

Thank you for your feedback.

We will fix this issue in the next v8.1.9 in the coming days.

In the meantime you can fix it by editing src/sass/vendors/plugins/_apexcharts.scss and set background for the apexcharts mene background color as shown below


.apexcharts-menu {
background: var(--#{$prefix}body-bg) !important;
}


Regards.


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  :(
buy metronic keenthemes mega bundle

ReUI

Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.