Style
Configuring Vueform Builder style.
Changing Brand Color
Vueform theme
To change the primary color, override the following CSS variables with RGB values without commas after the builder's CSS is imported:
.vfb-builder {
*, &:before, &:after, &:root {
--vfb-primary-500: 128 0 128; // main primary color
--vfb-primary-600: 105 0 105;
--vfb-primary-700: 82 0 82;
}
}Tailwind theme
To change the primary brand color, first update your tailwind.config.js file as follows:
// 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:
.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
Vueform theme
In vueform theme additional colors can be changed by overriding CSS class properties directly.
Tailwind theme
Here are additional colors that can be customized in tailwind.config.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
Vueform theme
In vueform theme, further customizations can be done by overriding CSS class properties directly.
Tailwind theme
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:
// builder.config.js
import './path/to/index.scss';
// ...The Builder's scss files can be found at @vueform/builder/scss/.
