Add theme for argocd

[saumeya]

View steps to test in the upstream ticket
Upstream ticket - argoproj/argo-cd#9703

The main logic for creating the theme map is in this file - https://github.com/argoproj/argo-ui/pull/245/files#diff-9be47d1a6668e34bf14bd39d2c830ecd572725cac9912f2bcd5e9b6d512ec0f1

In this approach, it will be also easier to add more themes (light, dark, some other theme). Only theme.scss would need to be updated to add a new theme.

All the other places is just adding the @include themify directive.
Only the background colours are changed.
Some elements like drop downs and popups are not updated because of more complexity, can be updated after this is merged.

[saumeya]

Hi @rbreeze, Which all argo components use argo-ui and also I noticed some (dark) themes written in v2 components, could you please point towards how it works?

[rbreeze]

Hi @saumeya, thanks for doing this. To answer your question, the dark components you see are styled based on the theme context which can be accessed with the useTheme hook. Most of these components are wrapped in a ThemeDiv which will automatically apply --dark suffixes to all classes on the div, making it easy to add dark theme styles.

The theme setting is stored in localStorage; in the Argo Rollouts dashboard, this is toggled on and off with a button for example.

[saumeya]

Thanks a lot for approving the PR @rbreeze, could you also merge it? Thanks for explaining the approach used in rollouts. I'll take a deeper look at it.