(Generated with PixelPoSH)
A Solarized-inspired light & dark CSS theme for Proxmox VE’s web UI.
Automatically switches to dark mode whenever Proxmox’s theme-proxmox-dark.css is loaded.
Lightmode:
Darkmode:
- Light (Solarized Light) by default
- Dark (Solarized Dark) when Proxmox’s dark stylesheet is present
- No JS-framework dependencies—just vanilla CSS & a tiny inline script
- Easy to install and override via Proxmox’s
index.html.tpl
- Copy the CSS
Placesolarized.cssinto your Proxmox server’s static‐assets folder.
By default this is:
/usr/share/pve-manager/images/solarized.css
- Patch the Proxmox template
Edit (or better: override) Proxmox’sindex.html.tpl—usually at:
/usr/share/pve-manager/index.html.tpl
and add before the existing </head> the following snippet:
<script>
document.addEventListener('DOMContentLoaded', () => {
// Detect if Proxmox’s dark stylesheet is loaded
const darkLink = document.querySelector(
'link[href*="theme-proxmox-dark.css"]'
);
if (darkLink) {
document.body.classList.add('proxmox-theme-dark');
}
});
</script>
<link rel="stylesheet" href="/pve2/images/solarized.css">(An example index.html.tpl ships in this repo, see the Example folder)
-
Clear browser cache After restarting the PVE manager service, do a hard-refresh (Ctrl+F5) so your new CSS and script take effect.
-
Restart Proxmox GUI
systemctl restart pveproxy
See the ansible subfolder
- Ansible 2.9+ installed on your control machine
- SSH access (with
become/sudo rights) to one or more Proxmox hosts - A copy of your
solarized.cssinfiles/solarized.css
-
Add your custom CSS:
# Copy your tailored Solarized stylesheet into the files/ directory cp ./solarized.css ./ansible/playbooks/files -
Run the playbook against your Proxmox inventory:
ansible-playbook -i hosts solarized-theme.yml --limit proxmox
This will:
- Copy
solarized.cssto/usr/share/pve-manager/images/solarized.css - Patch Proxmox’s
index.html.tplto include light & dark-mode logic - Restart
pveproxyto serve your new theme
- Copy
-
Playbook file:
solarized-theme.yml -
Key variables (override via
-eorgroup_varsif desired):Variable Default path css_srcfiles/solarized.csscss_dest/usr/share/pve-manager/images/solarized.csstpl_path/usr/share/pve-manager/templates/index.html.tpl
-
Light mode All rules scoped under
body:not(.proxmox-theme-dark)apply Solarized Light defaults. -
Dark mode When Proxmox itself loads its
theme-proxmox-dark.css, our small<script>adds.proxmox-theme-darkto<body>and you can write complementary CSS rules (e.g. underbody.proxmox-theme-dark) for Solarized Dark.
-
Feel free to edit any of the
--baseXXor--accentvariables at the top ofsolarized.cssto tweak colors. -
To add new dark-mode overrides, target:
body.proxmox-theme-dark .your-selector { /* dark-mode styles here */ }
- Fork this repo
- Create a feature branch (
git checkout -b my-tweak) - Commit your changes (
git commit -am 'Add foo') - Push and open a Pull Request
Bug reports and PRs for improved selectors, additional components, or accessibility tweaks are very welcome!
This repo is licensed under CC BY-NC 4.0.
- ✅ Free to use, modify & share for non-commercial purposes (with attribution).
- ❗️ For commercial use please see the license file
Enjoy a Solarized-themed Proxmox UI! 🚀