Adds Random as the last Customization Studio theme dropdown option. Random clears and disables custom color overrides, emits theme=random in exported snippets, shows a caching warning, and renders a mixed-accent swatch (JhaSourav07#286)

## Description

Fixes #ISSUE_NUMBER(JhaSourav07#144)

Adds `Random` as the last option in the Customization Studio theme
dropdown. When selected, it emits `theme=random`, clears and disables
custom color overrides, shows a caching warning, and renders a
mixed-accent swatch to communicate randomness.

## Pillar

- [ ] 🎨 Pillar 1 — New Theme Design
- [ ] 📐 Pillar 2 — Geometric SVG Improvement
- [ ] 🕐 Pillar 3 — Timezone Logic Optimization
- [x] 🛠️ Other (Bug fix, refactoring, docs)

## Visual Preview

Tested locally at:

`http://localhost:3000/customize`

## Checklist before requesting a review:

- [x] I have read the `CONTRIBUTING.md` file.
- [x] I have tested these changes locally (`localhost:3000/customize`).
- [x] I have run `npm run format:check`, `npm run lint`, and `npm run
test` locally and resolved all errors.
- [x] My commits follow the Conventional Commits format, e.g.
`feat(customize): add random theme option`.
- [x] I have updated `README.md` if I added a new theme or URL
parameter. Not required for this change because `theme=random` already
exists.
- [x] I have started the repo.
- [x] I have made sure that I have only one commit to merge in this PR.
- [x] The SVG output matches the CommitPulse "premium quality" aesthetic
standard.
- [ ] (Recommended) I joined the CommitPulse Discord community for
contributor discussions, mentorship, and faster PR support..

Author: JhaSourav07

app/customize/components/ControlsPanel.tsx

@@ -125,6 +125,8 @@ export function ControlsPanel({
   const hasOverrides = Boolean(bgHex || accentHex || textHex);
   const currentYear = new Date().getFullYear();
   const isAutoTheme = theme === 'auto';
+  const isRandomTheme = theme === 'random';
+  const disablesCustomColors = isAutoTheme || isRandomTheme;
 
   return (
     <div>
@@ -171,12 +173,21 @@ export function ControlsPanel({
 
         <div>
           <SectionLabel>Custom Color Overrides</SectionLabel>
-          {isAutoTheme ? (
-            <p className="text-[11px] text-white/30 mt-2 leading-relaxed">
-              Custom colors are disabled for the <strong className="text-white/50">Auto</strong>{' '}
-              theme. The badge switches between light and dark palettes automatically based on the
-              viewer&apos;s system preference.
-            </p>
+          {disablesCustomColors ? (
+            <div className="mt-2 flex flex-col gap-2">
+              <p className="text-[11px] text-white/30 leading-relaxed">
+                Custom colors are disabled for the{' '}
+                <strong className="text-white/50">{isAutoTheme ? 'Auto' : 'Random'}</strong> theme.{' '}
+                {isAutoTheme
+                  ? "The badge switches between light and dark palettes automatically based on the viewer's system preference."
+                  : 'The badge chooses a different preset palette for each request.'}
+              </p>
+              {isRandomTheme && (
+                <p className="rounded-lg border border-amber-400/15 bg-amber-400/5 px-3 py-2 text-[11px] leading-relaxed text-amber-200/70">
+                  Random changes on every page load and disables caching for the badge URL.
+                </p>
+              )}
+            </div>
           ) : (
             <>
               <p className="text-[11px] text-white/25 mb-3 leading-relaxed">

app/customize/components/ThemeQuickPresets.tsx

@@ -397,7 +397,7 @@ export function ThemeQuickPresets({ theme, onThemeChange }: ThemeQuickPresetsPro
       `}</style>
 
       <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
-        {THEME_KEYS.filter((key) => key !== 'auto').map((key) => {
+        {THEME_KEYS.filter((key) => key !== 'auto' && key !== 'random').map((key) => {
           const t = themes[key as ThemeKey];
           if (!t) return null;
 

app/customize/components/ThemeSelector.tsx

@@ -35,6 +35,8 @@ export function ThemeSelector({
   onThemeChange: (theme: string) => void;
 }): ReactElement {
   const isAuto = theme === 'auto';
+  const isRandom = theme === 'random';
+  const randomAccentColors = [themes.neon.accent, themes.ocean.accent, themes.sunset.accent];
 
   return (
     <div className="flex flex-col gap-1.5">
@@ -46,7 +48,11 @@ export function ThemeSelector({
         <StyledSelect id="theme-select" value={theme} onChange={onThemeChange}>
           {THEME_KEYS.map((key) => (
             <option key={key} value={key}>
-              {key === 'auto' ? 'Auto (System)' : key.charAt(0).toUpperCase() + key.slice(1)}
+              {key === 'auto'
+                ? 'Auto (System)'
+                : key === 'random'
+                  ? 'Random'
+                  : key.charAt(0).toUpperCase() + key.slice(1)}
             </option>
           ))}
         </StyledSelect>
@@ -66,6 +72,20 @@ export function ThemeSelector({
                 switches with OS theme
               </span>
             </>
+          ) : isRandom ? (
+            <>
+              {randomAccentColors.map((color, index) => (
+                <span
+                  key={color}
+                  title={`Random accent sample ${index + 1}: #${color}`}
+                  className="w-5 h-5 rounded-full border border-white/10"
+                  style={{ backgroundColor: `#${color}` }}
+                />
+              ))}
+              <span className="text-[11px] text-white/25 ml-1 self-center">
+                changes on each load
+              </span>
+            </>
           ) : (
             <>
               {(['bg', 'accent', 'text'] as const).map((prop) => {

app/customize/page.tsx

@@ -26,12 +26,14 @@ export default function CustomizePage(): ReactElement {
   const trimmedUsername = username.trim();
   const hasUsername = trimmedUsername.length > 0;
   const isAutoTheme = theme === 'auto';
+  const isRandomTheme = theme === 'random';
+  const skipsCustomColors = isAutoTheme || isRandomTheme;
 
-  // Clear custom hex overrides when switching to auto — fixed colors
-  // conflict with the dual-palette prefers-color-scheme switching.
+  // Clear custom hex overrides when switching to virtual themes because
+  // fixed colors conflict with their palette-selection behavior.
   const handleThemeChange = useCallback((newTheme: string): void => {
     setTheme(newTheme);
-    if (newTheme === 'auto') {
+    if (newTheme === 'auto' || newTheme === 'random') {
       setBgHex('');
       setAccentHex('');
       setTextHex('');
@@ -47,9 +49,9 @@ export default function CustomizePage(): ReactElement {
       params.set('user', trimmedUsername);
     }
 
-    if (isAutoTheme) {
-      // Auto always emits theme=auto — no custom color params
-      params.set('theme', 'auto');
+    if (skipsCustomColors) {
+      // Virtual themes always emit theme=<name> and skip custom color params.
+      params.set('theme', theme);
     } else {
       const hasCustomColors = bgHex || accentHex || textHex;
 
@@ -72,7 +74,7 @@ export default function CustomizePage(): ReactElement {
     hasUsername,
     trimmedUsername,
     theme,
-    isAutoTheme,
+    skipsCustomColors,
     bgHex,
     accentHex,
     textHex,
@@ -260,7 +262,9 @@ export default function CustomizePage(): ReactElement {
 
               <p className="mt-3 text-[11px] text-white/20 text-center">
                 {hasUsername
-                  ? 'Preview updates on every change. Hosted badge is cached at UTC midnight'
+                  ? isRandomTheme
+                    ? 'Random theme changes on every page load and disables caching'
+                    : 'Preview updates on every change. Hosted badge is cached at UTC midnight'
                   : 'Add a username to enable live preview and export snippets'}
               </p>
             </div>

app/customize/types.ts

@@ -6,10 +6,11 @@ export type ExportFormat = 'markdown' | 'html';
 
 export type ThemeKey = Extract<keyof typeof themes, string>;
 
-// 'auto' is a virtual theme that uses CSS prefers-color-scheme to
-// switch between light and dark at runtime — it has no entry in the
-// themes record, so we prepend it manually.
-export const THEME_KEYS: (ThemeKey | 'auto')[] = ['auto', ...(Object.keys(themes) as ThemeKey[])];
+export type ThemeOption = ThemeKey | 'auto' | 'random';
+
+// 'auto' and 'random' are virtual themes with no entries in the
+// themes record, so they are added around the concrete presets.
+export const THEME_KEYS: ThemeOption[] = ['auto', ...(Object.keys(themes) as ThemeKey[]), 'random'];
 
 export const SPEEDS = [
   { value: '4s', label: 'Fast  (4s)' },