Form Builder custom theming.

[sreehari-aot]

How to customize Form.io form builder theme to match the parent application.

[AbijithS-aot]

How to customize Form.io form builder theme to match the parent application.

As of now formio provides some custom css frameworks where you can change your form builder theme.
https://docs.form.io/developers/css-frameworks
you can read the above documentation and try it in your application.

Other than that we have done a poc by modifying one of the css framework and added our own custom css.
https://github.com/arun-s-aot/forms-flow-formio-theming
you can try this by following steps :

Step 1

• install npm package for formio theming

  npm i forms-flow-formio-theme
  

Step 2

• import formsflowFormioTheme from the package.

   import formsflowFormioTheme from 'forms-flow-formio-theme'
  

Step 3

• Use our custom theming in formio

    Formio.use(formsflowFormioTheme)
  

Step 4

• Add following css link where we defined our custom css classes

    <link rel="stylesheet" href="https://forms-flow-ai-stylesheet.pages.dev/formsflow.min.css">     
  
    <link rel="stylesheet" href="https://forms-flow-ai-stylesheet.pages.dev/formsflow-theme.min.css">    
  
    <link rel="stylesheet" href="https://forms-flow-ai-stylesheet.pages.dev/formsflow-custom.css">