Why does my dark input flash white on autofill?

Browser autofill paints its own background. color-scheme: light dark tells it which palette to use. That single declaration fixes most of it.

A form that respects prefers-color-scheme

Dark mode guides love hero sections and forget forms, which is how you get a dark page with a blinding white input glued in the middle. Form controls need their colors set explicitly in both schemes, plus color-scheme so native pieces like the caret and autofill match. This is the complete pattern with custom properties.

Copy-paste HTML

index.html

<style>
  :root {
    color-scheme: light dark;
    --form-bg: #ffffff;
    --form-text: #1a1a1a;
    --form-border: #d0d0d0;
    --form-input-bg: #ffffff;
    --form-accent: #4f46e5;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --form-bg: #161616;
      --form-text: #f0f0f0;
      --form-border: #3a3a3a;
      --form-input-bg: #1f1f1f;
      --form-accent: #818cf8;
    }
  }

  .dm-form {
    background: var(--form-bg);
    color: var(--form-text);
    max-width: 28rem;
    padding: 1.5rem;
    border: 1px solid var(--form-border);
    border-radius: 12px;
    font: inherit;
  }
  .dm-form label { display: block; margin: 1rem 0 0.35rem; font-size: 0.9rem; }
  .dm-form input,
  .dm-form textarea {
    width: 100%;
    box-sizing: border-box;
    background: var(--form-input-bg);
    color: var(--form-text);
    border: 1px solid var(--form-border);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    font: inherit;
  }
  .dm-form input:focus-visible,
  .dm-form textarea:focus-visible {
    outline: 2px solid var(--form-accent);
    outline-offset: 1px;
  }
  .dm-form button {
    margin-top: 1.25rem;
    background: var(--form-accent);
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 0.65rem 1.25rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
  }
</style>

<form class="dm-form" action="https://send.webforms.to/wft_your_key" method="POST">
  <label for="dm-name">Name</label>
  <input id="dm-name" name="name" type="text" required>

  <label for="dm-email">Email</label>
  <input id="dm-email" name="email" type="email" required>

  <label for="dm-message">Message</label>
  <textarea id="dm-message" name="message" rows="4" required></textarea>

  <button type="submit">Send</button>
</form>

Replace https://send.webforms.to/wft_your_key with your own endpoint from the WebForms dashboard.

Why these fields

color-scheme: light dark is the line most guides miss. It tells the browser to render native UI (caret, scrollbars, autofill backgrounds, date pickers) in the active scheme. Without it, dark inputs get a white autofill flash.
Every color lives in a custom property, so supporting a manual toggle later means flipping one class that redefines the variables. The form CSS itself never changes.
The dark accent is lighter than the light accent (818cf8 vs 4f46e5): dark backgrounds need brighter accents to hold the same contrast ratio, not the same hex.
focus-visible instead of focus keeps the ring for keyboard users without flashing it on every mouse click.

Where to send it

EmailThe form adapts to the visitor's scheme; the notification just arrives either way.

Get your endpoint

Free for 300 submissions a month. No card required.

Start free

Dark mode contact form FAQ

Start with prefers-color-scheme: it's zero UI and respects the visitor's OS setting. Add a toggle only if your audience asks; with the custom-property structure here, the toggle is one class swap.

Tailwind CSS contact form Contact form