datatables columns visibility dark mode bug

how can i fix this issue when i change the metronic template v8.1.6 to dark mode?

https://mega.nz/file/tkBVmCTR#IYxNRBub1aNin5khUl7wXVH381LEDj_DVIkJ-CFYKzE

this is the screenshoot photo for this issue.

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

Hi,

At the moment Metronic does not have columns visibility extension integration. By right the dark mode support requires customizing the extension. We will add this to our to-do list and try to release it as soon as possible.

If you need any further help could you please provide us with your JS/HTML code via https://gist.github.com/ we will try to help you further.

Regards.

i using metronic datatables plugin and one extra columns visibility only, can u help to let me know how to using css to fix this issue please?

Hi,

You can add the below sass code into src/sass/vendors/plugins/_datatables.scss


div.ColVis_collection {
background-color: var(--kt-body-bg);
border: 1px solid var(--kt-body-bg);
box-shadow: var(--kt-dropdown-box-shadow);
}

div.ColVis_collection button.ColVis_Button {
background-color: var(--kt-gray-100);

.ColVis_title {
color: var(--kt-gray-600);
}
}

Then recompile your assets folder with Gulp or Webpack.

Please note that the build tools are required only in the development environment just to compile the assets when the source folder files are modified. In the hosting/server deployment you will only need the compile assets, no need to install the build tools dependencies there.

You can inspect the col vis dropdown in your browser inspector and do further customizations using the CSS variables according to your requirements.

Regards.

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(