# WPForms Theme With SCSS Variables

> Styles WPForms from a few SCSS variables (accent, radius, spacing, error color), including choices, buttons, errors and a dark-mode variant.

- Type: SCSS
- Runs: Site-wide header
- Category: [Forms](https://wpide.com/library/category/forms/)
- Tags: wpforms, scss, styling
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/wpforms-form-theme-scss/

## Code

```scss
$accent: #ea580c;
$radius: 10px;
$border: #d6d3d1;
$error: #dc2626;
$gap: 1.2rem;

.wpforms-container {
    .wpforms-field {
        padding: 0 0 $gap;

        input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
        select,
        textarea {
            width: 100%;
            max-width: 100%;
            padding: 0.75em 1em;
            border: 1px solid $border;
            border-radius: $radius;
            font-size: max(16px, 1em);
            transition: border-color 0.15s, box-shadow 0.15s;

            &:focus {
                outline: none;
                border-color: $accent;
                box-shadow: 0 0 0 3px rgba($accent, 0.2);
            }

            &.wpforms-error {
                border-color: $error;
            }
        }

        input[type="checkbox"],
        input[type="radio"] {
            accent-color: $accent;
        }
    }

    .wpforms-submit {
        padding: 0.8em 1.8em;
        border: 0;
        border-radius: $radius;
        background: $accent;
        color: #fff;
        font-weight: 600;
        cursor: pointer;

        &:hover {
            background: darken($accent, 8%);
        }
    }

    label.wpforms-error {
        color: $error;
    }

    @media (prefers-color-scheme: dark) {
        .wpforms-field input:not([type="checkbox"]):not([type="radio"]),
        .wpforms-field select,
        .wpforms-field textarea {
            background: #1c1917;
            color: #f5f5f4;
            border-color: #44403c;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .wpforms-field input,
        .wpforms-field select,
        .wpforms-field textarea {
            transition: none;
        }
    }
}
```

## Notes

Edit the variables at the top; works best with WPForms set to "Base styling only".

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "WPForms Theme With SCSS Variables" in its snippet library and add it in one click; or create a new SCSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/