# How to Customize the Color Palette for Different Component Types in Archify

> Customize Archify's color palette for component types by editing CSS variables or providing a custom theme JSON. Tailor your project's visual appearance effortlessly.

- Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify)
- Tags: how-to-guide
- Published: 2026-07-14

---

**Archify uses CSS custom properties in [`archify/assets/template.html`](https://github.com/tt-a1i/archify/blob/main/archify/assets/template.html) to define colors for each component type (frontend, backend, database, etc.). Edit the `--c-<type>` variables in the `:root` block to change the palette, or provide a custom JSON theme file to override defaults without modifying the template.**

Archify visualizes system architecture using semantic colors to distinguish component types. The color palette is controlled through CSS custom properties embedded in the HTML template used for all diagram generation. This guide shows you how to customize the color palette for different component types in archify by editing the template directly or using a JSON configuration file.

## Understanding Archify's Color System

The color system in archify maps component types to CSS variables following the pattern `--c-<type>`. In [`archify/assets/template.html`](https://github.com/tt-a1i/archify/blob/main/archify/assets/template.html), the `:root` selector defines the default dark theme palette, while the `[data-theme="light"]` selector provides overrides for light mode. Each variable controls the background color for all nodes of that specific type across the entire diagram.

## Method 1: Edit CSS Variables in the HTML Template

### Locate the Template File

Navigate to [`archify/assets/template.html`](https://github.com/tt-a1i/archify/blob/main/archify/assets/template.html) in the repository. This file contains the HTML structure and CSS that serves as the foundation for all generated diagrams according to the tt-a1i/archify source code.

### Modify the :root Variables

Find the `:root` block containing the default color definitions. The seven component types use these variables:

- `--c-frontend`: Cyan (#00bcd4)
- `--c-backend`: Emerald (#2ecc71)
- `--c-database`: Violet (#9b59b6)
- `--c-cloud`: Amber (#e67e22)
- `--c-security`: Rose (#e84393)
- `--c-bus`: Orange (#fd7e14)
- `--c-external`: Slate (#708090)

Replace the hex values with your preferred colors:

```css
:root {
  --c-frontend: #ff6f61;   /* Soft red */
  --c-backend:  #4a90e2;   /* Calm blue */
  --c-database: #8e44ad;   /* Deep purple */
  --c-cloud:    #f5a623;   /* Warm amber */
  --c-security: #e74c3c;   /* Bright rose */
  --c-bus:      #e67e22;   /* Orange */
  --c-external: #95a5a6;   /* Slate gray */
}

```

### Update Light Theme Overrides

If you support both themes, update the `[data-theme="light"]` block to ensure consistency:

```css
[data-theme="light"] {
  --c-frontend: #ff6f61;
  --c-backend:  #4a90e2;
  /* ... match your dark theme or choose distinct light-mode colors */
}

```

## Method 2: Use a Custom JSON Theme Configuration

### Creating the Theme File

For environments where you cannot modify the template, create a JSON file following the structure found in [`experiments/v3-mermaid-validation/theme/archify-mermaid-config.json`](https://github.com/tt-a1i/archify/blob/main/experiments/v3-mermaid-validation/theme/archify-mermaid-config.json). The `customColors` object maps component types to hex values:

```json
{
  "customColors": {
    "frontend": "#ff6f61",
    "backend":  "#4a90e2",
    "database": "#8e44ad",
    "cloud":    "#f5a623",
    "security": "#e74c3c",
    "bus":      "#e67e22",
    "external": "#95a5a6"
  }
}

```

### Applying the Custom Theme via CLI

Save your configuration as [`my-theme.json`](https://github.com/tt-a1i/archify/blob/main/my-theme.json) and pass it to the renderer using the `--theme` flag:

```bash
node bin/archify.mjs render architecture.yaml --theme my-theme.json

```

The renderer merges your `customColors` with the default palette, applying your overrides while preserving any unspecified types.

## Component-Type Color Reference

The following table maps component types to their CSS variable names and default dark-theme values:

| Component Type | CSS Variable | Default Color |
|---|---|---|
| Frontend | `--c-frontend` | Cyan (#00bcd4) |
| Backend | `--c-backend` | Emerald (#2ecc71) |
| Database | `--c-database` | Violet (#9b59b6) |
| Cloud | `--c-cloud` | Amber (#e67e22) |
| Security | `--c-security` | Rose (#e84393) |
| Bus | `--c-bus` | Orange (#fd7e14) |
| External | `--c-external` | Slate (#708090) |

## Summary

- Archify stores color definitions in [`archify/assets/template.html`](https://github.com/tt-a1i/archify/blob/main/archify/assets/template.html) using CSS custom properties.
- Edit the `--c-<type>` variables in the `:root` block to change the default dark theme palette.
- Update the `[data-theme="light"]` block to customize light mode colors.
- Use a JSON configuration file with a `customColors` object to override colors without editing the template.
- Apply JSON themes via the CLI using the `--theme` flag when running `bin/archify.mjs`.

## Frequently Asked Questions

### What file contains the default color definitions?

The default color palette is defined in [`archify/assets/template.html`](https://github.com/tt-a1i/archify/blob/main/archify/assets/template.html) within the `:root` CSS selector. This file contains the HTML template used for all diagram generation in the tt-a1i/archify repository.

### Can I use different colors for light and dark themes?

Yes. The template includes a `[data-theme="light"]` block that overrides the `:root` variables. Define your light theme colors there to provide distinct palettes for each mode.

### Do I need to rebuild the project after changing colors?

No rebuild is necessary. After saving changes to [`template.html`](https://github.com/tt-a1i/archify/blob/main/template.html) or your JSON theme file, simply regenerate the diagram using the CLI or your preferred method. The new colors are applied immediately upon the next render.

### How do I apply a custom theme when using the CLI?

Pass the `--theme` flag followed by the path to your JSON configuration file: `node bin/archify.mjs render input.yaml --theme my-theme.json`. The renderer will merge your custom colors with the defaults.