# Customization Examples
Theme examples and styling ideas for your status line.
## 🎨 Color Themes
### Minimal Monochrome
Clean black and white theme with high contrast.
**colors.json:**
```json
{
"segment_separator": [100, 100, 100],
"cwd": {
"background": [0, 0, 0],
"foreground": [255, 255, 255],
"details": [128, 128, 128]
},
"git": {
"background": [40, 40, 40],
"foreground": [255, 255, 255],
"details": [150, 150, 150]
},
"model": {
"background": [0, 0, 0],
"foreground": [255, 255, 255],
"details": [128, 128, 128]
},
"context": {
"background": [40, 40, 40],
"foreground": [255, 255, 255],
"details": [150, 150, 150]
},
"quota_5h": {
"background": [0, 0, 0],
"foreground": [255, 255, 255],
"details": [128, 128, 128]
},
"quota_7d": {
"background": [40, 40, 40],
"foreground": [255, 255, 255],
"details": [150, 150, 150]
},
"cost": {
"background": [0, 0, 0],
"foreground": [255, 255, 255],
"details": [128, 128, 128]
}
}
```
### Ocean Blue
Calm blue theme with aqua accents.
**colors.json:**
```json
{
"segment_separator": [70, 130, 180],
"cwd": {
"background": [25, 42, 86],
"foreground": [135, 206, 235],
"details": [70, 130, 180]
},
"git": {
"background": [70, 130, 180],
"foreground": [240, 248, 255],
"details": [176, 224, 230]
},
"model": {
"background": [25, 42, 86],
"foreground": [135, 206, 235],
"details": [70, 130, 180]
},
"context": {
"background": [70, 130, 180],
"foreground": [240, 248, 255],
"details": [176, 224, 230]
},
"quota_5h": {
"background": [25, 42, 86],
"foreground": [135, 206, 235],
"details": [70, 130, 180]
},
"quota_7d": {
"background": [70, 130, 180],
"foreground": [240, 248, 255],
"details": [176, 224, 230]
},
"cost": {
"background": [25, 42, 86],
"foreground": [135, 206, 235],
"details": [70, 130, 180]
}
}
```
### Forest Green
Natural green theme inspired by terminals.
**colors.json:**
```json
{
"segment_separator": [34, 139, 34],
"cwd": {
"background": [0, 50, 0],
"foreground": [144, 238, 144],
"details": [85, 107, 47]
},
"git": {
"background": [34, 139, 34],
"foreground": [240, 255, 240],
"details": [152, 251, 152]
},
"model": {
"background": [0, 50, 0],
"foreground": [144, 238, 144],
"details": [85, 107, 47]
},
"context": {
"background": [34, 139, 34],
"foreground": [240, 255, 240],
"details": [152, 251, 152]
},
"quota_5h": {
"background": [0, 50, 0],
"foreground": [144, 238, 144],
"details": [85, 107, 47]
},
"quota_7d": {
"background": [34, 139, 34],
"foreground": [240, 255, 240],
"details": [152, 251, 152]
},
"cost": {
"background": [0, 50, 0],
"foreground": [144, 238, 144],
"details": [85, 107, 47]
}
}
```
### Dracula Theme
Popular Dracula color scheme.
**colors.json:**
```json
{
"segment_separator": [98, 114, 164],
"cwd": {
"background": [40, 42, 54],
"foreground": [139, 233, 253],
"details": [98, 114, 164]
},
"git": {
"background": [68, 71, 90],
"foreground": [80, 250, 123],
"details": [98, 114, 164]
},
"model": {
"background": [40, 42, 54],
"foreground": [255, 121, 198],
"details": [98, 114, 164]
},
"context": {
"background": [68, 71, 90],
"foreground": [241, 250, 140],
"details": [98, 114, 164]
},
"quota_5h": {
"background": [40, 42, 54],
"foreground": [255, 184, 108],
"details": [98, 114, 164]
},
"quota_7d": {
"background": [68, 71, 90],
"foreground": [189, 147, 249],
"details": [98, 114, 164]
},
"cost": {
"background": [40, 42, 54],
"foreground": [255, 85, 85],
"details": [98, 114, 164]
}
}
```
### Solarized Dark
Classic Solarized dark palette.
**colors.json:**
```json
{
"segment_separator": [88, 110, 117],
"cwd": {
"background": [0, 43, 54],
"foreground": [147, 161, 161],
"details": [88, 110, 117]
},
"git": {
"background": [7, 54, 66],
"foreground": [181, 137, 0],
"details": [101, 123, 131]
},
"model": {
"background": [0, 43, 54],
"foreground": [38, 139, 210],
"details": [88, 110, 117]
},
"context": {
"background": [7, 54, 66],
"foreground": [42, 161, 152],
"details": [101, 123, 131]
},
"quota_5h": {
"background": [0, 43, 54],
"foreground": [133, 153, 0],
"details": [88, 110, 117]
},
"quota_7d": {
"background": [7, 54, 66],
"foreground": [108, 113, 196],
"details": [101, 123, 131]
},
"cost": {
"background": [0, 43, 54],
"foreground": [211, 54, 130],
"details": [88, 110, 117]
}
}
```
---
## 🎯 Layout Examples
### Minimal Display
Show only essential information.
**settings.json:**
```json
{
"sections": {
"cwd": {
"enabled": true,
"full_path": false
},
"git": {
"enabled": true
},
"model": {
"enabled": false
},
"context": {
"enabled": true,
"show_decimals": false,
"show_token_counts": false,
"display_mode": "used"
},
"quota": {
"enabled": false,
"show_time_remaining": true,
"cache_ttl": 60
},
"cost": {
"enabled": false
}
},
"display": {
"multiline": false,
"default_terminal_width": 120,
"use_powerline": false,
"segment_separator": " | ",
"section_padding": 1,
"show_background": true
}
}
```
Result: `project | master | 45%`
### Everything Enabled
Show all available information with full details.
**settings.json:**
```json
{
"sections": {
"cwd": {
"enabled": true,
"full_path": true
},
"git": {
"enabled": true
},
"model": {
"enabled": true
},
"context": {
"enabled": true,
"show_decimals": true,
"show_token_counts": true,
"display_mode": "used"
},
"quota": {
"enabled": true,
"show_time_remaining": true,
"cache_ttl": 60
},
"cost": {
"enabled": true
}
},
"display": {
"multiline": true,
"default_terminal_width": 120,
"use_powerline": false,
"segment_separator": " | ",
"section_padding": 1,
"show_background": true
}
}
```
### Powerline Style
Use arrow separators for a sleek look.
**settings.json:**
```json
{
"sections": {
"cwd": {
"enabled": true,
"full_path": true
},
"git": {
"enabled": true
},
"model": {
"enabled": true
},
"context": {
"enabled": true,
"show_decimals": false,
"show_token_counts": true,
"display_mode": "used"
},
"quota": {
"enabled": true,
"show_time_remaining": true,
"cache_ttl": 60
},
"cost": {
"enabled": false
}
},
"display": {
"multiline": false,
"default_terminal_width": 120,
"use_powerline": true,
"segment_separator": " | ",
"section_padding": 1,
"show_background": true
}
}
```
**Note:** Requires a [Powerline-patched font](https://github.com/powerline/fonts) like:
- Meslo LG (recommended)
- FiraCode Nerd Font
- JetBrains Mono Nerd Font
- Hack Nerd Font
### Transparent Backgrounds
Clean look without background colors.
**colors.json:**
```json
{
"segment_separator": [128, 128, 128],
"cwd": {
"background": null,
"foreground": [100, 200, 255],
"details": [70, 140, 180]
},
"git": {
"background": null,
"foreground": [100, 255, 100],
"details": [70, 180, 70]
},
"model": {
"background": null,
"foreground": [255, 200, 100],
"details": [180, 140, 70]
},
"context": {
"background": null,
"foreground": [255, 100, 200],
"details": [180, 70, 140]
},
"quota_5h": {
"background": null,
"foreground": [200, 100, 255],
"details": [140, 70, 180]
},
"quota_7d": {
"background": null,
"foreground": [255, 255, 100],
"details": [180, 180, 70]
},
"cost": {
"background": null,
"foreground": [255, 100, 100],
"details": [180, 70, 70]
}
}
```
---
## 🛠️ Creating Your Own Theme
### Step 1: Choose Your Base Colors
Pick a palette from sites like:
- [Coolors.co](https://coolors.co/)
- [Adobe Color](https://color.adobe.com/)
- [Terminal.sexy](https://terminal.sexy/)
### Step 2: Convert to RGB
Most color pickers show RGB values. Convert hex colors:
- `#D97757` → `[217, 119, 87]`
### Step 3: Apply and Test
1. Edit `~/.claude/statusline/colors.json`
2. Save the file
3. Changes apply immediately (no restart needed!)
### Step 4: Share Your Theme
Consider sharing your theme in [GitHub Discussions](https://github.com/ndave92/claude-code-status-line/discussions) so others can use it!
---
## 💡 Tips
- Use contrasting foreground/background colors for readability
- `details` colors should be subdued versions of `foreground` colors
- Test your theme in different lighting conditions
- Transparent backgrounds (`null`) work well with terminal themes
- Powerline arrows look best with complementary adjacent section colors