Dark Mode Form Template

Integrate your forms perfectly into a dark theme with this sleek and high-contrast design.

Designed for modern applications and websites with dark mode, this template uses a carefully selected color palette for excellent readability and a sophisticated look.

Screenshot of a stylish form with a dark background, light text, and accented input fields.

Get Source Code → Preview →

About this Dark Mode Form

A well-executed dark mode form is more than just inverted colors. It's also about creating a comfortable viewing experience in low-light environments. This template uses a dark gray background (#1e1e1e) instead of pure black to reduce eye strain. The text is a light gray for high-contrast readability. The input fields have a slightly lighter background than the main container, making them easy to identify, and a bright blue accent color is used for the focus state to provide clear feedback to the user.

Features

High-Contrast Design: The color palette is optimized for readability on dark backgrounds.
Sleek, Modern Aesthetic: A clean and professional look perfect for modern web applications.
Clear Focus States: A bright accent color clearly indicates which field is currently active.
Accessible: Proper use of label elements and input types ensures the form is fully accessible.

Ideal Use Cases

Login, registration, or contact forms on a website with a dark theme toggle.
Forms within developer tools, admin panels, or financial dashboards.
Any UI where a sophisticated, dark aesthetic is desired.

Dependencies

None. This template uses only pure HTML and CSS.

Code

Here's the full code for the dark mode form template:

<div class="dark-form-background">
    <div class="dark-form-container">
        <h2>Request a Demo</h2>
        <form action="#" method="post">
            <div class="form-group">
                <label for="dark-name">Full Name</label>
                <input type="text" id="dark-name" name="name" placeholder="Hazel Nutt" required>
            </div>
             <div class="form-group">
                <label for="dark-company">Company Name</label>
                <input type="text" id="dark-company" name="company" placeholder="Pita Pan" required>
            </div>
            <div class="form-group">
                <label for="dark-email">Work Email</label>
                <input type="email" id="dark-email" name="email" placeholder="hazel.nutt@pitapan.com" required>
            </div>
            <button type="submit" class="submit-btn">Submit Request</button>
        </form>
    </div>
</div>

View Output