feat(themes): add random theme selection via ?theme=random

Author: Subhooo5

README.md

@@ -92,14 +92,15 @@ URL Parameter > Theme Default > System Fallback
 
 ### Theme Presets
 
-| Theme              | Preview             | `bg`     | `accent` | `text`   |
-| ------------------ | ------------------- | -------- | -------- | -------- |
-| `auto`             | System light / dark | _adapts_ | _adapts_ | _adapts_ |
-| `dark` _(default)_ | GitHub dark         | `0d1117` | `58a6ff` | `c9d1d9` |
-| `neon`             | Cyberpunk           | `000000` | `ff00ff` | `00ffcc` |
-| `dracula`          | Dracula Pro         | `282a36` | `bd93f9` | `f8f8f2` |
-| `github`           | GitHub green        | `0d1117` | `238636` | `ffffff` |
-| `light`            | Clean & minimal     | `ffffff` | `0969da` | `24292f` |
+| Theme              | Preview                  | `bg`     | `accent` | `text`   |
+| ------------------ | ------------------------ | -------- | -------- | -------- |
+| `auto`             | System light / dark      | _adapts_ | _adapts_ | _adapts_ |
+| `dark` _(default)_ | GitHub dark              | `0d1117` | `58a6ff` | `c9d1d9` |
+| `neon`             | Cyberpunk                | `000000` | `ff00ff` | `00ffcc` |
+| `dracula`          | Dracula Pro              | `282a36` | `bd93f9` | `f8f8f2` |
+| `github`           | GitHub green             | `0d1117` | `238636` | `ffffff` |
+| `light`            | Clean & minimal          | `ffffff` | `0969da` | `24292f` |
+| `random`           | Surprise theme on reload | _varies_ | _varies_ | _varies_ |
 
 > **`auto` uses CSS `@media (prefers-color-scheme)`** inside the SVG so the badge switches between the `light` and `dark` palettes based on the viewer's OS setting — no JavaScript required. This is ideal for GitHub profile READMEs where visitors may use either mode.
 

app/api/streak/route.ts

@@ -22,7 +22,16 @@ export async function GET(request: Request) {
 
     const themeName = searchParams.get('theme') || 'dark';
     const isAutoTheme = themeName === 'auto';
-    const selectedTheme = isAutoTheme ? themes.light : themes[themeName] || themes.dark;
+    const isRandomTheme = themeName === 'random';
+    const selectedTheme = (() => {
+      if (isAutoTheme) return themes.light;
+      if (isRandomTheme) {
+        const themeKeys = Object.keys(themes);
+        const randomKey = themeKeys[Math.floor(Math.random() * themeKeys.length)];
+        return themes[randomKey] || themes.dark;
+      }
+      return themes[themeName] || themes.dark;
+    })();
 
     const rawSpeed = searchParams.get('speed') || '8s';
     const speed = /^\d+(\.\d+)?s$/.test(rawSpeed) ? rawSpeed : '8s';
@@ -58,9 +67,10 @@ export async function GET(request: Request) {
 
     // 4. Calculate Cache Control (Reset at UTC Midnight)
     const secondsToMidnight = getSecondsUntilUTCMidnight();
-    const cacheControl = refresh
-      ? 'no-cache, no-store, must-revalidate'
-      : `public, s-maxage=${secondsToMidnight}, stale-while-revalidate=86400`;
+    const cacheControl =
+      refresh || isRandomTheme
+        ? 'no-cache, no-store, must-revalidate'
+        : `public, s-maxage=${secondsToMidnight}, stale-while-revalidate=86400`;
 
     // 5. Return the Image Response
     return new NextResponse(svg, {