Style
Configuring Vueform Builder style.
Changing Brand Color
To change the primary brand color, first update your tailwind.config.js file as follows:
js
// tailwind.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
// ...
theme: {
extend: {
colors: {
primary: {
500: 'purple', // primary color
600: 'rgb(105 0 105)' // slightly darker primary color
}
}
}
}
})Next, override the relevant CSS variables:
scss
.vfb-builder {
*, &:before, &:after, &:root {
--vf-primary: purple;
--vf-ring-color: rgb(128 0 128 / 20%); // semi-transparent purple
}
}Now your builder should display purple as the primary brand color.
Changing Other Colors
Here are additional colors that can be customized in tailwind.config.js:
js
// tailwind.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
// ...
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
You can further customize Vueform Builder by manipulating its CSS classes.
Alternatively, you can copy the Builder's scss files to your project, modify them, and use them instead of index.css in your builder.config.js:
js
// builder.config.js
import './path/to/index.scss';
// ...The Builder's scss files can be found at @vueform/builder/scss/.
