Hi,

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

<code lang="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.

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,

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 we will try to help you further.

Regards.