Skip to content

Commit e649931

Browse files
0l1v3rr0l1v3rr
committed
backend(themes): add more themes and a script file to preview the theme more easily
1 parent bfb8586 commit e649931

File tree

3 files changed

+141
-15
lines changed

3 files changed

+141
-15
lines changed

‎docs/THEMES.md‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,20 @@ If none of these themes fit your needs, feel free to [add one.](https://github.c
2323
</td>
2424
</tr>
2525

26+
<tr>
27+
<td align="center"><code>github_dark_green</code></td>
28+
<td>
29+
<img src="https://github-readme-tech-stack.vercel.app/api/cards?theme=github_dark_green&title=github_dark_green&lineCount=1&line1=typescript,typescript,auto;express,express.js,61DAFB">
30+
</td>
31+
</tr>
32+
33+
<tr>
34+
<td align="center"><code>github_dark_red</code></td>
35+
<td>
36+
<img src="https://github-readme-tech-stack.vercel.app/api/cards?theme=github_dark_red&title=github_dark_red&lineCount=1&line1=typescript,typescript,auto;express,express.js,61DAFB">
37+
</td>
38+
</tr>
39+
2640
<tr>
2741
<td align="center"><code>react</code></td>
2842
<td>
@@ -148,6 +162,34 @@ If none of these themes fit your needs, feel free to [add one.](https://github.c
148162
<img src="https://github-readme-tech-stack.vercel.app/api/cards?theme=blood_dark&title=blood_dark&lineCount=1&line1=typescript,typescript,auto;express,express.js,61DAFB">
149163
</td>
150164
</tr>
165+
166+
<tr>
167+
<td align="center"><code>hacker</code></td>
168+
<td>
169+
<img src="https://github-readme-tech-stack.vercel.app/api/cards?theme=hacker&title=hacker&lineCount=1&line1=typescript,typescript,auto;express,express.js,61DAFB">
170+
</td>
171+
</tr>
172+
173+
<tr>
174+
<td align="center"><code>windows</code></td>
175+
<td>
176+
<img src="https://github-readme-tech-stack.vercel.app/api/cards?theme=windows&title=windows&lineCount=1&line1=typescript,typescript,auto;express,express.js,61DAFB">
177+
</td>
178+
</tr>
179+
180+
<tr>
181+
<td align="center"><code>halloween</code></td>
182+
<td>
183+
<img src="https://github-readme-tech-stack.vercel.app/api/cards?theme=halloween&title=halloween&lineCount=1&line1=typescript,typescript,auto;express,express.js,61DAFB">
184+
</td>
185+
</tr>
186+
187+
<tr>
188+
<td align="center"><code>christmas</code></td>
189+
<td>
190+
<img src="https://github-readme-tech-stack.vercel.app/api/cards?theme=christmas&title=christmas&lineCount=1&line1=typescript,typescript,auto;express,express.js,61DAFB">
191+
</td>
192+
</tr>
151193

152194
<tr>
153195
<td align="center"><code>catppuccin_latte</code></td>
@@ -176,4 +218,25 @@ If none of these themes fit your needs, feel free to [add one.](https://github.c
176218
<img src="https://github-readme-tech-stack.vercel.app/api/cards?theme=catppuccin_mocha&title=catppuccin_mocha&lineCount=1&line1=typescript,typescript,auto;express,express.js,61DAFB">
177219
</td>
178220
</tr>
221+
222+
<tr>
223+
<td align="center"><code>vs</code></td>
224+
<td>
225+
<img src="https://github-readme-tech-stack.vercel.app/api/cards?theme=vs&title=vs&lineCount=1&line1=typescript,typescript,auto;express,express.js,61DAFB">
226+
</td>
227+
</tr>
228+
229+
<tr>
230+
<td align="center"><code>bearded</code></td>
231+
<td>
232+
<img src="https://github-readme-tech-stack.vercel.app/api/cards?theme=bearded&title=bearded&lineCount=1&line1=typescript,typescript,auto;express,express.js,61DAFB">
233+
</td>
234+
</tr>
235+
236+
<tr>
237+
<td align="center"><code>rainglow</code></td>
238+
<td>
239+
<img src="https://github-readme-tech-stack.vercel.app/api/cards?theme=rainglow&title=rainglow&lineCount=1&line1=typescript,typescript,auto;express,express.js,61DAFB">
240+
</td>
241+
</tr>
179242
</table>

‎scripts/preview_theme.sh‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
#!/bin/bash
2+
3+
BLUE="\e[1;34m"
4+
RED="\e[1;31m"
5+
6+
NC="\e[0m"
7+
8+
printf "${BLUE}--==<[ Theme Preview ]>==--${NC}\n"
9+
printf "This script starts the application on port ${RED}8080${NC} and generates a link, to preview the theme easily.\n"
10+
printf "It also generates a ${RED}<tr>${NC} tag, so you can paste it inside the ${RED}THEMES.md${NC} file.\n\n"
11+
12+
read -p "theme name > " THEME
13+
14+
VERCEL_BASE="https://github-readme-tech-stack.vercel.app/api/cards"
15+
BASE="http://localhost:8080/api/cards"
16+
PARAMS="?theme=${THEME}&title=${THEME}&lineCount=1&line1=typescript,typescript,auto;express,express.js,61DAFB"
17+
18+
LINK="${BASE}${PARAMS}"
19+
LINE="\n\e]8;;${LINK}\e\\[Click here]\e]8;;\e\\n"
20+
21+
echo -e $LINE
22+
23+
printf "\<tr>\n"
24+
printf " <td align=\"center\"><code>${THEME}</code></td>\n"
25+
printf " <td>\n"
26+
printf " <img src=\"${VERCEL_BASE}${PARAMS}\">\n"
27+
printf " </td>\n"
28+
printf "</tr>\n\n"
29+
30+
case "$OSTYPE" in
31+
darwin*) open $LINK ;;
32+
linux*) xdg-open $LINK ;;
33+
msys*) start $LINK ;;
34+
cygwin*) start $LINK ;;
35+
esac
36+
37+
printf "${NC}The app is running on port ${RED}8080${NC}.\n"
38+
printf "${NC}Press ${RED}ctrl+c${NC} to exit.\n"
39+
npm run dev -- --quiet >&-

‎src/cards/themes.ts‎

Lines changed: 39 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,18 @@ themes.set("github_dark", {
1818
titleColor: "#58A6FF",
1919
badgeColor: "#161B22",
2020
});
21+
themes.set("github_dark_green", {
22+
backgroundColor: "#0D1117",
23+
borderColor: "#21262D",
24+
titleColor: "#43ec63",
25+
badgeColor: "#161B22",
26+
});
27+
themes.set("github_dark_red", {
28+
backgroundColor: "#0D1117",
29+
borderColor: "#21262D",
30+
titleColor: "#ff8f69",
31+
badgeColor: "#161B22",
32+
});
2133
themes.set("react", {
2234
backgroundColor: "#222222",
2335
borderColor: "#3B3B3B",
@@ -127,28 +139,22 @@ themes.set("blood_dark", {
127139
badgeColor: "#0F3242",
128140
});
129141
themes.set("hacker", {
130-
backgroundColor: "#000000",
131-
borderColor: "#1DDB07",
142+
backgroundColor: "#101010",
143+
borderColor: "#222",
132144
titleColor: "#1DDB07",
133-
badgeColor: "#0F0F0F",
145+
badgeColor: "#222",
134146
});
135147
themes.set("android", {
136-
backgroundColor: "#000000",
137-
borderColor: "#3ADD85",
148+
backgroundColor: "#101010",
149+
borderColor: "#222",
138150
titleColor: "#3ADD85",
139-
badgeColor: "#0F0F0F",
151+
badgeColor: "#222",
140152
});
141153
themes.set("windows", {
142-
backgroundColor: "#000000",
143-
borderColor: "#00A3EE",
154+
backgroundColor: "#101010",
155+
borderColor: "#222",
144156
titleColor: "#00A3EE",
145-
badgeColor: "#0F0F0F",
146-
});
147-
themes.set("java", {
148-
backgroundColor: "#000000",
149-
borderColor: "#3383A3",
150-
titleColor: "#3383A3",
151-
badgeColor: "#0F0F0F",
157+
badgeColor: "#222",
152158
});
153159
themes.set("halloween", {
154160
backgroundColor: "#1C1A2B",
@@ -198,6 +204,24 @@ themes.set("catppuccin_mocha", {
198204
badgeColor: "#181825",
199205
titleColor: "#94e2d5",
200206
});
207+
themes.set("vs", {
208+
backgroundColor: "#1e1e1e",
209+
borderColor: "#252526",
210+
badgeColor: "#252526",
211+
titleColor: "#56b9f0",
212+
});
213+
themes.set("bearded", {
214+
backgroundColor: "#161d29",
215+
borderColor: "#1c2433",
216+
badgeColor: "#1c2433",
217+
titleColor: "#22e6c5",
218+
});
219+
themes.set("rainglow", {
220+
backgroundColor: "#0e1114",
221+
borderColor: "#12161a",
222+
badgeColor: "#12161a",
223+
titleColor: "#228a96",
224+
});
201225

202226
/**
203227
* Searches for the specified theme in the themes map.

0 commit comments

Comments
 (0)