Add a dark mode

[Cocolin67]

Maybe just add a toggle that can switch the theme to dark, since it use Tabler, i guess it should be easy to create that ! My eyes would be pleased thanks, love the proxy manager :)

[Cocolin67]

Oh thanks, I didn't see it

[EthyMoney]

That's just for the docs though right? Is there anything in the works for the app UI itself?

[wchorski]

I have a work around if you're willing to do a bit of css override

here is my blog post about it, but I'll try to give you the short version here

Run the container

spin up the container first and let the app pull down.

Map the CSS volume

now map `/app/frontend/css/main.css' as a volume to your local machine so that your dark mode tweak persists.

version: '3.8'
services:
  app:
    image: 'jc21/nginx-proxy-manager:latest'
    restart: unless-stopped
    ports:
      - '80:80'
      - '81:81'
      - '443:443'
    volumes:
      - ./data:/data
      - ./letsencrypt:/etc/letsencrypt
      - ./css/main.css:/app/frontend/css/main.css

spin up the container again and go to edit that new ./css/main.css file

CSS

here is what I've added at the bottom of that css file. It isn't perfect but I kinda like the plumb color theme

body, .modal-content{
  background-color: #635366;
  color: white;
 }

 .modal-content{
  box-shadow: black 2px 2px 8px;
 }

 .custom-switch-description{
    color: #c3c3c3;
  }

 #header{
  background-color: #323232;
 }
 .navbar-light .navbar-brand{
  color: white;
 }
 #menu{
  background-color: #000;
 }

 .text-default {
    color: white !important;
  }

  .tag{
    background-color: #545454;
    color: white;
  }

 .card{
    background-color: #29292a;
    box-shadow: black 2px 2px 8px;
  }

  .table thead {
    border-bottom: solid black 3px;
  }
  .table th, .text-wrap table th, .table td, .text-wrap table td{
    border-top: 1px solid #000000;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: rgb(0, 0, 0);
  }

[Cocolin67]

#3395

Resolved since update is released

[jpeaglesandkatz]

why is this closed when the initial issues was opend regarding dark mod in the proxy manager UI itself, NOT the documentation...

It is outright silly that a project like nginx proxy manager doesn't include darkmode.. Especially when apparently it is using an easy theming solution.

[ramphex]

is there any update on this? Why did the docs get themed but the the actual dashboard UI?

[Cocolin67]

Apparently it's still not fixed, i thought it was but it was just the doc that got the dark UI. i'll reopen the issue

[drummerwolli]

sounds like a duplicate of #707

[RobLoach]

Duplicate of #4314 too .

[HybridRCG]

The funny thing is , NPM's own website - "https://nginxproxymanager.com/" does have a toggle for dark mode..
Only reason why i'm not changing to another reverse proxy manager just for the dark mode sake is that I don't have to go into NPM very often. but sure as makes my eyes hurt every time i have to use it. :(

I see the workaround. but the fare question is why must a different service be running purely for dark mode?

[vacerde]

Any updates on this?

[RobLoach]

Click the "Subscribe" button if you'd like to be notified of any updates in this issue?