Add support for dark mode

[sosedoff]

Should be able to switch from light/dark UI themes. Prefer light theme by default unless switched by user.

[OmlineEditor]

if there is a theme, then not black, but a little dark gray. Gray is better than completely black.

[steinjonathan]

Please, coming eyes from VSCode to pgweb is not good.

[terion-name]

adding html { filter: invert() hue-rotate(180deg) contrast(0.85) } is literally enough for text-only interface

[vitalyster]

Please migrate project to bootstrap 5, you will get tons of UI fixes, including dark theme support and proper UI font stack

[dspv]

Any plans to merge this?

[sosedoff]

@dspv merge what exactly? this is a tracking issue, not a PR

[KholkinDmitrii]

What do we need to do to add dark mode? I just started using this project and I love it. It would be great to have dark mode here.

[AdamsGH]

Install Stylish (chrome/ firefox) extension and use this theme

pgweb-dark.css

[KholkinDmitrii]

I’m using .NET Aspire, and there is a method called ".WithPgWeb" that uses image "sosedoff/pgweb:0.16.2" under the hood. There is no way to add default extensions. So it would be great to have a default dark theme. This would significantly improve the user experience for those working in low-light environments.

[AdamsGH]

I’m using .NET Aspire, and there is a method called ".WithPgWeb" that uses image "sosedoff/pgweb:0.16.2" under the hood. There is no way to add default extensions. So it would be great to have a default dark theme. This would significantly improve the user experience for those working in low-light environments.

Well, since all styles are coming from a single file static/css/app.css which I used as a base to create the CSS file I posted above, most likely you can use it as a drop-in replacement, because the selectors are the same and only the colors are changed.

I see two ways in your case:

1. Build your own image.
2. Just mount it into the container and be happy never mind, I’ve looked at the Dockerfile.

So in this case, the only solution if you really need it is to fork the repo, replace the content of static/css/app.css with pgweb-dark.css and build a custom image. Feel free to ask if you need any assistance with this.

I agree that building a custom image is not the best solution, but looking at the age of this issue and the ignored PR, it seems like the only working solution for people with an allergy to light themes (just saying, I wrote the style before touching any UI element :D)