Dark Mode Table

<!DOCTYPE html>
<title>My Example</title>

.dark-mode-table {
    width: 100%;
    border-collapse: collapse;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #e0e0e0; /* Main text color (light gray) */
}

.dark-mode-table thead th {
    padding: 12px 15px;
    background-color: #2c2c2c; /* Slightly lighter than the main bg for headers */
    border-bottom: 2px solid #444; /* A stronger border for the header */
    text-align: left;
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff; /* Pure white for headers for emphasis */
}

.dark-mode-table tbody td {
    padding: 12px 15px;
    border-bottom: 1px solid #333; /* Very subtle row divider */
}

/* Zebra-striping can also work in dark mode, but here we opt for a hover effect */
.dark-mode-table tbody tr:hover {
    background-color: #252525; /* A subtle highlight on hover */
}

/* Remove border on the last row */
.dark-mode-table tbody tr:last-child td {
    border-bottom: none;
}

.dark-mode-table .code {
    font-family: 'SF Mono', 'Courier New', monospace;
    background-color: #3a3a3a;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85rem;
}
.dark-mode-table .status-ok {
    color: #4caf50; /* Green */
    font-weight: bold;
}
.dark-mode-table .status-failed {
    color: #e57373; /* Red */
    font-weight: bold;
}

</style>

<div class="dark-mode-container">
    <table class="dark-mode-table">
        <thead>
            <tr>
                <th scope="col">Commit ID</th>
                <th scope="col">Branch</th>
                <th scope="col">Message</th>
                <th scope="col">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><span class="code">a1b2c3d</span></td>
                <td><span class="code">main</span></td>
                <td>Fix critical login bug</td>
                <td class="status-ok">Build OK</td>
            </tr>
            <tr>
                <td><span class="code">e4f5g6h</span></td>
                <td><span class="code">feature/new-dashboard</span></td>
                <td>Add analytics widgets</td>
                <td class="status-ok">Build OK</td>
            </tr>
            <tr>
                <td><span class="code">i7j8k9l</span></td>
                <td><span class="code">feature/new-dashboard</span></td>
                <td>Refactor chart components</td>
                <td class="status-failed">Build Failed</td>
            </tr>
            <tr>
                <td><span class="code">m0n1o2p</span></td>
                <td><span class="code">main</span></td>
                <td>Update documentation links</td>
                <td class="status-ok">Build OK</td>
            </tr>
        </tbody>
    </table>
</div>