nomad icon indicating copy to clipboard operation
nomad copied to clipboard

Published 20 hours ago • verified publisher icon hashicorp

Add Dark mode to Nomad UI

Open FranksRobins opened this issue 1 year ago • 10 comments

Hi there, I have not found any information regarding a dark mode for the Nomad UI, so I wanted to know if it would be of any interest for the UI team to implement one.

Proposal

Add controls on the UI to allow toggling between dark, light and system modes

Use-cases

Users can set their preferred theme at will according to their setup

Attempted Solutions

There are third party browser extension that can change the theme of web pages but wont always change the right elements to the right colour and styling. It would be really nice to have a simple dark mode from the team itself.

FranksRobins avatar Dec 28 '23 07:12 FranksRobins

Hi @FranksRobins and thanks for raising this issue which would be nice to have. I'll pass this over to our UI team who will be best placed to handle this request.

jrasell avatar Jan 02 '24 10:01 jrasell

Thanks for raising this, @FranksRobins. We have a few UI styling things to take care of first (some changes to our header and sidebar, generally) before it makes sense to try to specifically have a dark theme, but I think it's a good idea worth pursuing after that.

philrenaud avatar Jan 03 '24 14:01 philrenaud

Dark mode would be nice, currently I inject CSS to emulate one. I'm no good at UI but here's a screenshot for inspiration:

image

nightwolfz avatar Jan 24 '24 15:01 nightwolfz

@nightwolfz That looks nice. Do you mind sharing the stylesheet?

nthnd avatar Jan 28 '24 10:01 nthnd

@nate-sys Here you go https://gist.github.com/nightwolfz/6ea08a499f7fe3f2a96304e565e40c43

It's a bit of a mess though since my goal was simply not to blind myself every time I opened nomad :)

Here are a few more pictures:

image image image

nightwolfz avatar Feb 01 '24 18:02 nightwolfz

@nightwolfz Amazing! Thanks a lot for sharing. It's very pretty, actually.

nthnd avatar Feb 01 '24 18:02 nthnd

dark reader worked great to fill this gap - up until v1.6, that is https://github.com/hashicorp/nomad/issues/19867

quinndiggitypolymath avatar Feb 03 '24 10:02 quinndiggitypolymath

@nightwolfz this looks great indeed! Thank you so much for putting an effort into it!

FranksRobins avatar Feb 05 '24 12:02 FranksRobins

@FranksRobins I use this chrome extension to inject the CSS https://chromewebstore.google.com/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld

Glad you guys like it :)

nightwolfz avatar Feb 07 '24 05:02 nightwolfz

As a nomad admin and dark-mode-liking individual, I'm excited to see this feature progress! +1 from me!

aaronkvanmeerten avatar Mar 29 '24 13:03 aaronkvanmeerten