Dark mode and VanillaJS examples

allan

I'm delighted to announce two items that span across the entire DataTables ecosystem:

• Dark mode! You might be using it on this site already, depending on your OS preferences. Dark mode is supported for both the DataTables default styling, and the recently released Bootstrap 5. Information about dark mode is available in the manual.
• Vanilla JS code for the examples. You can now select between jQuery style initialisation, and VanillaJS (with ES6+ based code) for nearly all examples (except SearchBuilder and SearchPanes which are still to be done).

A selector for both dark mode and vanillaJS / jQuery based code is available in the top right (code style only on the example pages). Dark mode is also now fully supported on this and the Editor sites.

There are a lot of changes to make this possible, so it is possible I've missed the odd selector on the site - I'll likely be making tweaks over the next few days.

DataTables 1.13.5, Editor 2.2.0 and all of the extensions have been released today to support dark mode. The download builder and our npm packages are all up to date with these changes.

I'll be writing a blog post with more details in the next few days - until then, I hope you like the changes.

Regards,
Allan

kthorngren

Nice, wasn't expecting that when I refreshed the page

When typing in a comment box the contrast of the dark blue background and text make the text hard to see in Chrome on the Mac.

Kevin

allan

Should be fixed (I noticed that when I was writing the above!). Might need a hard cache refresh to clean it out. I need to do some work on the cache invalidation of files for deploy. Naming is the other thing I struggle with

Allan

kthorngren

Much better thanks!

Kevin

kthorngren

I have the main Datatables page set to use light mode but the cdn page, https://cdn.datatables.net/ , still shows dark mode.

I set it to light mode because there is a brief white flash when changing or refreshing the page with dark mode.

Kevin

allan

Ooo - it uses localStorage so the sub-domain might impact that. I'll need to look into that one.

I set it to light mode because there is a brief white flash when changing or refreshing the page with dark mode

The reason for that is that I use Javascript to add a class to the page (dark), and that happens on page ready. It might be possible to just have that happen immediately and then do the menu stuff when the page is ready.

Thanks for the feedback Kevin - really appreciated, as always!

Allan

allan

Some progress - I've used cookies rather than localStorage for the theme preference now, since that allows cross sub-domain support. I've also got the theme class being added more or less before anything else now. There is still the odd flicker in Chrome - better than before, but not yet perfect. More investigation required

Allan