mirror of
https://github.com/NginxProxyManager/nginx-proxy-manager.git
synced 2026-04-25 17:35:52 +03:00
[GH-ISSUE #707] Dark Mode Support #596
Labels
No labels
awaiting feedback
bug
cannot reproduce
dns provider request
duplicate
enhancement
enhancement
enhancement
good first issue
help wanted
invalid
need more info
no certbot plugin available
product-support
pull-request
question
stale
troll
upstream issue
v2
v2
v2
v3
wontfix
No milestone
No project
No assignees
1 participant
Notifications
Due date
No due date set.
Dependencies
No dependencies set.
Reference
starred/nginx-proxy-manager-NginxProxyManager#596
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Originally created by @redtripleAAA on GitHub (Nov 9, 2020).
Original GitHub issue: https://github.com/NginxProxyManager/nginx-proxy-manager/issues/707
RFE for Dark Mode Support
@C-Fu commented on GitHub (Dec 29, 2020):
This would be awesome!
@vMeph commented on GitHub (Jan 20, 2021):
+1 for it :)@wrdx commented on GitHub (Feb 17, 2021):
It looks like Tabler supports it: https://preview.tabler.io/layout-dark.html
@jc21 commented on GitHub (Feb 17, 2021):
And it indeed looks sexy. I'm rewriting the UI with react for version 3, which which be much easier to integrate a dark mode.
@jonasled commented on GitHub (Apr 10, 2021):
I've played a bit around with the SCSS and also implementing one without the tabler resources is not very difficult: https://gitlab.jonasled.de/jonasled/nginx-proxy-manager-dark/-/blob/master/frontend/scss/darkmode.scss
@TropicLegend commented on GitHub (Jul 16, 2021):
Where can I change these files?
@root9191 commented on GitHub (Aug 20, 2021):
Hello, how Can i implent the Dark Mode in my Proxy Manager Version 2.9.7?
@FroggMaster commented on GitHub (Nov 27, 2021):
I created a Dark Mode theme VIA CSS which can be easily applied VIA the Stylish Extension. Stylish will allow you to toggle the theme quickly if you so choose. In addition it will allow for you to make easy/live modifications if you'd like to change the theme to your preferences. I have heavily commented my CSS to give you some understanding of the areas I've changed.
You can find the Stylish theme that I created here:
https://userstyles.org/styles/220202/nginx-proxy-manager-dark-theme
You can also create a custom CSS then mount it within the NGINX Proxy Manager docker container. This I would consider to be a little bit more of an advanced method, but this would mean no matter where NGINX Proxy manager was accessed from it would display the custom theme; Unlike with the Stylish extension, where the extension must be installed for the theme to be visible. I'm honestly surprised there is no option within the GUI to provide custom CSS. Or instructions on simply mounting a CSS file within the container. Please note that the CSS for the Stylish theme I provided will only modify portions of the CSS I wanted to change. It is not a complete CSS for NGINX Proxy Manager and I would not recommend mounting it in your docker container.
NGINX Also allows for sub filters to be used when passing a webpage or server through it, which in turn can cause CSS to be loaded this way as well. If you were to pass NGINX Manager through itself, and apply a sub filter this would allow for modification of the CSS as well.
There are A LOT of ways themes/custom CSS could be implemented into this application and I would HIGHLY suggest it. Even if it's just VIA the ability to apply your own custom CSS overtop of the original CSS. User's will eventually create themes and there will be an immense variety of options. Until the develop opts to support this functionality though, I doubt we will see many themes developed for the application.
It's obvious that this is a sought after feature though. Within 24 hrs of me submitting my theme, there was thirteen separate user's whom had installed it. In such a short period of time, that screams to me others are deeply interested in a Dark Mode option.
@ItsNoted commented on GitHub (Dec 17, 2021):
Installing browser plugins is not an option for me.
@operinko commented on GitHub (Dec 17, 2021):
I would love to see theme-park.dev support on nginx-proxy-manager, though that seems to imply requiring linuxserver.io builds
@FroggMaster commented on GitHub (Jan 3, 2022):
There are alternative suggestions in my post. Though, the most non-technical method would be to use an Extension.
@root9191 commented on GitHub (Jan 3, 2022):
Could you explain, how i can apply the CSS in Nginx? Do i need the Advanced Tab for this?
@Amoenus commented on GitHub (Jan 18, 2022):
Here's my attempt to create dark theme CSS, it's very chatty but should cover almost everything
Dark Theme CSS
Comes with a dark scroll bar though ;)
@mellowism commented on GitHub (Jan 18, 2022):
My Gravatar didn't like it, went all gray. Other than that it looks real nice!

@lammersbjorn commented on GitHub (Jan 19, 2022):
How do I use this?
@Amoenus commented on GitHub (Jan 19, 2022):
I just put it in Stylus since Stylish had some shady things going on that I don't care enough to remember.
@Amoenus commented on GitHub (Jan 19, 2022):
Interesting. Mine seems to show fine.

Just in case I've made it against the latest v2.9.15 (at the time of writing). So maybe check your version.
But this is getting out of topic, so comment on a gist if you need any help
@lammersbjorn commented on GitHub (Jan 19, 2022):
Alright
@root9191 commented on GitHub (Jan 21, 2022):
Is there a way to implement this custom.css via the Nginx Proxy Manager so every Device in the Network is affected?
@jonasled commented on GitHub (Jan 23, 2022):
Yes, you can add the stylesheet on the server, if you place the file in
frontend/scss/and add the import in thestyle.scss@root9191 commented on GitHub (Jan 24, 2022):
can you explain that to me in a bit more detail?
so i need to a map the custom.css to the Container and then simply import the custom.css in the style.css or the main.css?
@kmanwar89 commented on GitHub (Feb 2, 2022):
Hi @jonasled - would you be able to provide some specific instructions on where these files can be found? Myself, and I'm sure others, are likely running nginx proxy manager via a docker container, so access to some of these core files may not be available.
Would I be correct in my (limited) understanding that we'd need to either:
I'm not sure what the best path forward here would be, but it sounds like many other people would like dark mode as well, so your help is appreciated!
@jonasled commented on GitHub (Feb 2, 2022):
Changing the configuration of a running container dosn't work. You have to take the sourcecode and then place the dark.scss in frontend => scss. Afterwards you have to add
@import "darkmode";to your style.scss (in the same directory)Afterwards you have to build the container with the following script:
@kmanwar89 commented on GitHub (Feb 4, 2022):
Thanks for your help with this. If I understood your instructions correctly, then the first step would be to clone the repository for the dark mode, which would be located here.
From there, I executed both the frontend-build script and the docker run command you have listed. However, when running the final docker build command, I receive the following error:
The command '/bin/bash -o pipefail -c echo "fs.file-max = 65535" > /etc/sysctl.conf && apt-get update && apt-get install -y --no-install-recommends jq logrotate && apt-get clean && rm -rf /var/lib/apt/lists/*' returned a non-zero code: 100For reference, I'm running this on a fresh install of Ubuntu Server 21.10. Any ideas what may be causing this? It is not an error I've encountered previously.
Here is the full output:
@archef2000 commented on GitHub (Apr 25, 2022):
I tried the Theme from @Amoenus on Gist and just combined the main.css under /app/frontend/css/main.css in the docker container and the dark-theme and it all funktions.
@hellblue commented on GitHub (May 4, 2022):
I use nginx proxy manager without docker and tried it. It works good and looks much better now.
@Trackhe commented on GitHub (May 16, 2022):
Please make a dark mode standard. My eyes are bleeding.
@root9191 commented on GitHub (May 17, 2022):
I use now the Dark Theme from theme-park.dev - looks really good 😎
@Amoenus commented on GitHub (May 19, 2022):
Nice one @root9191. I am switching to these themes as well.
For people using Stylus the cheeky way to use the theme is like this
@kmanwar89 commented on GitHub (Jul 17, 2022):
Is there any progress on this dark mode w/o the use of additional add-ons?
@GilbN commented on GitHub (Aug 1, 2022):
I've added a script you can mount btw.
https://docs.theme-park.dev/themes/nginx-proxy-manager/#docker
https://github.com/GilbN/theme.park/blob/develop/docker-mods/nginx-proxy-manager/root/etc/cont-init.d/98-themepark
@CarloApri commented on GitHub (Aug 13, 2022):
@GilbN I'm having some troubles settings this up:
following the docs you linked I downloaded "98-themepark" from the repo, then you say to mount it like follows.
I'm doing that in the Nging Proxy Manager's docker-compose.yml, is that correct? In the volume entry do we have to point to the script itself or to the folder containing it?
The file is "98-themepark" but it's "98-themepark-npm" in the example provided, same for the chmod +x command.
@GilbN commented on GitHub (Aug 13, 2022):
There's a bug in the script. Change
APP_FILEPATHto/app/frontendAnd yes, point it to the file. And the name doesn't matter.
@cisxxc commented on GitHub (Aug 17, 2022):
When will the script be updated? - I see 'APP_FILEPATH' referenced serveral times throughout the script. Do I need to edit every single one and replace it with 'app/frontend'?
@GilbN commented on GitHub (Aug 18, 2022):
The script has been updated. Did you you try it?
https://github.com/GilbN/theme.park/blob/develop/docker-mods/nginx-proxy-manager/root/etc/cont-init.d/98-themepark
@henkiewie commented on GitHub (Oct 28, 2022):
Hi,
It worked for me. Is there also a way back?
[Edit]
Yes there is coment out the volume 😄
@CarloApri commented on GitHub (Mar 30, 2023):
How can I specify which theme to use (eg aquamarine)?
Here there are quite some if you scroll down
edit: found, line 45
@ozdeadmeat commented on GitHub (Jun 29, 2023):
Would be nice if they just added this functionality by default as pretty much everything else I use has a dark mode.
@DST73 commented on GitHub (Oct 30, 2023):
Hi,
I have installed NGINX using this script from https://tteck.github.io/Proxmox/ witch creates an Container in Proxmox
is there a way to change it to dark mode on such an installation?
Thank you!
@SebastianGwizdala commented on GitHub (Jan 18, 2024):
+1 from me as well
@github-actions[bot] commented on GitHub (Aug 27, 2024):
Issue is now considered stale. If you want to keep it open, please comment 👍
@BluePixel4k commented on GitHub (Aug 27, 2024):
👍
@zackwithak13 commented on GitHub (Aug 27, 2024):
👍🏻
@Cocolin67 commented on GitHub (Sep 12, 2024):
Any news yet ?
@Ajes1337 commented on GitHub (Sep 22, 2024):
please add dark theme support
@andmpel commented on GitHub (Oct 24, 2024):
Dark mode support please
@CarloApri commented on GitHub (Oct 24, 2024):
You can already get the dark theme:
in your docker-compose.yml for nginx proxy manager, add the following to the volumes section
in the same folder as your docker-compose.yml create a "theme" folder, and create this 98-themepark file inside it (literally copy and paste),
cd themeand make it executablechmod +x 98-themepark-npmedit line 45 if you want a different theme
@petrhusak commented on GitHub (Oct 25, 2024):
You can set dark mode also without bind mount:
If you are using Nginx Proxy Manager as a proxy for the Nginx Proxy Manager itself, you can set the dark mode directly in the proxy settings. Just add custom location with this settings:
It should look something like this (forward hostname nginx-proxy-manager is the name of my container):

If you want different theme, change
organizr.cssvalue. Available css themes:Sources:
https://docs.theme-park.dev/themes/nginx-proxy-manager/
https://docs.theme-park.dev/setup/#nginx
@AndyVRD commented on GitHub (Dec 13, 2024):
Any reason why this is not working? Running NGINX Proxy Manager in a LXC container with Proxmox. Checked the hostname and it's nginxproxymanager like I used in the css template.
@shalafi99 commented on GitHub (Dec 13, 2024):
I had to do a CTRL-SHIFT-R (=reload and ignore cache) in Google Chrome to make it go into effect, after noticing it would only work right away inside an incognito/inprivate tab.
@RobLoach commented on GitHub (Jan 29, 2025):
Duplicate of https://github.com/NginxProxyManager/nginx-proxy-manager/issues/4314 .
@tuanhm107 commented on GitHub (Apr 26, 2025):
you're doing it wrong.
It worked for me
@IvanCarapovic commented on GitHub (Apr 26, 2025):
The workaround with CSS is simple and works, but it would still be better/simpler to have a dropdown in settings where I can just select the appropriate. Also if you aren't using NPM to proxy to NPM, the hack won't work so...
@mdrxy commented on GitHub (Sep 5, 2025):
+1
@CrazyWolf13 commented on GitHub (Nov 5, 2025):
this has been implemented, please close this issue
@C-Fu commented on GitHub (Nov 10, 2025):
The new dark mode is epic! Hats off to the devs, I appreciate it man!
Please close this issue thanks!
@7heMech commented on GitHub (Nov 11, 2025):
This can be closed since new version has dark mode. @jc21