[Unofficial Mod] WebUI Dark Mode & Layout Tweaks - Enjoy!

Omar

Hi fellow cPfence users!

After some tinkering with the WebUI to better suit my preferences, I thought I'd share the results in case others might find them useful. This unofficial mod includes:

✓ Dark mode support (auto-switches with system preferences via prefers-color-scheme)
✓ Optimized wide-screen layout (less dead space, minimized scrolling)
✓ Enhanced color scheme (now with more of cPfence’s signature greens & oranges)

Preview Images: View more Screenshots here

Download & Installation:

Download modified files
Backup your original files (located in /opt/cpfence/webui/)
Replace these files:
- webui/index.html
- webui/detect
- webui/settings
- webui/tools
- webui/waf
- webui/static/css/style.css

Important Note:
❗ This is an unofficial mod, so use at your own discretion. Always backup your original files first!

Bonus:
The cPfence team kindly informed me that future versions will include native support for custom CSS, which means our modifications won't be lost after updates. 🎉

Special thanks to Karim from cPfence support for encouraging me to share this with the community. Hope some of you find it useful!

Have a great weekend! 🙂

cPFence

Thank you Omar for sharing your custom version, definitely a nice touch for dark mode fans.

The latest release now supports custom CSS directly in the WebUI, We recommend avoiding changes to other files, as they’ll be overwritten with updates.

We’ll be using your version as a base and plan to roll out an official dark mode soon, perfect for those who like to turn off the lights and get to work. Have a great weekend!

Omar

cPFence That's fantastic news! I'm thrilled to hear that.

The custom CSS feature is now live (just tested it - works perfectly!)

My dark mode experiment might contribute to the official version 🥳

Since I can no longer edit my original post, I removed the download link to avoid confusion. This way users won't risk overwriting files that might be updated.

I'll be keeping an eye out for the official release of dark mode (though I suspect your team's version will far surpass my quick tweaks!).

Thanks again for being so supportive of community contributions - this responsive approach is why cPfence stands out. Looking forward to the update!

P.S. I'll leave the link to the CSS styles from my previous experiment here in case anyone wants to use them in the new custom CSS option. Download experimental custom CSS style with dark mode