Claude Code से dark mode लागू करने की गाइड

पहले product risk समझें

Claude Code से dark mode लागू करने की गाइड का मतलब सिर्फ सुंदर screen बनाना नहीं है। असली लक्ष्य है कि interface बेहतर हो, लेकिन conversion, readability, accessibility और mobile layout न टूटे। Production में empty state, loading, error, keyboard focus, long text, ad slot, code block और CTA की position बहुत मायने रखती है।

साथ में claude code design system, claude code accessibility, claude code code review भी पढ़ें। Official references: Claude Code docs, MDN prefers-color-scheme, MDN color-scheme, WCAG contrast. Claude Code को prompt देते समय goal, boundary, use case, pitfall और verification साफ लिखें।

सुझाया गया prompt

इस सुधार को सबसे छोटे safe change से implement करें।
Existing components, design tokens और routes को respect करें।
use case, pitfall, accessibility, mobile view और failure states जांचें।
Copy-paste-ready code और review checklist दें।

Use case checklist

1. Landing page या article page जहां reader को next step साफ दिखना चाहिए।
2. SaaS dashboard जहां loading, empty data, error और success state समझ आने चाहिए।
3. Checkout, signup और consultation flow जहां main CTA छिपना नहीं चाहिए।
4. Team review जहां Claude Code code के साथ verification points भी देता है।

Implementation code

:root {
  color-scheme: light;
  --color-page: #ffffff;
  --color-surface: #f8fafc;
  --color-text: #0f172a;
  --color-muted: #475569;
  --color-border: #dbe3ef;
  --color-link: #2563eb;
  --color-focus: #f59e0b;
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-page: #0b1120;
  --color-surface: #111827;
  --color-text: #f8fafc;
  --color-muted: #cbd5e1;
  --color-border: #334155;
  --color-link: #93c5fd;
  --color-focus: #fbbf24;
}

body {
  background: var(--color-page);
  color: var(--color-text);
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

const storageKey = "theme";
const root = document.documentElement;
const stored = localStorage.getItem(storageKey);
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
const theme = stored === "light" || stored === "dark" ? stored : prefersDark ? "dark" : "light";

root.dataset.theme = theme;

type Theme = "light" | "dark" | "system";

export function ThemeToggle({ value, onChange }: { value: Theme; onChange: (theme: Theme) => void }) {
  return (
    <fieldset aria-label="Theme">
      {(["light", "dark", "system"] as const).map((theme) => (
        <button
          key={theme}
          type="button"
          aria-pressed={value === theme}
          onClick={() => onChange(theme)}
        >
          {theme}
        </button>
      ))}
    </fieldset>
  );
}

Pitfall checklist

• केवल screenshot के लिए optimize करने से real user flow खराब हो सकता है।
• केवल color या motion से meaning देने पर accessibility कम होती है।
• 375px mobile width न जांचने से horizontal scroll आ सकता है।
• Empty data, long labels, slow network और reload को ignore करने से production bug आता है।
• Unrelated files बदलने से review कठिन हो जाता है।

Verification

Implementation के बाद Claude Code से अलग review pass मांगें। बदली हुई files, risks, browser checks और manual checks अलग-अलग लिखवाएं। फिर mobile width पर overflow, code block scroll, CTA visibility और focus style देखें।

Monetization angle

यह काम ads, product cards, consultation links, pricing tables और lead forms से जुड़ता है। Real repository में लागू करना हो तो Claude Code training और consultation से repeatable workflow बनाया जा सकता है।

Practical test note

मैंने इसे implementation, review और mobile check में बांटकर test किया। बड़ा redesign prompt देने की तुलना में diff छोटा रहा और layout/accessibility issues deployment से पहले दिख गए।

Extra review notes

• Before/after screenshots compare करें और CTA, ads, text, forms और code blocks देखें।
• Claude Code से पूछें कि क्या हटाया जा सकता है, कौन से names project से match नहीं करते, और कौन सी assumptions risky हैं।
• Deploy से पहले mobile, desktop, keyboard, slow network, empty data और reload behavior test करें।

Extra review notes

• Before/after screenshots compare करें और CTA, ads, text, forms और code blocks देखें।
• Claude Code से पूछें कि क्या हटाया जा सकता है, कौन से names project से match नहीं करते, और कौन सी assumptions risky हैं।
• Deploy से पहले mobile, desktop, keyboard, slow network, empty data और reload behavior test करें।