WholesaleX provides preset color themes and individual color controls for the Registration and Login forms.
The colors for the two forms can be customized separately.
Open the Color Settings
From the Registration Form Builder:
- Open the Styling tab.
- Scroll to Color Theme.
- Select a preset theme.
- Click Customize.
[Insert Color Theme section image here]
The Theme Customization panel will open below the selected theme.
Choose Which Form to Customize
Use the tabs at the top of Theme Customization:
- Signup controls the Registration form.
- Login controls the Login form.
[Insert Signup color customization image here]
[Insert Login color customization image here]
Changes made under Signup do not automatically replace the Login form colors. Configure both tabs when you want the forms to use different designs.
Available Color Controls
Primary Color
Controls the main accent color used for prominent form elements.
This may include active controls, buttons, highlights, or other primary interface elements.
Text Primary
Controls the color of the main text, such as headings, labels, and important content.
Text Secondary
Controls supporting text, descriptions, and less prominent information.
Choose a color that remains readable but is visually lighter than the primary text.
Background
Controls the main background color of the selected form.
For example, you can give the Login form a colored background while keeping the Registration form white.
Border Color
Controls the borders around form fields and other outlined elements.
Use enough contrast to keep field boundaries visible.
Input Background
Controls the background color inside the form fields.
Keep the input text readable against the selected background.
Button Text
Controls the text color used inside the Login or Register button.
Check the contrast between the button text and its background color.
Link
Controls the color of clickable text and links within the form.
Use a color that is easy to distinguish from normal text.
Container Color
Controls the color of the surrounding form container.
This can be used to separate the form from the page background or create a card-style layout.
Reset the Custom Colors
Click Reset to restore the color settings to their default or selected-theme values.
Use the X icon to close the Theme Customization panel without keeping it expanded.
Example: Separate Login and Registration Colors
You could configure the forms as follows:
Signup Form
- Light background
- Dark primary text
- Neutral input fields
- Dark Register button
- Colored links
Login Form
- Colored background
- Light text
- Matching colored inputs
- Light Login button
- Brighter links
This creates a clear visual distinction while keeping both forms part of the same design system.
Save and Check Contrast
Click Save Changes after customizing the colors.
Preview both forms and confirm that:
- Labels remain readable.
- Input borders are visible.
- Button text has enough contrast.
- Links are easy to identify.
- The Signup and Login colors are applied to the correct forms.