# Fluent Forms Theme With SCSS Variables

> Styles Fluent Forms from a few SCSS variables for accent color, radius, spacing and errors, including checkboxes, buttons and a dark-mode variant.

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

## Code

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

.fluentform {
    .ff-el-group {
        margin-bottom: $gap;
    }

    .ff-el-form-control {
        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);
        }
    }

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

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

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

    .ff-el-is-error .ff-el-form-control {
        border-color: $error;
    }

    .text-danger {
        color: $error;
    }

    @media (prefers-color-scheme: dark) {
        .ff-el-form-control {
            background: #111827;
            color: #f9fafb;
            border-color: #374151;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .ff-el-form-control {
            transition: none;
        }
    }
}
```

## Notes

Edit the variables at the top; works well together with turning off the default Fluent Forms styles.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Fluent Forms 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/