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
import { defineConfig } from '@vueform/builder'
export default defineConfig({
// ...
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
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
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/.
