Skip to main content

How to Customize the UI

The UI of react-persian-form is designed to be flexible and easily customizable. You can tailor the look and feel to match your application's design system using two primary methods: overriding CSS custom properties (variables) or targeting specific CSS class names.

1. Using CSS Custom Properties​

The simplest way to theme the components is by overriding the root CSS variables. These variables control the core colors for backgrounds, text, and accents.

You can redefine these variables in your global stylesheet (e.g., globals.css or index.css).

Default Light Theme Variables

:root {
  color-scheme: light;

  --react-persian-form-background-primary: 245, 245, 245;
  --react-persian-form-background-secondary: 255, 255, 255;

  --react-persian-form-prose-primary: 12, 14, 16;
  --react-persian-form-prose-hint: 154, 166, 177;

  --react-persian-form-color-primary: 62, 136, 193;
  --react-persian-form-color-danger: 197, 50, 17;
}

Example: Overriding Variables​

To change the brand and danger colors, simply add this to your CSS file:

:root {
  --react-persian-form-color-primary: 80, 150, 100 !important; /* A new green brand color */
  --react-persian-form-color-danger: 220, 40, 40 !important;   /* A brighter red for errors */
}

2. Using CSS Class Names​

For more specific, granular control, you can target the class names applied to the form fields.

Core Class Names​

  • .react-persian-form__label: The base class applied to label.

  • .react-persian-form__form-control: The base class applied to all field.

  • .react-persian-form__form-control--secondary: A modifier class for secondary style fields.

  • .react-persian-form__form-control--error: A modifier class applied when a field has a validation error.

  • .react-persian-form__error-message: The base class applied to error messages.

  • .react-persian-form__helper-message: The base class applied to helper message.

Example: Adding a Custom Border​

/* Add a thicker, solid border to all fields */
.react-persian-form__form-control {
  border: 2px solid #cccccc;
}

/* Change the border color to red on error */
.react-persian-form__form-control--error {
  border-color: #ff0000;
  box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}

3. Enabling Dark Mode​

The library has built-in support for a dark theme. To activate it, add the class dark to the <html> element of your document.

<html lang="fa" dir="rtl" class="dark">
  ...
</html>

When dark mode is enabled, the default CSS variables are automatically updated to a dark color palette. You can, of course, override the dark mode variables just like you would for the light theme.

Example: Customizing Dark Mode​

html.dark {
  --react-persian-form-color-primary: 100, 180, 250; /* A lighter color for dark mode */
}