Styles

Flux allows you to seamlessly integrate forms into your website's design. We offer two distinct styling strategies: Default (a modern, ready-to-use theme) and Naked (unstyled HTML for complete control).

1. Default Styling (Zinc Theme)

By default, all Flux forms are served with a clean, professional CSS theme inspired by shadcn/ui. It uses a neutral "Zinc" color palette that looks good on almost any background.

The theme relies on CSS Variables scoped to the form wrapper. This makes it incredibly easy to adapt the form to your brand colors (changing the black/white default to Blue, Green, or Purple) without fighting against complex CSS selectors.

Customizing with CSS Variables

You can override the look and feel by defining specific variables in your website's main stylesheet.

Best Practice: Target the .flux-form class to ensure your overrides take precedence over the defaults.

Example: Changing to a Brand Blue Theme

/* Add this to your static site's CSS file */
.flux-form {
    /* Change primary action color to Blue */
    --flux-primary: #2563eb;       /* blue-600 */
    --flux-primary-fg: #ffffff;    /* white */
    
    /* Change focus ring color (accessibility outline) */
    --flux-ring: #3b82f6;          /* blue-500 */
    
    /* Make corners sharper (default is 0.5rem) */
    --flux-radius: 2px;
    
    /* Match your site's font stack */
    --flux-font: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

Variable Reference

Here are the variables you can override:

2. Naked Mode (No Styles)

If you have a strict design system (e.g., you are using Tailwind CSS, Bootstrap, or a custom SASS framework), you might prefer to handle all styling yourself.

In Naked Mode, Flux serves the HTML structure without any <style> tags or default CSS classes.

How to Enable

Simply append ?style=naked to the URL in your HTMX embed code.

<div id="flux-form-wrapper"
     hx-get="[https://flux.example.com/form/contact-us?style=naked](https://flux.example.com/form/contact-us?style=naked)"
     hx-trigger="load"
     hx-swap="innerHTML">
</div>

Targeting Classes

Even in naked mode, Flux keeps semantic class names on elements so you can target them easily in your CSS.

• .flux-form: The main <form> wrapper.
• .flux-field: The <div> container wrapping a label and its input.
• .flux-label: The <label> element.
• .flux-input: Standard text, email, and number inputs.
• .flux-textarea: Textarea inputs.
• .flux-checkbox: Checkbox inputs.
• .flux-btn: The submit button.
• .flux-error-text: The validation error message (usually appears below inputs).

Example: Custom Styling (Plain CSS)

/* Your custom site CSS */
.flux-input {
    width: 100%;
    padding: 12px;
    border: 2px solid black;
    background: #f0f0f0;
    transition: background 0.2s;
}

.flux-input:focus {
    background: #ffffff;
    border-color: purple;
}

.flux-btn {
    width: 100%;
    background-color: purple;
    color: white;
    font-weight: bold;
    padding: 1rem;
    border-radius: 8px;
    cursor: pointer;
}