# Color Profiles

OpenGit supports user-customizable **color profiles** (also called presets). Users select a preset in Settings → Appearance to tint the UI: buttons, accents, glass panels, borders, and optionally muted text.

---

## How It Works

### 1. Theme Variables

When a non-default preset is selected, OpenGit sets CSS variables on `document.documentElement`:

- `--theme-r`, `--theme-g`, `--theme-b` — RGB components of the accent color
- `data-neutral` — the preset name (e.g. `blue`, `emerald`, `mauve`)
- `data-accent-text` — optional; when set, muted text uses the preset color instead of gray

Default `zinc` uses white (`255,255,255`) for accents and no `data-neutral`.

### 2. Theme RGB Map

Each preset maps to an RGB array `[R, G, B]` used for accents. This map appears in:

- `templates/base.html`
- `templates/repository/repo_layout.html`
- `templates/settings.html` (for the color picker UI)

### 3. Color Preset Overrides

File `templates/_color_presets.html` defines a Jinja2 macro `color_preset_overrides()` that emits CSS for each preset. Each preset has:

- Background: `.bg-zinc-800` override
- Border: `.border-zinc-900` override
- Optional muted text (when `data-accent-text="true"`): `.text-zinc-300` through `.text-zinc-800` tints

These styles use `[data-neutral="preset_name"]` selectors.

### 4. User Storage

The chosen preset is stored per-user in `users.neutral_preset` and validated against `valid_presets` in `routes/settings.py`.

---

## Adding a New Color Profile

### Step 1: Add RGB to theme maps

Add your preset's RGB values to `themeRgb` in these files:

**`templates/base.html`** (around line 20):
```javascript
var themeRgb = { red:[239,68,68], ..., yourpreset:[R,G,B] };
```

**`templates/repository/repo_layout.html`** (around line 20): same addition.

**`templates/settings.html`** (around line 521):
```javascript
const themeRgb = { red:[239,68,68], ..., yourpreset:[R,G,B] };
```

**`templates/settings.html`** (around lines 182–184): add `'yourpreset'` to the `{% for preset in [...] %}` list, and add `'yourpreset':[R,G,B]` to the inline RGB dict used by `{% set rgb = {...}.get(preset, [161,161,170]) %}`.

### Step 2: Add to valid presets

In **`routes/settings.py`** (around line 391):

```python
valid_presets = [..., 'yourpreset']
```

If the preset is missing here, the backend falls back to `zinc`.

### Step 3: Add preset CSS in _color_presets.html

In **`templates/_color_presets.html`**, add a block for your preset (follow the pattern of existing presets):

```css
/* yourpreset */
[data-neutral="yourpreset"] .bg-zinc-800 { background-color: #XXXXXX !important; }
[data-neutral="yourpreset"] .border-zinc-900 { border-color: #YYYYYY !important; }
[data-neutral="yourpreset"][data-accent-text="true"] .text-zinc-300 { color: #aaaaaa !important; }
[data-neutral="yourpreset"][data-accent-text="true"] .text-zinc-400 { color: #bbbbbb !important; }
[data-neutral="yourpreset"][data-accent-text="true"] .text-zinc-500 { color: #cccccc !important; }
[data-neutral="yourpreset"][data-accent-text="true"] .text-zinc-600 { color: #dddddd !important; }
[data-neutral="yourpreset"][data-accent-text="true"] .text-zinc-700 { color: #eeeeee !important; }
[data-neutral="yourpreset"][data-accent-text="true"] .text-zinc-800 { color: #ffffff !important; }
```

Replace `#XXXXXX`, `#YYYYYY`, etc. with hex colors that fit your preset’s palette. For inspiration, use existing presets (e.g. `blue`, `emerald`, `mauve`). `bg-zinc-800` and `border-zinc-900` are for darker surfaces/borders; the `.text-zinc-*` values are tints for muted text when accent text is enabled.

---

## Preset Checklist

| Location | Change |
|----------|--------|
| `templates/base.html` | Add `yourpreset:[R,G,B]` to `themeRgb` |
| `templates/repository/repo_layout.html` | Same `themeRgb` entry |
| `templates/settings.html` | `themeRgb`, preset loop, and RGB map for picker |
| `routes/settings.py` | Add `'yourpreset'` to `valid_presets` |
| `templates/_color_presets.html` | Add `[data-neutral="yourpreset"]` CSS block |

---

## Built-in Presets

Current presets: `red`, `orange`, `amber`, `yellow`, `lime`, `green`, `emerald`, `teal`, `cyan`, `sky`, `blue`, `indigo`, `violet`, `purple`, `fuchsia`, `pink`, `rose`, `slate`, `gray`, `zinc`, `neutral`, `stone`, `taupe`, `mauve`, `mist`, `olive`.

Use these as reference when defining new preset blocks in `_color_presets.html`.
