Tailwind CSS

Lesson 06

Dark mode variants

Keep dark mode styles paired with the base style so both themes are reviewable in the same component.

Good Code

CodeReviewCard.tsx
export function CodeReviewCard({ title, summary }: CodeReviewCardProps) {
  return (
    <article className="rounded-md border border-slate-200 bg-white p-4 text-slate-800 shadow-sm dark:border-slate-800 dark:bg-slate-950 dark:text-slate-100">
      <h2 className="text-base font-semibold text-slate-950 dark:text-white">{title}</h2>
      <p className="mt-2 text-sm text-slate-600 dark:text-slate-300">{summary}</p>
      <a href="#" className="mt-4 inline-flex text-sm font-medium text-sky-700 hover:text-sky-600 dark:text-sky-300 dark:hover:text-sky-200">
        Review lesson
      </a>
    </article>
  );
}

Bad Code

CodeReviewCard.tsx
export function CodeReviewCard({ title, summary }) {
  return (
    <article className="rounded-md border border-slate-200 bg-white p-4 text-slate-800 shadow-sm">
      <h2 className="text-base font-semibold dark:text-white">{title}</h2>
      <p className="mt-2 text-sm text-slate-600">{summary}</p>
      <a href="#" className="mt-4 inline-flex text-sm font-medium text-sky-700">
        Review lesson
      </a>
    </article>
  );
}

Review Notes

What to review

Good Code

The good version pairs light and dark values for the surface, border, text hierarchy, and link state.

Bad Code

The bad version changes only the heading in dark mode. The card can still have a bright surface and low-contrast body text when the rest of the page is dark.

Takeaways

  • Dark mode should cover background, text, border, and state colors, not only the most visible foreground color.