Style

Configuring Vueform Builder style.

Changing Brand Color

To change the primary brand color, first we have to update our tailwind.config.js file:

js
// tailwind.config.js

export default {
  // ...
  theme: {
    extend: {
      colors: {
        primary: {
          500: 'purple', // primary
          600: 'rgb(105 0 105)' // slightly darker primary
        }
      }
    }
  }
}

Then we need to override some CSS variables:

scss
.vfb-builder {
  *, &:before, &:after, &:root {
    --vf-primary: purple;
    --vf-ring-color: rgb(128 0 128 / 20%); // semi-transparent purple
  }
}

After this our builder should have purple as a primary brand color.

Changing Other Colors

Here are some of the other colors that can be changed in tailwind.config.js:

js
// tailwind.config.js

export default {
  // ...
  theme: {
    extend: {
      colors: {
        // Gray colors - light mode
        gray: {
          50: '#fafbfc',
          75: '#F5F8FB',
          100: '#f1f5f9',
          150: '#ECF0F4',
          200: '#e2e8f0',
          300: '#cbd5e1',
          400: '#94a3b8',
          500: '#64748b',
          600: '#475569',
          700: '#334155',
          800: '#1e293b',
          850: '#17202B',
          900: '#0f172a',
        },

        // Gray colors - dark mode
        dark: {
          50: '#EFEFEF',
          100: '#DCDCDC',
          200: '#BDBDBD',
          300: '#A0A0A0',
          400: '#848484',
          500: '#737373',
          550: '#555555',
          600: '#393939',
          700: '#323232',
          750: '#292929',
          800: '#262626',
          900: '#191919',
          1000: '#121212',
        },

        // Repeater color
        repeater: {
          500: '#00D0FF'
        },

        // Export code colors
        code: {
          'base': '#f8f8f2',
          'comment': '#6272a4',
          'purple': '#7c3aed',
          'light-purple': '#bd93f9',
          'violet': '#2852d4',
          'light-violet': '#99b2ff',
          'blue': '#21d8ff',
          'teal': '#46ffe2',
          'green': '#50fa7b',
          'yellow': '#f1fa8c',
          'orange': '#ffb86c',
          'red': '#BE3030',
        }
      }
    }
  }
}

Further Customization

Further customizations can be done by either directly manipulating the Builder's CSS classes.

Alternatively we might copy the Builder's scss file to our project, modify them and use them instead of index.css in our builder.config.js:

js
// builder.config.js

import './path/to/index.scss';

// ...

The Builder's scss files can be found at @vueform/builder/scss/.

👋 Hire Vueform team for form customizations and developmentLearn more