How to Create Argo CD Theme with Minimal CSS

When using Argo CD UI, you might want to match its design with your company's branding or wish to differentiate between the instances by giving different color combinations to different environments (ie. test / staging with toned-down colors while production with something more alert). Or you just crave for a Hot Dog theme like our teammate Daniel.

So how do we achieve that? Argo CD provides a way to override the CSS styles. In the Argo documentation, you can find an article on how to provide your CSS file. We can identify the components, combine their CSS definitions and represent it as a Theme. It would be very tedious and tricky to figure out items that can be customized. But the Pareto principle (80-20 rule) can help us. It applies to Argo CD UI as well. We have identified 20% of items that can make 80% of the difference visually.

Selected Visual Components of Argo CD

The idea is to list the components, identify them as their HTML classnames, and see what CSS properties can be changed. Ultimately, we will have minimal reusable CSS, which can then be applied as a Theme. The only parameters that need changing to update the theme will be contained in just a few CSS properties. So here is the list of the components we have curated...

1. Sidebar

If you are using Argo CD version 2.5 or greater, then use the .sidebar class, otherwise use .nav-bar. Make sure that the background color is dark-ish. Otherwise, you have to manage the content in the sidebar, including filters, and inputs which becomes complicated.

.sidebar,
.nav-bar {
  background: #32201b;
}

2. Dashboard Section and Sliding Panel

.page__content-wrapper {
  background: #f0ece8;
}

To stay consistent, we should have the same background color on the sliding panel. It's made up of a header and a body. Therefore both should have the same background.

.sliding-panel__header,
.sliding-panel__body {
  background: #f0ece8;
}

3. Buttons

Argo CD UI contains primary and secondary buttons with a disabled variant. We also need to handle the hover and focus states of the button.

/* primary */
.argo-button--base,
.argo-button--base:hover {
  background: #7d7370 !important;
}

.argo-button--base:hover {
  opacity: 0.8 !important;
}

/* secondary */
.argo-button--base-o {
  color: #7d7370 !important;
  box-shadow: inset 0 0 0 1px #7d7370 !important;
}

.argo-button--base-o:hover,
.argo-button--base-o:focus {
  background: #7d7370 !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px #7d7370 !important;
}

/* disabled */
.argo-button.disabled,
.argo-button[disabled] {
  background: #968f8c !important;
}

4. Links, Selected Items, Tabs Indicator, Top Navigation Title

We can give the same color to all of these items so they play well alongside one another inside the theme.

a,
/* title of the each item in list in settings page */
.settings-overview__redirect-panel__title,
.selected,
.top-bar__title {
  color: #01894d !important;
}

.tabs__indicator {
  background: #01894d !important;
}

Customized Argo CD Theme Template

Finally, if we combine all of the properties above and separate the actual Theme values by CSS variables, here is what it will look like.

Try to include this CSS in your Argo CD instance!

/* Asphalt Theme by Akuity */

:root {
  --sidebar-background: #32201b;
  --page-and-panel-background: #f0ece8;
  --button-primary: #7d7370;
  --button-secondary: #7d7370;
  --button-disabled: #968f8c;
  --primary: #01894d;
}

.sidebar,
.nav-bar {
  background: var(--sidebar-background);
}

.page__content-wrapper {
  background: var(--page-and-panel-background) !important;
}

.sliding-panel__header,
.sliding-panel__body {
  background: var(--page-and-panel-background) !important;
}

/* primary */
.argo-button--base,
.argo-button--base:hover {
  background: var(--button-primary) !important;
}

.argo-button--base:hover {
  background: var(--button-primary) !important;
  opacity: 0.8 !important;
}

/* secondary */
.argo-button--base-o {
  color: var(--button-primary) !important;
  box-shadow: inset 0 0 0 1px var(--button-primary) !important;
}

.argo-button--base-o:hover,
.argo-button--base-o:focus {
  background: var(--button-secondary) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px var(--button-secondary) !important;
}

/* disabled */
.argo-button.disabled,
.argo-button[disabled] {
  background: var(--button-disabled) !important;
}

a,
/* title of the each item in list in settings page */
.settings-overview__redirect-panel__title,
.selected,
.top-bar__title {
  color: var(--primary) !important;
}

.tabs__indicator {
  background: var(--primary) !important;
}

Customize Logo

When mentioning branding, we have to mention logos. As per the available Argo CD versions, while writing this blog, there is no "official" way to change the logo in the sidebar or on the login screen. But it is possible to do using CSS - here is a blog post on how to replace the logo in the sidebar.

If you don't have your logo hosted anywhere, you can convert the logo to base64 string and use it in CSS instead of using a link! You have to be careful as the size limit of ConfigMap is 1MB.

.nav-bar__logo img,
.sidebar__logo img {
  content: url(data:image/svg+xml;base64,...);
}

Try Out the Argo CD Custom Style Wizard

You can save a lot of time that you would spend on coming up with custom themes, mixing and matching colors, and spitting out the CSS code if you are already using Akuity platform to manage your Argo CD instance. We have introduced an Argo CD Custom Style Wizard where you can choose from available themes or create a new one using the Akuity dashboard GUI.

Help and Support

If you want insights on where to start with Akuity or Argo CD, please contact me or our Dev Advocate (Nicholas Morey) on the CNCF Slack. You can find us on the #argo-* channels, and don’t hesitate to send me a direct message.

You can also schedule a technical demo with our team or go through the “Getting started” manual on the Akuity Documentation website.