|
| 1 | +# Themes & Customization |
| 2 | + |
| 3 | +GitType provides extensive theming capabilities to personalize your typing experience with beautiful color schemes and custom styling options. |
| 4 | + |
| 5 | +## Built-in Themes |
| 6 | + |
| 7 | +GitType comes with 15 carefully crafted themes to match your coding style and environment: |
| 8 | + |
| 9 | +| Theme | Description | |
| 10 | +|-------|-------------| |
| 11 | +| `default` | Balanced palette for comfortable readability | |
| 12 | +| `original` | Classic GitType color scheme | |
| 13 | +| `ascii` | Monochrome terminal aesthetic | |
| 14 | +| `aurora` | Northern lights inspired | |
| 15 | +| `blood_oath` | Dark red vampire theme | |
| 16 | +| `cyber_void` | Futuristic neon cyberpunk | |
| 17 | +| `eclipse` | Deep space darkness | |
| 18 | +| `glacier` | Cool blue ice tones | |
| 19 | +| `inferno` | Hot fire and lava colors | |
| 20 | +| `neon_abyss` | Electric neon in darkness | |
| 21 | +| `oblivion` | Mysterious dark void | |
| 22 | +| `runic` | Ancient mystical symbols | |
| 23 | +| `spectral` | Ghostly ethereal colors | |
| 24 | +| `starforge` | Cosmic star creation | |
| 25 | +| `venom` | Toxic green poison theme | |
| 26 | + |
| 27 | +## Changing Themes |
| 28 | + |
| 29 | +### From Settings Screen |
| 30 | +1. Press **Esc** from any screen to return to main menu |
| 31 | +2. Navigate to **Settings** → **Theme** |
| 32 | +3. Use **Up/Down** arrows to browse themes |
| 33 | +4. Changes are applied instantly for preview |
| 34 | +5. Press **Enter** to confirm selection |
| 35 | + |
| 36 | +### Color Mode Toggle |
| 37 | +Switch between Dark and Light modes: |
| 38 | +- Each theme supports both color modes |
| 39 | +- Access via **Settings** → **Color Mode** |
| 40 | +- Dark mode is optimized for low-light environments |
| 41 | +- Light mode provides better contrast in bright conditions |
| 42 | + |
| 43 | +## Creating Custom Themes |
| 44 | + |
| 45 | +### Theme File Structure |
| 46 | +Custom themes use JSON format with the following structure: |
| 47 | + |
| 48 | +```json |
| 49 | +{ |
| 50 | + "id": "my-custom-theme", |
| 51 | + "name": "My Custom Theme", |
| 52 | + "description": "My personal color scheme", |
| 53 | + "dark": { |
| 54 | + "border": {"r": 102, "g": 153, "b": 204}, |
| 55 | + "title": {"r": 235, "g": 235, "b": 235}, |
| 56 | + "text": {"r": 220, "g": 220, "b": 220}, |
| 57 | + "background": {"r": 15, "g": 15, "b": 15}, |
| 58 | + // ... more color definitions |
| 59 | + }, |
| 60 | + "light": { |
| 61 | + "border": {"r": 120, "g": 160, "b": 220}, |
| 62 | + // ... light mode colors |
| 63 | + } |
| 64 | +} |
| 65 | +``` |
| 66 | + |
| 67 | +### Color Properties |
| 68 | +Each theme defines colors for both `dark` and `light` modes: |
| 69 | + |
| 70 | +#### Interface Elements |
| 71 | +- `border` - Window borders and dividers |
| 72 | +- `title` - Main titles and headings |
| 73 | +- `text` - Primary text content |
| 74 | +- `text_secondary` - Secondary/disabled text |
| 75 | +- `background` - Main background |
| 76 | +- `background_secondary` - Secondary panels |
| 77 | + |
| 78 | +#### Status Colors |
| 79 | +- `status_success` - Success messages (typically green) |
| 80 | +- `status_info` - Information messages (typically blue) |
| 81 | +- `status_warning` - Warning messages (typically yellow) |
| 82 | +- `status_error` - Error messages (typically red) |
| 83 | + |
| 84 | +#### Key Indicators |
| 85 | +- `key_back` - Back/cancel actions (usually red) |
| 86 | +- `key_action` - Confirm/action keys (usually green) |
| 87 | +- `key_navigation` - Navigation keys (usually blue) |
| 88 | + |
| 89 | +#### Typing Interface |
| 90 | +- `typing_untyped_text` - Text not yet typed |
| 91 | +- `typing_typed_text` - Successfully typed text |
| 92 | +- `typing_cursor_fg` - Cursor text color |
| 93 | +- `typing_cursor_bg` - Cursor background |
| 94 | +- `typing_mistake_bg` - Error highlight background |
| 95 | + |
| 96 | +#### Metrics Display |
| 97 | +- `metrics_score` - Score display |
| 98 | +- `metrics_cpm_wpm` - Speed metrics (CPM/WPM) |
| 99 | +- `metrics_accuracy` - Accuracy percentage |
| 100 | +- `metrics_duration` - Timer display |
| 101 | +- `metrics_stage_info` - Stage information |
| 102 | + |
| 103 | +### Installing Custom Themes |
| 104 | + |
| 105 | +1. **Create theme file**: Save as `~/.gittype/my-theme.json` |
| 106 | +2. **Restart GitType**: The theme will be available in Settings → Theme menu |
| 107 | +3. **File location**: Custom themes are loaded from the GitType user directory (`~/.gittype/`) |
| 108 | + |
| 109 | +### Complete Theme Example |
| 110 | + |
| 111 | +Here's a complete example creating a "Matrix" theme: |
| 112 | + |
| 113 | +```json |
| 114 | +{ |
| 115 | + "id": "matrix", |
| 116 | + "name": "Matrix", |
| 117 | + "description": "Green-on-black Matrix movie theme", |
| 118 | + "dark": { |
| 119 | + "border": {"r": 0, "g": 255, "b": 0}, |
| 120 | + "title": {"r": 0, "g": 255, "b": 0}, |
| 121 | + "text": {"r": 0, "g": 200, "b": 0}, |
| 122 | + "text_secondary": {"r": 0, "g": 100, "b": 0}, |
| 123 | + "background": {"r": 0, "g": 0, "b": 0}, |
| 124 | + "background_secondary": {"r": 10, "g": 10, "b": 10}, |
| 125 | + "status_success": {"r": 0, "g": 255, "b": 0}, |
| 126 | + "status_info": {"r": 0, "g": 200, "b": 0}, |
| 127 | + "status_warning": {"r": 200, "g": 255, "b": 0}, |
| 128 | + "status_error": {"r": 255, "g": 100, "b": 100}, |
| 129 | + "key_back": {"r": 255, "g": 100, "b": 100}, |
| 130 | + "key_action": {"r": 0, "g": 255, "b": 0}, |
| 131 | + "key_navigation": {"r": 0, "g": 200, "b": 0}, |
| 132 | + "metrics_score": {"r": 0, "g": 255, "b": 0}, |
| 133 | + "metrics_cpm_wpm": {"r": 0, "g": 200, "b": 0}, |
| 134 | + "metrics_accuracy": {"r": 0, "g": 255, "b": 0}, |
| 135 | + "metrics_duration": {"r": 0, "g": 200, "b": 0}, |
| 136 | + "metrics_stage_info": {"r": 0, "g": 150, "b": 0}, |
| 137 | + "typing_untyped_text": {"r": 0, "g": 150, "b": 0}, |
| 138 | + "typing_typed_text": {"r": 0, "g": 255, "b": 0}, |
| 139 | + "typing_cursor_fg": {"r": 0, "g": 0, "b": 0}, |
| 140 | + "typing_cursor_bg": {"r": 0, "g": 255, "b": 0}, |
| 141 | + "typing_mistake_bg": {"r": 100, "g": 0, "b": 0} |
| 142 | + }, |
| 143 | + "light": { |
| 144 | + "border": {"r": 0, "g": 150, "b": 0}, |
| 145 | + "title": {"r": 0, "g": 100, "b": 0}, |
| 146 | + "text": {"r": 0, "g": 80, "b": 0}, |
| 147 | + "text_secondary": {"r": 100, "g": 120, "b": 100}, |
| 148 | + "background": {"r": 240, "g": 255, "b": 240}, |
| 149 | + "background_secondary": {"r": 220, "g": 240, "b": 220}, |
| 150 | + "status_success": {"r": 0, "g": 120, "b": 0}, |
| 151 | + "status_info": {"r": 0, "g": 100, "b": 0}, |
| 152 | + "status_warning": {"r": 150, "g": 150, "b": 0}, |
| 153 | + "status_error": {"r": 150, "g": 0, "b": 0}, |
| 154 | + "key_back": {"r": 150, "g": 0, "b": 0}, |
| 155 | + "key_action": {"r": 0, "g": 120, "b": 0}, |
| 156 | + "key_navigation": {"r": 0, "g": 100, "b": 0}, |
| 157 | + "metrics_score": {"r": 0, "g": 120, "b": 0}, |
| 158 | + "metrics_cpm_wpm": {"r": 0, "g": 100, "b": 0}, |
| 159 | + "metrics_accuracy": {"r": 0, "g": 120, "b": 0}, |
| 160 | + "metrics_duration": {"r": 0, "g": 100, "b": 0}, |
| 161 | + "metrics_stage_info": {"r": 0, "g": 80, "b": 0}, |
| 162 | + "typing_untyped_text": {"r": 100, "g": 120, "b": 100}, |
| 163 | + "typing_typed_text": {"r": 0, "g": 100, "b": 0}, |
| 164 | + "typing_cursor_fg": {"r": 255, "g": 255, "b": 255}, |
| 165 | + "typing_cursor_bg": {"r": 0, "g": 120, "b": 0}, |
| 166 | + "typing_mistake_bg": {"r": 255, "g": 200, "b": 200} |
| 167 | + } |
| 168 | +} |
| 169 | +``` |
| 170 | + |
| 171 | +Save this as `~/.gittype/matrix.json` and restart GitType to use it. |
| 172 | + |
| 173 | +## Configuration Files |
| 174 | + |
| 175 | +### Theme Settings |
| 176 | +Your current theme preference is stored in `~/.gittype/config.json`: |
| 177 | + |
| 178 | +```json |
| 179 | +{ |
| 180 | + "theme": { |
| 181 | + "current_theme_id": "glacier", |
| 182 | + "current_color_mode": "Dark" |
| 183 | + } |
| 184 | +} |
| 185 | +``` |
| 186 | + |
| 187 | +### Custom Theme Storage |
| 188 | +- **Location**: `~/.gittype/` |
| 189 | +- **Format**: `your-theme-name.json` |
| 190 | +- **Auto-detection**: GitType automatically loads all `.json` files in the user directory |
| 191 | + |
| 192 | +## Color Format |
| 193 | + |
| 194 | +Colors use RGB format with values from 0-255: |
| 195 | +```json |
| 196 | +{"r": 255, "g": 128, "b": 64} |
| 197 | +``` |
| 198 | + |
| 199 | +## Tips for Theme Creation |
| 200 | + |
| 201 | +1. **Test both modes**: Always define both dark and light variants |
| 202 | +2. **Maintain contrast**: Ensure sufficient contrast for readability |
| 203 | +3. **Consistent palette**: Use a cohesive color scheme |
| 204 | +4. **Accessibility**: Consider colorblind-friendly palettes |
| 205 | +5. **Preview instantly**: Changes in Settings show immediately for testing |
| 206 | + |
| 207 | +## Troubleshooting |
| 208 | + |
| 209 | +**Theme not appearing**: |
| 210 | +- Check JSON syntax with a validator |
| 211 | +- Ensure all required color properties are defined |
| 212 | +- Restart GitType after adding new themes |
| 213 | + |
| 214 | +**Colors not displaying correctly**: |
| 215 | +- Verify RGB values are within 0-255 range |
| 216 | +- Check that both "dark" and "light" sections are complete |
| 217 | + |
| 218 | +**Theme reverts to default**: |
| 219 | +- Check that `~/.gittype/config.json` has proper write permissions |
| 220 | +- Verify theme ID matches the file name (without .json extension) |
0 commit comments