How to Create a Theme for your Argo CD With Minimal CSS

Slack Theme in Argo CD Dashboard

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.

Hot Dog Theme by Daniel Hoang
Hot Dog Theme by Daniel Hoang

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

Sidebar of Argo CD Dashboard
Sidebar of Argo CD Dashboard

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

Dashboard Section
Dashboard Section

.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
Sliding panel

.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, Secondary & Disabled Buttons
Primary, Secondary & Disabled Buttons

/* 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.

Links and Tabs Indicator
Links and Tabs Indicator

Selected Items and Top Navigation Title
Selected Items and Top Navigation Title

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;
}

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.

Configure Argo CD Theme on Akuity Platform
Configure Argo CD Theme on Akuity Platform

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.

Share this blog:

Latest Blog Posts

GitOps Best Practices Whitepaper

GitOps Best Practices Whitepaper

GitOps is rapidly becoming the standard for managing cloud-native ecosystems with Kubernetes. Traditional IaC tools fell short with the rise of Kubernetesā€¦...

Purpose, Not Location - Why Kargo Uses the Term 'Stage', and not 'Environment'

Purpose, Not Location - Why Kargo Uses the Term 'S...

Kargo is a next-generation continuous delivery and application lifecycle orchestration platform for Kubernetes. It builds upon GitOps principles and integrates...

The Rendered Manifests Pattern

The Rendered Manifests Pattern

GitOps principles exist to address the genuine problems of visibility and collaboration when working with a complex system like Kubernetes. They stress theā€¦...

Leverage the industry-leading suite

Contact our team to learn more about Akuity Cloud