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