My DataTables experiment with DARK mode

HTML

<!DOCTYPE html>
<html>
<head>
    <title>A test on dark mode</title>

    <!-- add jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.slim.min.js" integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" crossorigin="anonymous"></script>

    <!-- add datatables.net library + responsive extension, see
         https://datatables.net/download/ -->
    <link href="https://cdn.datatables.net/v/dt/dt-2.1.8/r-3.0.3/datatables.min.css" rel="stylesheet">
    <script src="https://cdn.datatables.net/v/dt/dt-2.1.8/r-3.0.3/datatables.min.js"></script>
    
    <!-- add datatables.net library + responsive extension + Bootstrap5, see
         https://datatables.net/download/ 
    <link href="https://cdn.datatables.net/v/bs5/dt-2.1.8/r-3.0.3/datatables.min.css" rel="stylesheet">
    <script src="https://cdn.datatables.net/v/bs5/dt-2.1.8/r-3.0.3/datatables.min.js"></script>
    -->

    <!-- add the IP-address-sorting plugin
    <script src="https://cdn.datatables.net/plug-ins/2.1.8/sorting/ip-address.js"></script>
   -->
 
</head>
<body>
    <h1 class="topLevel">MyTest</h1>

  <!-- the Datatables.net table will be attached to this TABLE element -->
  <table id="current_table" class="display" width="100%"></table>

</body>
</html>

JavaScript

function initCurrentTable() {
    console.log("Initializing table for current DHCP clients");

    // custom sorting for content formatted as HH:MM:SS
    $.fn.dataTable.ext.order['custom-time-order'] = function (settings, colIndex) {
        return this.api().column(colIndex, { order: 'index' }).nodes().map(function (td, i) {
            var time = $(td).text().split(':');
            // convert to seconds (HH * 3600 + MM * 60 + SS)
            return (parseInt(time[0], 10) * 3600) + (parseInt(time[1], 10) * 60) + parseInt(time[2], 10);
        });
    };
    table_current = new DataTable('#current_table', {
            columns: [
                { title: '#', type: 'num' },
                { title: 'Friendly Name', type: 'string' },
                { title: 'Hostname', type: 'string' },
                { title: 'Link', type: 'string' },
                { title: 'IP Address', type: 'ip-address' },
                { title: 'MAC Address', type: 'string' },
                { title: 'Expires in', 'orderDataType': 'custom-date-order' },
                { title: 'Static IP?', type: 'string' }
            ],
            data: [
            	[1, "test", "hostname", "N/A", "1.2.3.4", "ab:bb:cc:dd:ee:ff", "12:00:00", "NO"]
            ],
            pageLength: 20,
            responsive: true
            /*, className: 'data-table'*/
        });
}

function initAll() {
    initCurrentTable()
    
    // copy-pasted from https://datatables.net/manual/styling/dark-mode#Auto-detection
    let prefers = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    let html = document.querySelector('html');

    html.classList.add(prefers);
    html.setAttribute('data-bs-theme', prefers);
    console.log("Settings data-bs-theme to ", prefers);
}
//document.addEventListener('DOMContentLoaded', initAll, false);
initAll()