Dark mode

Usage & approach

The documentation toggle sets the dark class on the html element and stores your preference locally. First visit follows the system preference. Tailwind 4 requires @custom-variant dark (&:where(.dark, .dark *)); after the Tailwind import for this class-based approach. Copying dark: utilities alone does not configure your host app.

Specifications

Canvas

bg-[#fcfdfb] dark:bg-[#1c1e1e]

Surface

bg-white dark:bg-[#262828]; raised surfaces: dark:bg-[#303232]

Primary text

text-[#183d2c] dark:text-[#f4f5f2]

Supporting text

text-[#333] dark:text-[#c4c7c5]; metadata: dark:text-[#b2b7b4]

Primary action

dark:bg-[#006838] dark:text-white dark:hover:bg-[#00552e]

Borders and focus

dark:border-[#3d4140]; controls: dark:border-[#565c58]; dark:focus-visible:outline-[#006838]

Theme-aware panel

Insurance green (#006838) and white button labels stay consistent across both themes. The canvas and surfaces adapt to dark mode.

<section class="rounded-lg border border-[#dfe7df] bg-white p-6 dark:border-[#3d4140] dark:bg-[#262828]">
  <h3 class="text-lg font-semibold text-[#183d2c] dark:text-[#f4f5f2]">Coverage preferences</h3>
  <p class="mt-2 text-base leading-7 text-[#333] dark:text-[#c4c7c5]">Surfaces and supporting text change together in dark mode.</p>
  <button type="button" class="mt-5 inline-flex min-h-11 items-center justify-center rounded-md bg-[#006838] px-5 py-2.5 text-sm font-semibold text-white hover:bg-[#00552e] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#006838] dark:bg-[#006838] dark:text-white dark:hover:bg-[#00552e] dark:focus-visible:outline-[#006838] disabled:cursor-not-allowed disabled:opacity-50">Save preferences</button>
</section>