diff --git a/src/routes/[username]/[slug]/badges/leaderkey/+server.ts b/src/routes/[username]/[slug]/badges/leaderkey/+server.ts
index 3265f10a..7aed1863 100644
--- a/src/routes/[username]/[slug]/badges/leaderkey/+server.ts
+++ b/src/routes/[username]/[slug]/badges/leaderkey/+server.ts
@@ -2,16 +2,25 @@ import { getConfigBySlug } from '$lib/server/prisma/neovimconfigs/service';
 import type { RequestEvent, RequestHandler } from './$types';
 
 const BASE_URL =
-	'https://img.shields.io/badge/{value}-22c55e?logo=neovim&label={label}&labelColor=1e40af&link=https://dotfyle.com/{repo-owner}/{repo-slug}&style={style}';
+	'https://img.shields.io/badge/{value}-{color}?logo=neovim&label={label}&labelColor={labelColor}&logoColor={logoColor}&link=https://dotfyle.com/{repo-owner}/{repo-slug}&style={style}';
 
 export const GET: RequestHandler = async function (event: RequestEvent) {
 	const { username, slug } = event.params;
 	const style = event.url.searchParams.get('style') ?? 'flat';
+
+	// Add color support + sanitize input
+	const color = event.url.searchParams.get('color').replaceAll(/[^0-9a-z]/i, '') ?? '22c55e';
+	const label_color = event.url.searchParams.get('labelColor').replaceAll(/[^0-9a-z]/i, '') ?? '1e40af';
+	const logo_color = event.url.searchParams.get('logoColor').replaceAll(/[^0-9a-z]/i, '') ?? '';
+
 	const neovimConfig = await getConfigBySlug(username, slug);
 	const url = BASE_URL.replaceAll('{repo-owner}', username)
 		.replaceAll('{repo-slug}', slug)
 		.replaceAll('{label}', `leaderkey`)
 		.replaceAll('{value}', neovimConfig.leaderkey)
+		.replaceAll('{color}', color)
+		.replaceAll('{labelColor}', label_color)
+		.replaceAll('{logoColor}', logo_color)
 		.replaceAll('{style}', style);
 	const res = await fetch(url).then((r) => r.text());
 	event.setHeaders({
diff --git a/src/routes/[username]/[slug]/badges/plugin-manager/+server.ts b/src/routes/[username]/[slug]/badges/plugin-manager/+server.ts
index 89210bbe..b64f830a 100644
--- a/src/routes/[username]/[slug]/badges/plugin-manager/+server.ts
+++ b/src/routes/[username]/[slug]/badges/plugin-manager/+server.ts
@@ -2,11 +2,17 @@ import { prismaClient } from '$lib/server/prisma/client';
 import type { RequestEvent, RequestHandler } from './$types';
 
 const BASE_URL =
-	'https://img.shields.io/badge/{value}-22c55e?logo=neovim&label={label}&labelColor=1e40af&link=https://dotfyle.com/{repo-owner}/{repo-slug}&style={style}';
+	'https://img.shields.io/badge/{value}-{color}?logo=neovim&label={label}&labelColor={labelColor}&logoColor={logoColor}&link=https://dotfyle.com/{repo-owner}/{repo-slug}&style={style}';
 
 export const GET: RequestHandler = async function (event: RequestEvent) {
 	const { username, slug } = event.params;
 	const style = event.url.searchParams.get('style') ?? 'flat';
+
+	// Add color support + sanitize input
+	const color = event.url.searchParams.get('color').replaceAll(/[^0-9a-z]/i, '') ?? '22c55e';
+	const label_color = event.url.searchParams.get('labelColor').replaceAll(/[^0-9a-z]/i, '') ?? '1e40af';
+	const logo_color = event.url.searchParams.get('logoColor').replaceAll(/[^0-9a-z]/i, '') ?? '';
+
 	const pluginManagerInstallation = await prismaClient.neovimConfigPlugins.findFirst({
 		where: {
 			config: {
@@ -27,6 +33,9 @@ export const GET: RequestHandler = async function (event: RequestEvent) {
 		.replaceAll('{repo-slug}', slug)
 		.replaceAll('{label}', `plugin manager`)
 		.replaceAll('{value}', pluginManagerInstallation?.plugin?.name ?? 'unknown')
+		.replaceAll('{color}', color)
+		.replaceAll('{labelColor}', label_color)
+		.replaceAll('{logoColor}', logo_color)
 		.replaceAll('{style}', style);
 	const res = await fetch(url).then((r) => r.text());
 	event.setHeaders({
diff --git a/src/routes/[username]/[slug]/badges/plugins/+server.ts b/src/routes/[username]/[slug]/badges/plugins/+server.ts
index 4d0d395c..128b6521 100644
--- a/src/routes/[username]/[slug]/badges/plugins/+server.ts
+++ b/src/routes/[username]/[slug]/badges/plugins/+server.ts
@@ -2,17 +2,26 @@ import { getConfigBySlug } from '$lib/server/prisma/neovimconfigs/service';
 import type { RequestEvent, RequestHandler } from './$types';
 
 const BASE_URL =
-	'https://img.shields.io/badge/{value}-22c55e?logo=neovim&label={label}&labelColor=1e40af&link=https://dotfyle.com/{repo-owner}/{repo-slug}&style={style}';
+	'https://img.shields.io/badge/{value}-{color}?logo=neovim&label={label}&labelColor={labelColor}&logoColor={logoColor}&link=https://dotfyle.com/{repo-owner}/{repo-slug}&style={style}';
 
 export const GET: RequestHandler = async function (event: RequestEvent) {
 	const { username, slug } = event.params;
 	const style = event.url.searchParams.get('style') ?? 'flat';
+
+	// Add color support + sanitize input
+	const color = event.url.searchParams.get('color').replaceAll(/[^0-9a-z]/i, '') ?? '22c55e';
+	const label_color = event.url.searchParams.get('labelColor').replaceAll(/[^0-9a-z]/i, '') ?? '1e40af';
+	const logo_color = event.url.searchParams.get('logoColor').replaceAll(/[^0-9a-z]/i, '') ?? '';
+
 	const neovimConfig = await getConfigBySlug(username, slug);
 	const pluginCount = neovimConfig.pluginCount;
 	const url = BASE_URL.replaceAll('{repo-owner}', username)
 		.replaceAll('repo-slug', slug)
 		.replaceAll('{label}', `plugins installed`)
 		.replaceAll('{value}', pluginCount.toString())
+		.replaceAll('{color}', color)
+		.replaceAll('{labelColor}', label_color)
+		.replaceAll('{logoColor}', logo_color)
 		.replaceAll('{style}', style);
 	const res = await fetch(url).then((r) => r.text());
 	event.setHeaders({
diff --git a/src/routes/plugins/[owner]/[plugin]/shield/+server.ts b/src/routes/plugins/[owner]/[plugin]/shield/+server.ts
index 6e13fd2b..04916b5c 100644
--- a/src/routes/plugins/[owner]/[plugin]/shield/+server.ts
+++ b/src/routes/plugins/[owner]/[plugin]/shield/+server.ts
@@ -2,16 +2,25 @@ import { getPlugin } from '$lib/server/prisma/neovimplugins/service';
 import type { RequestEvent, RequestHandler } from './$types';
 
 const BASE_URL =
-	'https://img.shields.io/badge/{plugin-usage}-22c55e?logo=neovim&label=configs%20using%20{repo-name}&labelColor=1e40af&link=https://dotfyle.com/plugins/{repo-owner}/{repo-name}&style={style}';
+	'https://img.shields.io/badge/{plugin-usage}-{color}?logo=neovim&label=configs%20using%20{repo-name}&labelColor={labelColor}&logoColor={logoColor}&link=https://dotfyle.com/plugins/{repo-owner}/{repo-name}&style={style}';
 
 export const GET: RequestHandler = async function (event: RequestEvent) {
 	const { owner, plugin: plugin } = event.params;
 	const style = event.url.searchParams.get('style') ?? 'flat';
+
+	// Add color support + sanitize input
+	const color = event.url.searchParams.get('color').replaceAll(/[^0-9a-z]/i, '') ?? '22c55e';
+	const label_color = event.url.searchParams.get('labelColor').replaceAll(/[^0-9a-z]/i, '') ?? '1e40af';
+	const logo_color = event.url.searchParams.get('logoColor').replaceAll(/[^0-9a-z]/i, '') ?? '';
+
 	const neovimPlugin = await getPlugin(owner, plugin);
 	const usage = neovimPlugin.configCount;
 	const url = BASE_URL.replaceAll('{repo-owner}', owner)
 		.replaceAll('{repo-name}', plugin)
 		.replaceAll('{plugin-usage}', usage.toString())
+		.replaceAll('{color}', color)
+		.replaceAll('{labelColor}', label_color)
+		.replaceAll('{logoColor}', logo_color)
 		.replaceAll('{style}', style);
 	const res = await fetch(url).then((r) => r.text());
 	event.setHeaders({