Dark theme: selected and hovered grid rows are the same colour (light theme distinguishes them)

The Proxmox dark theme has a real problem: selected and hovered grid rows are the same colour. In the light theme they’re different, but in dark you can’t tell if you’re about to click a row or if it’s already selected. Here’s a CSS override that fixes it.

Why it happens

The ExtJS theme used by Proxmox defines separate CSS variables for selected and hovered states in light mode, but the dark theme reuses the same background colour for both. So you get zero visual feedback when hovering over a row that’s already selected.

The fix

Add this to a custom CSS file or use a browser extension like Stylus to inject it into the Proxmox web UI:

/* Dark theme: distinguish selected vs hovered grid rows */
.x-grid-item-selected {
    background-color: #2d3f4f !important;
}
.x-grid-item-over {
    background-color: #3a4f5f !important;
}

Adjust the hex values to your liking. The key is that the hover colour is slightly lighter than the selected colour.

How to apply it

1. Install a browser extension that lets you inject custom CSS per site (Stylus, Cascadea, etc.).
2. Create a new style for your Proxmox host URL.
3. Paste the CSS above and save.

The change takes effect immediately on page reload. No need to restart any services.

My take

This is one of those small things that makes the dark theme feel half-baked. The fix is trivial, but it’s annoying that Proxmox hasn’t shipped it. If you spend a lot of time in the grid views (VMs, storage, backups), this small tweak saves you from misclicks.

If you’re dealing with other Proxmox UI quirks, check out Proxmox GUI Not Opening but CLI Does? Check pveproxy, pvedaemon, Certs, Firewall.