ArgoCD Themes

ArgoCD Themes

A collection of ready-to-use CSS themes for ArgoCD

 

---

🎨 Themes

See the latest release for the index themes list.

Collections

Each theme comes in two variants:

• Base: Core styling with colors and branding
• Advanced: Additional status colors indicators (health, errors)

Preview

Preview gryffindor theme (base)

---

📦 Installation

Following the official ArgoCD documentation on how-to add a custom style

CDN (jsDelivr) - Recommended

Add this to your ArgoCD ConfigMap:

apiVersion: v1
kind: ConfigMap
metadata:
  name: argocd-cm
  namespace: argocd
data:
  ui.cssurl: "https://cdn.jsdelivr.net/gh/ClemVonSchweetz/argocd-themes@v1.0.0/dist/themes/harry-potter-gryffindor.css"

⚠️ Version Option

• @v1.0.0 - Pinned version (recommended for production)
• @main - Latest version (auto-updates)

Selfhosted

1. Download the latest release from Releases
2. Extract themes-dist-vX.X.X.zip
3. Upload dist/ to your CDN/S3
4. Update your ConfigMap with your URL
5. Apply Changes kubectl rollout restart deployment argocd-server -n argocd or simply refresh your browser

---

🤝 How to contribute

We welcome contributions! Whether you want to create a new theme or improve existing ones

Want to add a new theme? Here's how:

1. Use base assets from the /example folder (PNG with transparent backgrounds)
2. Add your customized assets to assets/<design>/<theme>/ with the same name. You should have both logo.png and letter.png
3. Create your theme themes/<design>/<theme>/variables.css with your color palette and asset references
4. Run the build script: ./script/build-themes.sh. You should have 2 new CSS files generated automatically: <design>-<theme>.css and <design>-<theme>-advanced.css
5. Add a preview screenshot (advanced file) to themes/<design>/<theme>/preview.png
6. Submit a PR following the template description

Example structure:

assets/harry-potter/gryffindor/logo.png
assets/harry-potter/gryffindor/letter.png
themes/harry-potter/gryffindor/variables.css
themes/harry-potter/gryffindor/preview.png

Check existing themes for reference. Thanks for contributing! 🤗