Data Table Changing Theme IOS

1

I know this isn’t an appstudio issue. But it’s not specifically a bootstrap issue, as Data Tables are not part of bootstrap. Appstudio docs say it is part of bootstrap, but Data Table is by DataTables.net

Whose forum/tech support should I query with my issue about dark themes on IOS with Data Tables.

2

We’re using the Bootstrap 4 flavour of DataTables:
https://datatables.net/examples/styling/bootstrap4

In the past, I’ve gotten good support from the DataTables community:
https://datatables.net/forums/

3

Yes - I’m using the bootstrap4 - the AppStudio included libraries for DataTables and BootSwatch

I found a couple of things researching this.

#1 - THIS IS NOT AN IOS ISSUE :slight_smile: It is common to all devices.

#2 - This is not really a datatables issue, but the problem is in datatables when used with certain “dark” Bootswatch themes - eg, the actual data portion of the control is NOT totally theme compatible. And it’s not a Bootswatch issue. It would have been nice if Bootswatch and DataTables had ever talked to each other.

#3 - Try the datatables sample and change the theme to Cyborg. Since the sample defaults to striped data area, you can see every other line of data. :slight_smile: I’m going to change some of the colors in my datatables using the same method used in the sample for highlighting to solve the problem.

#4 - The reference by @ghenne post to the styling is quite useful.

#5 - I was also trying to get a conformation from Thomas at BootSwatch that the method of changing themes on the fly used in this post: New App Design Considerations - Part 8 BS4 Themes Sample Project was the appropriate method. He has been radio silent for some time. As far as I can tell, the method works fine.

4

Update: Thomas at Bootswatch says changing the link tag contents is the best way to change themes on the fly. EG in this post: New App Design Considerations - Part 8 BS4 Themes Sample Project

I would also look at this post on DataTables forum for the dark mode issues, there is very little posted about dark themes and datatables: Datatables styling issues with bootstrap (White background in black themes) — DataTables forums

However, Thomas has suggested adding these CSS definitions, which works nicely on initial testing:

div.dts div.dataTables_scrollBody {
  background: none;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05);
}
5

The suggested CSS doesn’t provide acceptable results. I decided to just go with the following to override whatever theme the user picked for the scrollbody:

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #888 !important;
    color: #f9f9f9 !important;
}
.table-striped tbody tr:nth-of-type(even) {
    background-color: #999 !important;
    color: #f9f9f9 !important;
}

If you’re not using a striped table, then you’ll be changing the .table class similarly…