Skip to content

Commit 6a0d470

Browse files
JhaSourav07JhaSourav07
authored
docs(themes): add live SVG preview badge for all 19 preset themes in THEMES.md (JhaSourav07#1711)
## What does this PR do? THEMES.md previously contained only a hex color table with no visual previews. This PR adds a live rendered CommitPulse badge embed for every single preset theme so developers can compare all themes at a glance without manually testing each URL. ## Pillar - [x] Other: Documentation improvement ## Fixes Closes JhaSourav07#1708 ## Changes | File | Change | |------|--------| | `THEMES.md` | Added live badge preview for all 19 preset themes | | `THEMES.md` | Kept hex color table under each preview for reference | | `THEMES.md` | Added Custom Theme and Auto Theme usage sections | ## All 19 themes now have previews dark, light, neon, github, dracula, ocean, sunset, forest, rose, nord, synthwave, gruvbox, aurora_cyberpunk, highcontrast, catppuccin_latte, solarized_light, gruvbox_light, nord_light, cyber-pulse ## Checklist - [x] Zero code changes — Markdown only - [x] npm run lint passes locally - [x] npm run format passes locally - [x] All 19 themes from lib/svg/themes.ts are represented - [x] My commits follow the Conventional Commits format - [x] No new dependencies added
2 parents ce6368f + 4a224b2 commit 6a0d470

1 file changed

Lines changed: 242 additions & 48 deletions

File tree

‎THEMES.md‎

Lines changed: 242 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,285 @@
11
# 🎨 CommitPulse Themes
22

3-
All 13 available themes for your CommitPulse badge. Use the `?theme=<slug>` query parameter to apply a
4-
theme.
3+
All 19 available themes for your CommitPulse badge. Use the `?theme=<slug>` query parameter to apply a theme.
54

65
```
7-
https://commitpulse.vercel.app/api/badge?username=YOUR_USERNAME&theme=<slug>
6+
https://commitpulse.vercel.app/api/streak?user=YOUR_USERNAME&theme=<slug>
87
```
98

109
---
1110

1211
## Theme Gallery
1312

14-
| Theme | Background | Text | Accent |
15-
| ------------ | ---------- | --------- | --------- |
16-
| dark | `#0d1117` | `#c9d1d9` | `#58a6ff` |
17-
| light | `#ffffff` | `#24292f` | `#0969da` |
18-
| neon | `#000000` | `#00ffcc` | `#ff00ff` |
19-
| github | `#0d1117` | `#ffffff` | `#39d353` |
20-
| dracula | `#282a36` | `#f8f8f2` | `#bd93f9` |
21-
| ocean | `#0a192f` | `#ccd6f6` | `#64ffda` |
22-
| sunset | `#1a0a0a` | `#ffd6c0` | `#ff6b35` |
23-
| forest | `#0d1f0d` | `#c8f0c8` | `#39d353` |
24-
| rose | `#1f0d14` | `#f0c8d4` | `#ff6b9d` |
25-
| nord | `#2e3440` | `#d8dee9` | `#88c0d0` |
26-
| synthwave | `#0d0221` | `#f8f8f2` | `#ff2d78` |
27-
| gruvbox | `#282828` | `#ebdbb2` | `#fe8019` |
28-
| highcontrast | `#0a0a0a` | `#ffffff` | `#ff4500` |
13+
| Theme | Background | Text | Accent |
14+
| ---------------- | ---------- | --------- | --------- |
15+
| dark | `#0d1117` | `#c9d1d9` | `#58a6ff` |
16+
| light | `#ffffff` | `#24292f` | `#0969da` |
17+
| neon | `#000000` | `#00ffcc` | `#ff00ff` |
18+
| github | `#0d1117` | `#ffffff` | `#238636` |
19+
| dracula | `#282a36` | `#f8f8f2` | `#bd93f9` |
20+
| ocean | `#0a192f` | `#ccd6f6` | `#64ffda` |
21+
| sunset | `#1a0a0a` | `#ffd6c0` | `#ff6b35` |
22+
| forest | `#0d1f0d` | `#c8f0c8` | `#39d353` |
23+
| rose | `#1f0d14` | `#f0c8d4` | `#ff6b9d` |
24+
| nord | `#2e3440` | `#d8dee9` | `#88c0d0` |
25+
| synthwave | `#0d0221` | `#f8f8f2` | `#ff2d78` |
26+
| gruvbox | `#282828` | `#ebdbb2` | `#fe8019` |
27+
| aurora_cyberpunk | `#090B13` | `#EAF2FF` | `#9D5CFF` |
28+
| highcontrast | `#0a0a0a` | `#ffffff` | `#ff4500` |
29+
| catppuccin_latte | `#eff1f5` | `#4c4f69` | `#1e66f5` |
30+
| solarized_light | `#fdf6e3` | `#586e75` | `#268bd2` |
31+
| gruvbox_light | `#fbf1c7` | `#3c3836` | `#d65d0e` |
32+
| nord_light | `#eceff4` | `#2e3440` | `#5e81ac` |
33+
| cyber-pulse | `#000000` | `#ffffff` | `#00ffee` |
2934

3035
---
3136

32-
## Preview URLs
37+
## Preview Gallery
3338

34-
Use these URLs to preview each theme in your README:
39+
### 🌑 Dark (default)
3540

36-
**dark**
41+
![dark](https://commitpulse.vercel.app/api/streak?user=jhasourav07&theme=dark)
3742

38-
![dark](https://commitpulse.vercel.app/api/badge?username=demo&theme=dark)
43+
| Parameter | Value |
44+
| --------- | ------ |
45+
| `bg` | 0d1117 |
46+
| `text` | c9d1d9 |
47+
| `accent` | 58a6ff |
3948

40-
**light**
49+
---
50+
51+
### ☀️ Light
52+
53+
![light](https://commitpulse.vercel.app/api/streak?user=jhasourav07&theme=light)
54+
55+
| Parameter | Value |
56+
| --------- | ------ |
57+
| `bg` | ffffff |
58+
| `text` | 24292f |
59+
| `accent` | 0969da |
60+
61+
---
62+
63+
### ⚡ Neon
64+
65+
![neon](https://commitpulse.vercel.app/api/streak?user=jhasourav07&theme=neon)
66+
67+
| Parameter | Value |
68+
| --------- | ------ |
69+
| `bg` | 000000 |
70+
| `text` | 00ffcc |
71+
| `accent` | ff00ff |
72+
73+
---
74+
75+
### 🐙 GitHub
76+
77+
![github](https://commitpulse.vercel.app/api/streak?user=jhasourav07&theme=github)
78+
79+
| Parameter | Value |
80+
| --------- | ------ |
81+
| `bg` | 0d1117 |
82+
| `text` | ffffff |
83+
| `accent` | 238636 |
84+
85+
---
86+
87+
### 🧛 Dracula
88+
89+
![dracula](https://commitpulse.vercel.app/api/streak?user=jhasourav07&theme=dracula)
90+
91+
| Parameter | Value |
92+
| --------- | ------ |
93+
| `bg` | 282a36 |
94+
| `text` | f8f8f2 |
95+
| `accent` | bd93f9 |
96+
97+
---
98+
99+
### 🌊 Ocean
100+
101+
![ocean](https://commitpulse.vercel.app/api/streak?user=jhasourav07&theme=ocean)
102+
103+
| Parameter | Value |
104+
| --------- | ------ |
105+
| `bg` | 0a192f |
106+
| `text` | ccd6f6 |
107+
| `accent` | 64ffda |
108+
109+
---
110+
111+
### 🌅 Sunset
112+
113+
![sunset](https://commitpulse.vercel.app/api/streak?user=jhasourav07&theme=sunset)
114+
115+
| Parameter | Value |
116+
| --------- | ------ |
117+
| `bg` | 1a0a0a |
118+
| `text` | ffd6c0 |
119+
| `accent` | ff6b35 |
120+
121+
---
122+
123+
### 🌲 Forest
124+
125+
![forest](https://commitpulse.vercel.app/api/streak?user=jhasourav07&theme=forest)
126+
127+
| Parameter | Value |
128+
| --------- | ------ |
129+
| `bg` | 0d1f0d |
130+
| `text` | c8f0c8 |
131+
| `accent` | 39d353 |
132+
133+
---
134+
135+
### 🌸 Rose
136+
137+
![rose](https://commitpulse.vercel.app/api/streak?user=jhasourav07&theme=rose)
138+
139+
| Parameter | Value |
140+
| --------- | ------ |
141+
| `bg` | 1f0d14 |
142+
| `text` | f0c8d4 |
143+
| `accent` | ff6b9d |
41144

42-
![light](https://commitpulse.vercel.app/api/badge?username=demo&theme=light)
145+
---
146+
147+
### ❄️ Nord
148+
149+
![nord](https://commitpulse.vercel.app/api/streak?user=jhasourav07&theme=nord)
150+
151+
| Parameter | Value |
152+
| --------- | ------ |
153+
| `bg` | 2e3440 |
154+
| `text` | d8dee9 |
155+
| `accent` | 88c0d0 |
156+
157+
---
158+
159+
### 🎵 Synthwave
160+
161+
![synthwave](https://commitpulse.vercel.app/api/streak?user=jhasourav07&theme=synthwave)
162+
163+
| Parameter | Value |
164+
| --------- | ------ |
165+
| `bg` | 0d0221 |
166+
| `text` | f8f8f2 |
167+
| `accent` | ff2d78 |
168+
169+
---
43170

44-
**neon**
171+
### 🪵 Gruvbox
45172

46-
![neon](https://commitpulse.vercel.app/api/badge?username=demo&theme=neon)
173+
![gruvbox](https://commitpulse.vercel.app/api/streak?user=jhasourav07&theme=gruvbox)
47174

48-
**github**
175+
| Parameter | Value |
176+
| --------- | ------ |
177+
| `bg` | 282828 |
178+
| `text` | ebdbb2 |
179+
| `accent` | fe8019 |
49180

50-
![github](https://commitpulse.vercel.app/api/badge?username=demo&theme=github)
181+
---
51182

52-
**dracula**
183+
### 🔮 Aurora Cyberpunk
53184

54-
![dracula](https://commitpulse.vercel.app/api/badge?username=demo&theme=dracula)
185+
![aurora_cyberpunk](https://commitpulse.vercel.app/api/streak?user=jhasourav07&theme=aurora_cyberpunk)
55186

56-
**ocean**
187+
| Parameter | Value |
188+
| --------- | ------ |
189+
| `bg` | 090B13 |
190+
| `text` | EAF2FF |
191+
| `accent` | 9D5CFF |
57192

58-
![ocean](https://commitpulse.vercel.app/api/badge?username=demo&theme=ocean)
193+
---
59194

60-
**sunset**
195+
### 🔦 High Contrast
61196

62-
![sunset](https://commitpulse.vercel.app/api/badge?username=demo&theme=sunset)
197+
![highcontrast](https://commitpulse.vercel.app/api/streak?user=jhasourav07&theme=highcontrast)
63198

64-
**forest**
199+
| Parameter | Value |
200+
| --------- | ------ |
201+
| `bg` | 0a0a0a |
202+
| `text` | ffffff |
203+
| `accent` | ff4500 |
204+
205+
---
65206

66-
![forest](https://commitpulse.vercel.app/api/badge?username=demo&theme=forest)
207+
### 🐱 Catppuccin Latte
67208

68-
**rose**
209+
![catppuccin_latte](https://commitpulse.vercel.app/api/streak?user=jhasourav07&theme=catppuccin_latte)
69210

70-
![rose](https://commitpulse.vercel.app/api/badge?username=demo&theme=rose)
211+
| Parameter | Value |
212+
| --------- | ------ |
213+
| `bg` | eff1f5 |
214+
| `text` | 4c4f69 |
215+
| `accent` | 1e66f5 |
71216

72-
**nord**
217+
---
73218

74-
![nord](https://commitpulse.vercel.app/api/badge?username=demo&theme=nord)
219+
### 🌞 Solarized Light
75220

76-
**synthwave**
221+
![solarized_light](https://commitpulse.vercel.app/api/streak?user=jhasourav07&theme=solarized_light)
77222

78-
![synthwave](https://commitpulse.vercel.app/api/badge?username=demo&theme=synthwave)
223+
| Parameter | Value |
224+
| --------- | ------ |
225+
| `bg` | fdf6e3 |
226+
| `text` | 586e75 |
227+
| `accent` | 268bd2 |
79228

80-
**gruvbox**
229+
---
81230

82-
![gruvbox](https://commitpulse.vercel.app/api/badge?username=demo&theme=gruvbox)
231+
### 🌻 Gruvbox Light
83232

84-
**highcontrast**
233+
![gruvbox_light](https://commitpulse.vercel.app/api/streak?user=jhasourav07&theme=gruvbox_light)
85234

86-
![highcontrast](https://commitpulse.vercel.app/api/badge?username=demo&theme=highcontrast)
235+
| Parameter | Value |
236+
| --------- | ------ |
237+
| `bg` | fbf1c7 |
238+
| `text` | 3c3836 |
239+
| `accent` | d65d0e |
87240

88241
---
89242

90-
> 💡 **Tip:** Use `?theme=auto` to automatically switch between `light` and `dark` based on the
91-
> viewer's OS setting.
243+
### 🏔️ Nord Light
244+
245+
![nord_light](https://commitpulse.vercel.app/api/streak?user=jhasourav07&theme=nord_light)
246+
247+
| Parameter | Value |
248+
| --------- | ------ |
249+
| `bg` | eceff4 |
250+
| `text` | 2e3440 |
251+
| `accent` | 5e81ac |
252+
253+
---
254+
255+
### 💠 Cyber Pulse
256+
257+
![cyber-pulse](https://commitpulse.vercel.app/api/streak?user=jhasourav07&theme=cyber-pulse)
258+
259+
| Parameter | Value |
260+
| --------- | ------ |
261+
| `bg` | 000000 |
262+
| `text` | ffffff |
263+
| `accent` | 00ffee |
264+
265+
---
266+
267+
## 🎛️ Custom Theme
268+
269+
Not finding what you want? Build your own using raw color parameters — all values are hex codes **without** the `#` prefix:
270+
271+
```
272+
https://commitpulse.vercel.app/api/streak?user=YOUR_USERNAME&bg=1a1b27&text=a9b1d6&accent=7aa2f7
273+
```
274+
275+
---
276+
277+
## 🔄 Auto Theme
278+
279+
Automatically switches between light and dark based on the viewer's OS setting — no hex values needed:
280+
281+
```
282+
https://commitpulse.vercel.app/api/streak?user=YOUR_USERNAME&theme=auto
283+
```
284+
285+
> 💡 **Tip:** You can combine `theme=` with individual overrides. For example, `theme=dracula&accent=ff79c6` applies the Dracula theme but swaps only the accent color.

0 commit comments

Comments
 (0)