Dark Mode Support

[redtripleAAA]

RFE for Dark Mode Support

[C-Fu]

This would be awesome!

[vMeph]

+ 1 for it :)

[WrDX]

It looks like Tabler supports it: https://preview.tabler.io/layout-dark.html

[jc21]

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]

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]

Where can I change these files?

[root9191]

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

Hello, how Can i implent the Dark Mode in my Proxy Manager Version 2.9.7?

[FroggMaster]

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]

I created a Dark Mode theme VIA CSS [...]

Installing browser plugins is not an option for me.

[operinko]

I would love to see theme-park.dev support on nginx-proxy-manager, though that seems to imply requiring linuxserver.io builds

[FroggMaster]

I created a Dark Mode theme VIA CSS [...]

Installing browser plugins is not an option for me.

There are alternative suggestions in my post. Though, the most non-technical method would be to use an Extension.

• Apply CSS VIA NGINX itself (You will need to reverse proxy NPM to do this)
• Mount a new CSS file overtop of the existing CSS file VIA Docker

[root9191]

I created a Dark Mode theme VIA CSS [...]

Installing browser plugins is not an option for me.

There are alternative suggestions in my post. Though, the most non-technical method would be to use an Extension.

• Apply CSS VIA NGINX itself (You will need to reverse proxy NPM to do this)

• Mount a new CSS file overtop of the existing CSS file VIA Docker

Could you explain, how i can apply the CSS in Nginx? Do i need the Advanced Tab for this?

[Amoenus]

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]

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 ;)

My Gravatar didn't like it, went all gray. Other than that it looks real nice!

[walkxcode]

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 ;)

How do I use this?

[Amoenus]

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 ;)

How do I use this?

I just put it in Stylus since Stylish had some shady things going on that I don't care enough to remember.

[Amoenus]

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 ;)

My Gravatar didn't like it, went all gray. Other than that it looks real nice!

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

[walkxcode]

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 ;)

How do I use this?

I just put it in Stylus since Stylish had some shady things going on that I don't care enough to remember.

Alright

[root9191]

Is there a way to implement this custom.css via the Nginx Proxy Manager so every Device in the Network is affected?

[jonasled]

Yes, you can add the stylesheet on the server, if you place the file in frontend/scss/ and add the import in the style.scss

[root9191]

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]

Yes, you can add the stylesheet on the server, if you place the file in frontend/scss/ and add the import in the style.scss

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:

1. Execute a bash command inside the npm docker container and drop the files directly into the frontend/scss folder you mentioned or
2. Make the relevant additions to the css files and re-compile the docker image?

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]

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:

echo 'Setting Version'
sed -i "s/0.0.0/${BUILD_VERSION}/" frontend/package.json
sed -i "s/0.0.0/${BUILD_VERSION}/" backend/package.json

echo 'Building Frontend ...'
bash scripts/frontend-build

echo 'Checking Syntax ...'
docker run --rm -v "$(pwd)/backend:/app" -v "$(pwd)/global:/app/global" -w /app node:latest sh -c "yarn install && yarn eslint . && rm -rf node_modules"

echo 'Docker Build ...'
docker build --pull --no-cache --compress -t "nginx-proxy-manager-dark:latest" -f docker/Dockerfile --build-arg TARGETPLATFORM=linux/amd64 --build-arg BUILDPLATFORM=linux/amd64 --build-arg BUILD_VERSION="${BUILD_VERSION}" --build-arg BUILD_COMMIT="${BUILD_COMMIT}" --build-arg BUILD_DATE="$(date '+%Y-%m-%d %T %Z')" .

[kmanwar89]

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:

echo 'Setting Version'
sed -i "s/0.0.0/${BUILD_VERSION}/" frontend/package.json
sed -i "s/0.0.0/${BUILD_VERSION}/" backend/package.json

echo 'Building Frontend ...'
bash scripts/frontend-build

echo 'Checking Syntax ...'
docker run --rm -v "$(pwd)/backend:/app" -v "$(pwd)/global:/app/global" -w /app node:latest sh -c "yarn install && yarn eslint . && rm -rf node_modules"

echo 'Docker Build ...'
docker build --pull --no-cache --compress -t "nginx-proxy-manager-dark:latest" -f docker/Dockerfile --build-arg TARGETPLATFORM=linux/amd64 --build-arg BUILDPLATFORM=linux/amd64 --build-arg BUILD_VERSION="${BUILD_VERSION}" --build-arg BUILD_COMMIT="${BUILD_COMMIT}" --build-arg BUILD_DATE="$(date '+%Y-%m-%d %T %Z')" .

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: 100

For 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:

kadar@shadowserve:~/snap/docker/nginx-proxy-manager-dark$ docker build --pull --no-cache --compress -t "nginx-proxy-manager-dark:latest" -f docker/Dockerfile --build-arg TARGETPLATFORM=linux/amd64 --build-arg BUILDPLATFORM=linux/amd64 --build-arg BUILD_VERSION="${BUILD_VERSION}" --build-arg BUILD_COMMIT="${BUILD_COMMIT}" --build-arg BUILD_DATE="$(date '+%Y-%m-%d %T %Z')" .
Sending build context to Docker daemon  92.51MB
Step 1/22 : FROM jc21/nginx-full:node
node: Pulling from jc21/nginx-full
Digest: sha256:50210acee3db8afa1143a9064b5fc2163bd82043531d105765ea79e338ff6a58
Status: Image is up to date for jc21/nginx-full:node
 ---> d7305a5ab702
Step 2/22 : ARG TARGETPLATFORM
 ---> Running in 30a0def89ec6
Removing intermediate container 30a0def89ec6
 ---> acf51dd780d9
Step 3/22 : ARG BUILD_VERSION
 ---> Running in 527616c44226
Removing intermediate container 527616c44226
 ---> 0cd3a59afd9f
Step 4/22 : ARG BUILD_COMMIT
 ---> Running in 705e06e5febe
Removing intermediate container 705e06e5febe
 ---> 23fc763722d6
Step 5/22 : ARG BUILD_DATE
 ---> Running in b2d34378c038
Removing intermediate container b2d34378c038
 ---> 71f46d2fb6c8
Step 6/22 : ENV SUPPRESS_NO_CONFIG_WARNING=1 	S6_FIX_ATTRS_HIDDEN=1 	S6_BEHAVIOUR_IF_STAGE2_FAILS=1 	NODE_ENV=production 	NPM_BUILD_VERSION="${BUILD_VERSION}" 	NPM_BUILD_COMMIT="${BUILD_COMMIT}" 	NPM_BUILD_DATE="${BUILD_DATE}"
 ---> Running in 2d79b60a4763
Removing intermediate container 2d79b60a4763
 ---> 28245fd75157
Step 7/22 : RUN 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/*
 ---> Running in 31d59d5ab2cc
Ign:1 http://security.debian.org/debian-security stable/updates InRelease
Err:2 http://security.debian.org/debian-security stable/updates Release
  404  Not Found [IP: 151.101.66.132 80]
Get:3 http://deb.debian.org/debian stable InRelease [116 kB]
Get:4 https://deb.nodesource.com/node_15.x buster InRelease [4584 B]
Get:5 http://deb.debian.org/debian stable-updates InRelease [39.4 kB]
Get:6 http://deb.debian.org/debian stable/main amd64 Packages [8183 kB]
Get:7 https://deb.nodesource.com/node_15.x buster/main amd64 Packages [762 B]
Get:8 http://deb.debian.org/debian stable-updates/main amd64 Packages [2596 B]
Reading package lists...
E: The repository 'http://security.debian.org/debian-security stable/updates Release' does not have a Release file.
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: 100

[archef2000]

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]

I use nginx proxy manager without docker and tried it. It works good and looks much better now.

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.

[Trackhe]

Please make a dark mode standard. My eyes are bleeding.

[root9191]

I use now the Dark Theme from theme-park.dev - looks really good 😎

[Amoenus]

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

@import url("https://theme-park.dev/css/base/nginx-proxy-manager/organizr.css");

[kmanwar89]

Is there any progress on this dark mode w/o the use of additional add-ons?