Add dark mode

[StianOvrevage]

Summary

Add a dark mode to web console.

Motivation

Winter is coming up north and my eyes are hurting.

Proposal

CSS?

[jessesuen]

FYI, CSS can already be customized so technically this is already possible.

[tete17]

Hi @jessesuen I think @StianOvrevage was referring more to a toggle feature where the ui can switch from one state to another at the user wish.

Similar to what Grafana or Kibana offers. Can't promise anything but if you give me a couple of tips on where to find these css's I can maybe help out.

I am asking because I know argo keeps all it's ui components in a different project and I am not sure how the glue between the argo app controller (this repo I presume) and the ui work.

[theNewFlesh]

+1

[theNewFlesh]

I've created a stylish theme for ArgoCD with my dark mode style I use for everything.
Check it out here if you want.

[shankiflang]

+1

[ernelio]

+1

[richardfelkl]

+1

[matan1811]

+1

[saumeya]

I'll work on this!

[theNewFlesh]

@saumeya That stylish theme also applies to Argo Workflows BTW.

[saumeya]

Looks pretty cool @theNewFlesh, is it applied to argo using configmap?

[theNewFlesh]

@saumeya
Nope.

Stylish is a browser extension for chrome and brave. It matches URL's based on regex and or domain and injects a custom CSS that overrides the page. That custom CSS is found as a Stylish package on userstyles.org, which is also how you install it.

Essentially, I copy the CSS from the ArgoCD page, replace the color values with my own theme, and paste that CSS into a new stylish package, then upload it to userstyles.org.

[saumeya]

Ah, thanks for sharing this info. I'll try it out. I was thinking more from the perspective of having a toggle within the application.

[theNewFlesh]

Yeah, that would be great. Until then, this is what I use. I recommend you copy the CSS and go from there.

Stylish will disable the theme toggle if the URL of ArgoCD doesn't match what's in the stylish theme settings. So, you will probably have to configure that to some regex and/or domain where you are running Argo. Click Stylish menu icon then [kebab] then edit button of the theme to see the CSS and change the URLs.

[sergeyshevch]

I guess it will be great to automatically detect OS light/dark mode and use it for the theme in ArgoCD. I will very much like such feature. (Github works in similar way)

[crenshaw-dev]

@sergeyshevch can you open an enhancement request for that?

[laiminhtrung1997]

How can I set the dark mode as the default theme when starting the ArgoCD UI?