feat: add 20+ new themes and THEMES.md #2

THEMES.md

@@ -1,48 +1,33 @@
-# 🎨 CommitPulse Theme Gallery
-
-This gallery showcases all available themes for the CommitPulse streak card.
-
----
-
-## 🌌 Neon
-
-![Neon](assets/themes/neon.png)
-
-Usage:
-`/api/streak?user=yourusername&theme=neon`
-
----
-
-## 🧛 Dracula
-
-![Dracula](assets/themes/dracula.png)
-
-Usage:
-`/api/streak?user=yourusername&theme=dracula`
-
----
-
-## 🌑 Dark
-
-![Dark](assets/themes/dark.png)
-
-Usage:
-`/api/streak?user=yourusername&theme=dark`
-
----
-
-## 🌕 Light
-
-![Light](assets/themes/light.png)
-
-Usage:
-`/api/streak?user=yourusername&theme=light`
-
----
-
-## 🐙 GitHub
-
-![GitHub](assets/themes/github.png)
-
-Usage:
-`/api/streak?user=yourusername&theme=github`
+# 🏛️ Theme Gallery
+
+This gallery provides a visual reference for all available color themes in CommitPulse. To use a theme, pass the **Theme Key** to the `theme` parameter in your URL.
+
+**Example Usage:**
+`/api/streak?user=yourusername&theme=aurora`
+
+| # | Theme Name | Theme Key | Preview | Description |
+| :--- | :--- | :--- | :---: | :--- |
+| 1 | **Aurora** | `aurora` | <img src="assets/themes/aurora.png" width="400" /> | Deep red northern lights aesthetic with a dark forest background. |
+| 2 | **Cyber Cyan** | `cyber-cyan` | <img src="assets/themes/cyber-cyan.png" width="400" /> | A clean, futuristic teal glow on a deep obsidian base. |
+| 3 | **Dark** | `dark` | <img src="assets/themes/dark.png" width="400" /> | The classic, professional GitHub dark mode aesthetic. |
+| 4 | **Deep Ocean** | `deep-ocean` | <img src="assets/themes/deep-ocean.png" width="400" /> | Submerged dark tones with a soft bioluminescent teal accent. |
+| 5 | **Dracula** | `dracula` | <img src="assets/themes/dracula.png" width="400" /> | The iconic high-contrast palette with purple and pink accents. |
+| 6 | **Electric Indigo** | `electric-indigo` | <img src="assets/themes/electric-indigo.png" width="400" /> | High-voltage indigo blocks with a sleek, midnight-violet background. |
+| 7 | **Ember** | `ember` | <img src="assets/themes/ember.png" width="400" /> | High-contrast orange glow inspired by heat and burning coals. |
+| 8 | **Future Dusk** | `future-dusk` | <img src="assets/themes/future-dusk.png" width="400" /> | A moody cosmic purple trend—sophisticated and modern. |
+| 9 | **Github** | `github` | <img src="assets/themes/github.png" width="400" /> | The traditional GitHub color scheme with solid green accents. |
+| 10 | **Hyper Violet** | `hyper-violet` | <img src="assets/themes/hyper-violet.png" width="400" /> | Vibrant electric violet optimized for high-tech profiles. |
+| 11 | **Light** | `light` | <img src="assets/themes/light.png" width="400" /> | Clean, professional light mode for high-brightness environments. |
+| 12 | **Midnight Purple** | `midnight-purple` | <img src="assets/themes/midnight-purple.png" width="400" /> | Deep velvet purple tones with bright lavender highlights. |
+| 13 | **Neon** | `neon` | <img src="assets/themes/neon.png" width="400" /> | High-energy black base with neon cyan and magenta retro accents. |
+| 14 | **Neon Magenta** | `neon-magenta` | <img src="assets/themes/neon-magenta.png" width="400" /> | Sharp, energetic pink glow against a pitch-black background. |
+| 15 | **Nord** | `nord` | <img src="assets/themes/nord.png" width="400" /> | Arctic-inspired palette providing a cool, minimal frost feel. |
+| 16 | **One Dark** | `one-dark` | <img src="assets/themes/one-dark.png" width="400" /> | The classic, high-contrast dark theme inspired by Atom. |
+| 17 | **Rose Pine** | `rose-pine` | <img src="assets/themes/rose-pine.png" width="400" /> | Ethereal and moody palette with sophisticated purple tones. |
+| 18 | **Sunset Burn** | `sunset-burn` | <img src="assets/themes/sunset-burn.png" width="400" /> | Fiery orange and amber accents inspired by a deep horizon. |
+| 19 | **Synthwave** | `synthwave` | <img src="assets/themes/synthwave.png" width="400" /> | Retro-futuristic red-grid aesthetic with high-contrast glowing blocks. |
+| 20 | **Tokyo Night** | `tokyo-night` | <img src="assets/themes/tokyo-night.png" width="400" /> | Deep storm-blue with vibrant, high-contrast neon accents. |
+
+---
+
+*Note: Replace `yourusername` with your GitHub username and `aurora` with any other **Theme Key** to see your actual live streak.*

lib/svg/themes.ts

@@ -1,30 +1,104 @@
-// lib/svg/themes.ts
-import { BadgeTheme } from '../../types';
-
-export const themes: Record<string, BadgeTheme> = {
-  dark: {
-    bg: '0d1117',
-    text: 'c9d1d9',
-    accent: '58a6ff',
-  },
-  light: {
-    bg: 'ffffff',
-    text: '24292f',
-    accent: '0969da',
-  },
-  neon: {
-    bg: '000000',
-    text: '00ffcc',
-    accent: 'ff00ff',
-  },
-  github: {
-    bg: '0d1117',
-    text: 'ffffff',
-    accent: '238636', // The classic green
-  },
-  dracula: {
-    bg: '282a36',
-    text: 'f8f8f2',
-    accent: 'bd93f9',
-  },
-};
+import { BadgeTheme } from '../../types';
+
+export const themes: Record<string, BadgeTheme> = {
+  aurora: {
+    bg: '010c09',
+    text: 'fff1f1',
+    accent: 'ff0000',
+  },
+  'cyber-cyan': {
+    bg: '020c0b',
+    text: 'ccfbf1',
+    accent: '14b8a6',
+  },
+  dark: {
+    bg: '0d1117',
+    text: 'c9d1d9',
+    accent: '58a6ff',
+  },
+  'deep-ocean': {
+    bg: '050a0a',
+    text: 'e2e8f0',
+    accent: '2dd4bf',
+  },
+  dracula: {
+    bg: '282a36',
+    text: 'f8f8f2',
+    accent: 'bd93f9',
+  },
+  'electric-indigo': {
+    bg: '12101f',
+    text: 'd1b3ff',
+    accent: '8b5cf6',
+  },
+  ember: {
+    bg: '100b00',
+    text: 'ffe4b5',
+    accent: 'ff4500',
+  },
+  'future-dusk': {
+    bg: '050510',
+    text: 'b3b3ff',
+    accent: 'ff00ff',
+  },
+  github: {
+    bg: '0d1117',
+    text: 'ffffff',
+    accent: '238636',
+  },
+  'hyper-violet': {
+    bg: '0f0524',
+    text: 'd1b3ff',
+    accent: '9d4edd',
+  },
+  light: {
+    bg: 'ffffff',
+    text: '24292f',
+    accent: '0969da',
+  },
+  'midnight-purple': {
+    bg: '080510',
+    text: 'd8b4fe',
+    accent: 'a855f7',
+  },
+  neon: {
+    bg: '000000',
+    text: '00ffcc',
+    accent: 'ff00ff',
+  },
+  'neon-magenta': {
+    bg: '0a050f',
+    text: 'fbcfe8',
+    accent: 'db2777',
+  },
+  nord: {
+    bg: '2e3440',
+    text: 'd8dee9',
+    accent: '81a1c1',
+  },
+  'one-dark': {
+    bg: '282c34',
+    text: 'abb2bf',
+    accent: '61afef',
+  },
+  'rose-pine': {
+    bg: '191724',
+    text: 'e0def4',
+    accent: 'c4a7e7',
+  },
+  'sunset-burn': {
+    bg: '0a0705',
+    text: 'ffe4b5',
+    accent: 'f97316',
+  },
+  synthwave: {
+    bg: '1a0505',
+    text: 'ffb3b3',
+    accent: 'ff2a2a',
+  },
+  'tokyo-night': {
+    bg: '1a1b26',
+    text: 'cfc9c2',
+    accent: '7aa2f7',
+  },
+};