Customizing Theme Panel
Learn how to customize the Theme panel.
Disabling Config Fields
The following options can be used to disable theme config fields:
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
'theme': {
'props': {
'theme': {
'theme': true
},
'tools': {
'tools': true
},
'colors': {
'primary': true,
'primary-darker': true,
'color-on-primary': true,
'danger': true,
'danger-lighter': true,
'success': true,
'success-lighter': true,
'gray-50': true,
'gray-100': true,
'gray-200': true,
'gray-300': true,
'gray-400': true,
'gray-500': true,
'gray-600': true,
'gray-700': true,
'gray-800': true,
'gray-900': true,
'dark-50': true,
'dark-100': true,
'dark-200': true,
'dark-300': true,
'dark-400': true,
'dark-500': true,
'dark-600': true,
'dark-700': true,
'dark-800': true,
'dark-900': true
},
'fonts': {
'font-size': true,
'line-height': true,
'letter-spacing': true,
'font-size-small': true,
'line-height-small': true,
'letter-spacing-small': true,
'font-size-h1': true,
'font-size-h1-mobile': true,
'font-size-h2': true,
'font-size-h2-mobile': true,
'font-size-h3': true,
'font-size-h3-mobile': true,
'font-size-h4': true,
'font-size-h4-mobile': true,
'line-height-headings': true,
'letter-spacing-headings': true,
'font-size-blockquote': true,
'line-height-blockquote': true,
'letter-spacing-blockquote': true
},
'spaces': {
'gutter': true,
'link-color': true,
'link-decoration': true,
'color-muted': true,
'color-passive': true,
'bg-passive': true,
'border-color-passive': true,
'bg-selected': true,
'radius-small': true,
'shadow-handles': true,
'shadow-handles-hover': true,
'shadow-handles-focus': true
},
'inputs': {
'min-height-input': true,
'ring-width': true,
'ring-color': true,
'py-input': true,
'px-input': true,
'border-width-input': true,
'radius-input': true,
'radius-large': true,
'border-color-input': true,
'color-input': true,
'bg-icon': true,
'color-floating': true,
'bg-input': true,
'shadow-input': true,
'hover': true,
'color-input-hover': true,
'bg-input-hover': true,
'border-color-input-hover': true,
'shadow-input-hover': true,
'focus': true,
'color-input-focus': true,
'color-floating-focus': true,
'bg-input-focus': true,
'border-color-input-focus': true,
'shadow-input-focus': true,
'danger': true,
'color-input-danger': true,
'color-floating-danger': true,
'bg-input-danger': true,
'border-color-input-danger': true,
'success': true,
'color-input-success': true,
'color-floating-success': true,
'bg-input-success': true,
'border-color-input-success': true,
'disabled': true,
'color-disabled': true,
'bg-disabled': true,
'floating-top': true,
'space-addon': true,
'bg-addon': true,
'color-addon': true
},
'select': {
'dropdown': true,
'border-width-dropdown': true,
'shadow-dropdown': true
},
'tags': {
'py-tag': true,
'px-tag': true,
'space-tags': true,
'border-width-tag': true,
'radius-tag': true,
'color-tag': true,
'bg-tag': true,
'border-color-tag': true
},
'signature': {
'border-color-signature-hr': true
},
'datepicker': {
'color-date-head': true,
'bg-date-head': true
},
'checkboxes': {
'checkbox-size': true,
'space-checkbox': true,
'radio': true,
'border-width-radio': true,
'checkbox': true,
'border-width-checkbox': true,
'radius-checkbox': true,
'tabs': true,
'py-group-tabs': true,
'px-group-tabs': true,
'blocks': true,
'py-group-blocks': true,
'px-group-blocks': true,
'colors': true,
'bg-checkbox': true,
'border-color-checkbox': true,
'hover': true,
'bg-checkbox-hover': true,
'border-color-checkbox-hover': true,
'focus': true,
'bg-checkbox-focus': true,
'border-color-checkbox-focus': true,
'danger': true,
'bg-checkbox-danger': true,
'border-color-checkbox-danger': true,
'success': true,
'bg-checkbox-success': true,
'border-color-checkbox-success': true,
'checked': true,
'border-color-checked': true
},
'slider': {
'slider-height': true,
'slider-height-vertical': true,
'radius-slider': true,
'handle': true,
'slider-handle-size': true,
'bg-slider-handle': true,
'tooltip': true,
'py-slider-tooltip': true,
'px-slider-tooltip': true,
'slider-tooltip-distance': true,
'slider-tooltip-arrow-size': true,
'border-color-slider-tooltip': true
},
'toggle': {
'toggle-width': true,
'toggle-height': true,
'border-width-toggle': true,
'handle': true,
'bg-toggle-handle': true
},
'images': {
'image': true,
'radius-image': true,
'gallery': true,
'gallery-size': true,
'radius-gallery': true
},
'buttons': {
'py-btn': true,
'px-btn': true,
'small-buttons': true,
'py-btn-small': true,
'px-btn-small': true,
'border-color-btn': true,
'border-width-btn': true,
'radius-btn': true,
'color-btn': true,
'bg-btn': true,
'shadow-btn': true,
'secondary': true,
'color-btn-secondary': true,
'bg-btn-secondary': true,
'border-color-btn-secondary': true,
'danger': true,
'color-btn-danger': true,
'bg-btn-danger': true,
'border-color-btn-danger': true
},
'static': {
'spacing': true,
'space-static-tag-1': true,
'space-static-tag-2': true,
'space-static-tag-3': true,
'divider': true,
'py-hr': true,
'border-color-hr': true,
'quote': true,
'py-blockquote': true,
'px-blockquote': true,
'border-width-blockquote': true,
'border-color-blockquote': true
}
}
},
})Available Themes
The available themes can be configured with the themes property in builder.config.js:
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
themes: [
{
label: 'official_themes',
themes: [
{
label: 'Vueform',
default: true,
vars: {
primary: '#07bf9b',
'primary-darker': '#06ac8b',
'color-on-primary': '#ffffff',
danger: '#ef4444',
'danger-lighter': '#fee2e2',
success: '#10b981',
'success-lighter': '#d1fae5',
'gray-50': '#f9fafb',
'gray-100': '#f3f4f6',
'gray-200': '#e5e7eb',
'gray-300': '#d1d5db',
'gray-400': '#9ca3af',
'gray-500': '#6b7280',
'gray-600': '#4b5563',
'gray-700': '#374151',
'gray-800': '#1f2937',
'gray-900': '#111827',
'dark-50': '#EFEFEF',
'dark-100': '#DCDCDC',
'dark-200': '#BDBDBD',
'dark-300': '#A0A0A0',
'dark-400': '#848484',
'dark-500': '#737373',
'dark-600': '#393939',
'dark-700': '#323232',
'dark-800': '#262626',
'dark-900': '#191919',
'ring-width': '2px',
'ring-color': '#07bf9b66',
'link-color': 'var(--vf-primary)',
'link-decoration': 'inherit',
'font-size': '1rem',
'font-size-sm': '0.875rem',
'font-size-lg': '1rem',
'font-size-small': '0.875rem',
'font-size-small-sm': '0.8125rem',
'font-size-small-lg': '0.875rem',
'font-size-h1': '2.125rem',
'font-size-h1-sm': '2.125rem',
'font-size-h1-lg': '2.125rem',
'font-size-h2': '1.875rem',
'font-size-h2-sm': '1.875rem',
'font-size-h2-lg': '1.875rem',
'font-size-h3': '1.5rem',
'font-size-h3-sm': '1.5rem',
'font-size-h3-lg': '1.5rem',
'font-size-h4': '1.25rem',
'font-size-h4-sm': '1.25rem',
'font-size-h4-lg': '1.25rem',
'font-size-h1-mobile': '1.5rem',
'font-size-h1-mobile-sm': '1.5rem',
'font-size-h1-mobile-lg': '1.5rem',
'font-size-h2-mobile': '1.25rem',
'font-size-h2-mobile-sm': '1.25rem',
'font-size-h2-mobile-lg': '1.25rem',
'font-size-h3-mobile': '1.125rem',
'font-size-h3-mobile-sm': '1.125rem',
'font-size-h3-mobile-lg': '1.125rem',
'font-size-h4-mobile': '1rem',
'font-size-h4-mobile-sm': '1rem',
'font-size-h4-mobile-lg': '1rem',
'font-size-blockquote': '1rem',
'font-size-blockquote-sm': '0.875rem',
'font-size-blockquote-lg': '1rem',
'line-height': '1.5rem',
'line-height-sm': '1.25rem',
'line-height-lg': '1.5rem',
'line-height-small': '1.25rem',
'line-height-small-sm': '1.125rem',
'line-height-small-lg': '1.25rem',
'line-height-headings': '1.2',
'line-height-headings-sm': '1.2',
'line-height-headings-lg': '1.2',
'line-height-blockquote': '1.5rem',
'line-height-blockquote-sm': '1.25rem',
'line-height-blockquote-lg': '1.5rem',
'letter-spacing': '0px',
'letter-spacing-sm': '0px',
'letter-spacing-lg': '0px',
'letter-spacing-small': '0px',
'letter-spacing-small-sm': '0px',
'letter-spacing-small-lg': '0px',
'letter-spacing-headings': '0px',
'letter-spacing-headings-sm': '0px',
'letter-spacing-headings-lg': '0px',
'letter-spacing-blockquote': '0px',
'letter-spacing-blockquote-sm': '0px',
'letter-spacing-blockquote-lg': '0px',
gutter: '1rem',
'gutter-sm': '0.5rem',
'gutter-lg': '1rem',
'min-height-input': '2.375rem',
'min-height-input-sm': '2.125rem',
'min-height-input-lg': '2.875rem',
'py-input': '0.375rem',
'py-input-sm': '0.375rem',
'py-input-lg': '0.625rem',
'px-input': '0.75rem',
'px-input-sm': '0.5rem',
'px-input-lg': '0.875rem',
'py-btn': '0.375rem',
'py-btn-sm': '0.375rem',
'py-btn-lg': '0.625rem',
'px-btn': '0.875rem',
'px-btn-sm': '0.75rem',
'px-btn-lg': '1.25rem',
'py-btn-small': '0.25rem',
'py-btn-small-sm': '0.25rem',
'py-btn-small-lg': '0.375rem',
'px-btn-small': '0.625rem',
'px-btn-small-sm': '0.625rem',
'px-btn-small-lg': '0.75rem',
'py-group-tabs': '0.375rem',
'py-group-tabs-sm': '0.375rem',
'py-group-tabs-lg': '0.625rem',
'px-group-tabs': '0.75rem',
'px-group-tabs-sm': '0.5rem',
'px-group-tabs-lg': '0.875rem',
'py-group-blocks': '0.75rem',
'py-group-blocks-sm': '0.625rem',
'py-group-blocks-lg': '0.875rem',
'px-group-blocks': '1rem',
'px-group-blocks-sm': '1rem',
'px-group-blocks-lg': '1rem',
'py-tag': '0px',
'py-tag-sm': '0px',
'py-tag-lg': '0px',
'px-tag': '0.4375rem',
'px-tag-sm': '0.4375rem',
'px-tag-lg': '0.4375rem',
'py-slider-tooltip': '0.125rem',
'py-slider-tooltip-sm': '0.0625rem',
'py-slider-tooltip-lg': '0.1875rem',
'px-slider-tooltip': '0.375rem',
'px-slider-tooltip-sm': '0.3125rem',
'px-slider-tooltip-lg': '0.5rem',
'py-blockquote': '0.25rem',
'py-blockquote-sm': '0.25rem',
'py-blockquote-lg': '0.25rem',
'px-blockquote': '0.75rem',
'px-blockquote-sm': '0.75rem',
'px-blockquote-lg': '0.75rem',
'py-hr': '0.25rem',
'space-addon': '0px',
'space-addon-sm': '0px',
'space-addon-lg': '0px',
'space-checkbox': '0.375rem',
'space-checkbox-sm': '0.375rem',
'space-checkbox-lg': '0.375rem',
'space-tags': '0.1875rem',
'space-tags-sm': '0.1875rem',
'space-tags-lg': '0.1875rem',
'space-static-tag-1': '1rem',
'space-static-tag-2': '2rem',
'space-static-tag-3': '3rem',
'floating-top': '0rem',
'floating-top-sm': '0rem',
'floating-top-lg': '0.6875rem',
'bg-input': '#ffffff',
'bg-input-hover': '#ffffff',
'bg-input-focus': '#ffffff',
'bg-input-danger': '#ffffff',
'bg-input-success': '#ffffff',
'bg-checkbox': '#ffffff',
'bg-checkbox-hover': '#ffffff',
'bg-checkbox-focus': '#ffffff',
'bg-checkbox-danger': '#ffffff',
'bg-checkbox-success': '#ffffff',
'bg-disabled': 'var(--vf-gray-200)',
'bg-selected': '#1118270d',
'bg-passive': 'var(--vf-gray-300)',
'bg-icon': 'var(--vf-gray-500)',
'bg-danger': 'var(--vf-danger-lighter)',
'bg-success': 'var(--vf-success-lighter)',
'bg-tag': 'var(--vf-primary)',
'bg-slider-handle': 'var(--vf-primary)',
'bg-toggle-handle': '#ffffff',
'bg-date-head': 'var(--vf-gray-100)',
'bg-addon': '#ffffff00',
'bg-btn': 'var(--vf-primary)',
'bg-btn-danger': 'var(--vf-danger)',
'bg-btn-secondary': 'var(--vf-gray-200)',
'color-input': 'var(--vf-gray-800)',
'color-input-hover': 'var(--vf-gray-800)',
'color-input-focus': 'var(--vf-gray-800)',
'color-input-danger': 'var(--vf-gray-800)',
'color-input-success': 'var(--vf-gray-800)',
'color-disabled': 'var(--vf-gray-400)',
'color-placeholder': 'var(--vf-gray-300)',
'color-passive': 'var(--vf-gray-700)',
'color-muted': 'var(--vf-gray-500)',
'color-floating': 'var(--vf-gray-500)',
'color-floating-focus': 'var(--vf-gray-500)',
'color-floating-success': 'var(--vf-gray-500)',
'color-floating-danger': 'var(--vf-gray-500)',
'color-danger': 'var(--vf-danger)',
'color-success': 'var(--vf-success)',
'color-tag': 'var(--vf-color-on-primary)',
'color-addon': 'var(--vf-gray-800)',
'color-date-head': 'var(--vf-gray-700)',
'color-btn': 'var(--vf-color-on-primary)',
'color-btn-danger': '#ffffff',
'color-btn-secondary': 'var(--vf-gray-700)',
'border-color-input': 'var(--vf-gray-300)',
'border-color-input-hover': 'var(--vf-gray-300)',
'border-color-input-focus': 'var(--vf-primary)',
'border-color-input-danger': 'var(--vf-gray-300)',
'border-color-input-success': 'var(--vf-gray-300)',
'border-color-checkbox': 'var(--vf-gray-300)',
'border-color-checkbox-focus': 'var(--vf-primary)',
'border-color-checkbox-hover': 'var(--vf-gray-300)',
'border-color-checkbox-danger': 'var(--vf-gray-300)',
'border-color-checkbox-success': 'var(--vf-gray-300)',
'border-color-checked': 'var(--vf-primary)',
'border-color-passive': 'var(--vf-gray-300)',
'border-color-slider-tooltip': 'var(--vf-primary)',
'border-color-tag': 'var(--vf-primary)',
'border-color-btn': 'var(--vf-primary)',
'border-color-btn-danger': 'var(--vf-danger)',
'border-color-btn-secondary': 'var(--vf-gray-200)',
'border-color-blockquote': 'var(--vf-gray-300)',
'border-color-hr': 'var(--vf-gray-300)',
'border-color-signature-hr': 'var(--vf-gray-300)',
'border-width-input-t': '1px',
'border-width-input-r': '1px',
'border-width-input-b': '1px',
'border-width-input-l': '1px',
'border-width-radio-t': '1px',
'border-width-radio-r': '1px',
'border-width-radio-b': '1px',
'border-width-radio-l': '1px',
'border-width-checkbox-t': '1px',
'border-width-checkbox-r': '1px',
'border-width-checkbox-b': '1px',
'border-width-checkbox-l': '1px',
'border-width-dropdown': '1px',
'border-width-btn': '1px',
'border-width-toggle': '0.125rem',
'border-width-tag': '1px',
'border-width-blockquote': '3px',
'shadow-input': '0px 0px 0px 0px rgba(0,0,0,0)',
'shadow-input-hover': '0px 0px 0px 0px rgba(0,0,0,0)',
'shadow-input-focus': '0px 0px 0px 0px rgba(0,0,0,0)',
'shadow-handles': '0px 0px 0px 0px rgba(0,0,0,0)',
'shadow-handles-hover': '0px 0px 0px 0px rgba(0,0,0,0)',
'shadow-handles-focus': '0px 0px 0px 0px rgba(0,0,0,0)',
'shadow-btn': '0px 0px 0px 0px rgba(0,0,0,0)',
'shadow-dropdown': '0px 0px 0px 0px rgba(0,0,0,0)',
'radius-input': '0.25rem',
'radius-input-sm': '0.25rem',
'radius-input-lg': '0.25rem',
'radius-btn': '0.25rem',
'radius-btn-sm': '0.25rem',
'radius-btn-lg': '0.25rem',
'radius-small': '0.25rem',
'radius-small-sm': '0.25rem',
'radius-small-lg': '0.25rem',
'radius-large': '0.25rem',
'radius-large-sm': '0.25rem',
'radius-large-lg': '0.25rem',
'radius-tag': '0.25rem',
'radius-tag-sm': '0.25rem',
'radius-tag-lg': '0.25rem',
'radius-checkbox': '0.25rem',
'radius-checkbox-sm': '0.25rem',
'radius-checkbox-lg': '0.25rem',
'radius-slider': '0.25rem',
'radius-slider-sm': '0.25rem',
'radius-slider-lg': '0.25rem',
'radius-image': '0.25rem',
'radius-image-sm': '0.25rem',
'radius-image-lg': '0.25rem',
'radius-gallery': '0.25rem',
'radius-gallery-sm': '0.25rem',
'radius-gallery-lg': '0.25rem',
'checkbox-size': '1rem',
'checkbox-size-sm': '0.875rem',
'checkbox-size-lg': '1rem',
'gallery-size': '6rem',
'gallery-size-sm': '5rem',
'gallery-size-lg': '7rem',
'toggle-width': '3rem',
'toggle-width-sm': '2.75rem',
'toggle-width-lg': '3rem',
'toggle-height': '1.25rem',
'toggle-height-sm': '1rem',
'toggle-height-lg': '1.25rem',
'slider-height': '0.375rem',
'slider-height-sm': '0.3125rem',
'slider-height-lg': '0.5rem',
'slider-height-vertical': '20rem',
'slider-height-vertical-sm': '20rem',
'slider-height-vertical-lg': '20rem',
'slider-handle-size': '1rem',
'slider-handle-size-sm': '0.875rem',
'slider-handle-size-lg': '1.25rem',
'slider-tooltip-distance': '0.5rem',
'slider-tooltip-distance-sm': '0.375rem',
'slider-tooltip-distance-lg': '0.5rem',
'slider-tooltip-arrow-size': '0.3125rem',
'slider-tooltip-arrow-size-sm': '0.3125rem',
'slider-tooltip-arrow-size-lg': '0.3125rem',
},
},
{
label: 'Bootstrap',
vars: {
primary: '#007bff',
'primary-darker': '#0056b3',
'color-on-primary': '#ffffff',
danger: '#dc3545',
'danger-lighter': '#f9dcdf',
success: '#28a745',
'success-lighter': '#c4f1ce',
'gray-50': '#f9fafb',
'gray-100': '#f8f9fa',
'gray-200': '#e9ecef',
'gray-300': '#dee2e6',
'gray-400': '#ced4da',
'gray-500': '#adb5bd',
'gray-600': '#6c757d',
'gray-700': '#495057',
'gray-800': '#343a40',
'gray-900': '#212529',
'dark-50': '#f9fafb',
'dark-100': '#f8f9fa',
'dark-200': '#e9ecef',
'dark-300': '#dee2e6',
'dark-400': '#ced4da',
'dark-500': '#adb5bd',
'dark-600': '#6c757d',
'dark-700': '#495057',
'dark-800': '#343a40',
'dark-900': '#212529',
'ring-width': '0.2rem',
'ring-color': '#007bff66',
'link-color': '#007bff',
'link-decoration': 'underline',
'font-size': '1rem',
'font-size-sm': '0.875rem',
'font-size-lg': '1.25rem',
'font-size-small': '0.8rem',
'font-size-small-sm': '0.7rem',
'font-size-small-lg': '1rem',
'font-size-h1': '2.5rem',
'font-size-h1-sm': '2.5rem',
'font-size-h1-lg': '2.5rem',
'font-size-h2': '2rem',
'font-size-h2-sm': '2rem',
'font-size-h2-lg': '2rem',
'font-size-h3': '1.75rem',
'font-size-h3-sm': '1.75rem',
'font-size-h3-lg': '1.75rem',
'font-size-h4': '1.5rem',
'font-size-h4-sm': '1.5rem',
'font-size-h4-lg': '1.5rem',
'font-size-h1-mobile': '2.5rem',
'font-size-h1-mobile-sm': '2.5rem',
'font-size-h1-mobile-lg': '2.5rem',
'font-size-h2-mobile': '2rem',
'font-size-h2-mobile-sm': '2rem',
'font-size-h2-mobile-lg': '2rem',
'font-size-h3-mobile': '1.75rem',
'font-size-h3-mobile-sm': '1.75rem',
'font-size-h3-mobile-lg': '1.75rem',
'font-size-h4-mobile': '1.5rem',
'font-size-h4-mobile-sm': '1.5rem',
'font-size-h4-mobile-lg': '1.5rem',
'font-size-blockquote': '1.25rem',
'font-size-blockquote-sm': '1.25rem',
'font-size-blockquote-lg': '1.25rem',
'line-height': '1.5rem',
'line-height-sm': '1.5rem',
'line-height-lg': '1.5rem',
'line-height-small': '1.5rem',
'line-height-small-sm': '1.5rem',
'line-height-small-lg': '1.5rem',
'line-height-headings': '1.2rem',
'line-height-headings-sm': '1.2rem',
'line-height-headings-lg': '1.2rem',
'line-height-blockquote': '1.5',
'line-height-blockquote-sm': '1.25',
'line-height-blockquote-lg': '2',
'letter-spacing': '0px',
'letter-spacing-sm': '0px',
'letter-spacing-lg': '0px',
'letter-spacing-small': '0px',
'letter-spacing-small-sm': '0px',
'letter-spacing-small-lg': '0px',
'letter-spacing-headings': '0px',
'letter-spacing-headings-sm': '0px',
'letter-spacing-headings-lg': '0px',
'letter-spacing-blockquote': '0px',
'letter-spacing-blockquote-sm': '0px',
'letter-spacing-blockquote-lg': '0px',
gutter: '15px',
'gutter-sm': '7.5px',
'gutter-lg': '15px',
'min-height-input': '2.375rem',
'min-height-input-sm': '2.125rem',
'min-height-input-lg': '2.625rem',
'py-input': '0.375rem',
'py-input-sm': '0.25rem',
'py-input-lg': '0.5rem',
'px-input': '0.75rem',
'px-input-sm': '0.5rem',
'px-input-lg': '1rem',
'py-btn': '0.375rem',
'py-btn-sm': '0.25rem',
'py-btn-lg': '0.5rem',
'px-btn': '0.75rem',
'px-btn-sm': '0.5rem',
'px-btn-lg': '1rem',
'py-btn-small': '0.28125rem',
'py-btn-small-sm': '0.1875rem',
'py-btn-small-lg': '0.375rem',
'px-btn-small': '0.5625rem',
'px-btn-small-sm': '0.375rem',
'px-btn-small-lg': '0.75rem',
'py-group-tabs': '0.375rem',
'py-group-tabs-sm': '0.25rem',
'py-group-tabs-lg': '0.5rem',
'px-group-tabs': '0.75rem',
'px-group-tabs-sm': '0.5rem',
'px-group-tabs-lg': '1rem',
'py-group-blocks': '0.75rem',
'py-group-blocks-sm': '0.625rem',
'py-group-blocks-lg': '0.875rem',
'px-group-blocks': '1rem',
'px-group-blocks-sm': '1rem',
'px-group-blocks-lg': '1rem',
'py-tag': '0px',
'py-tag-sm': '0px',
'py-tag-lg': '0px',
'px-tag': '0.4375rem',
'px-tag-sm': '0.4375rem',
'px-tag-lg': '0.4375rem',
'py-slider-tooltip': '0.125rem',
'py-slider-tooltip-sm': '0.0625rem',
'py-slider-tooltip-lg': '0.1875rem',
'px-slider-tooltip': '0.375rem',
'px-slider-tooltip-sm': '0.3125rem',
'px-slider-tooltip-lg': '0.5rem',
'py-blockquote': '0.5rem',
'py-blockquote-sm': '0.5rem',
'py-blockquote-lg': '0.5rem',
'px-blockquote': '1rem',
'px-blockquote-sm': '1rem',
'px-blockquote-lg': '1rem',
'py-hr': '0.25rem',
'space-addon': '0.75rem',
'space-addon-sm': '0.75rem',
'space-addon-lg': '0.75rem',
'space-checkbox': '0.25rem',
'space-checkbox-sm': '0.25rem',
'space-checkbox-lg': '0.25rem',
'space-tags': '0.1875rem',
'space-tags-sm': '0.1875rem',
'space-tags-lg': '0.1875rem',
'space-static-tag-1': '1rem',
'space-static-tag-2': '2rem',
'space-static-tag-3': '3rem',
'floating-top': '0rem',
'floating-top-sm': '0rem',
'floating-top-lg': '0.6875rem',
'bg-input': '#ffffff',
'bg-input-focus': '#ffffff',
'bg-input-hover': '#ffffff',
'bg-input-danger': '#ffffff',
'bg-input-success': '#ffffff',
'bg-checkbox': '#ffffff',
'bg-checkbox-hover': '#ffffff',
'bg-checkbox-focus': '#ffffff',
'bg-checkbox-danger': '#ffffff',
'bg-checkbox-success': '#ffffff',
'bg-disabled': '#e9ecef',
'bg-selected': '#1118270d',
'bg-passive': 'var(--vf-gray-300)',
'bg-icon': 'var(--vf-gray-500)',
'bg-danger': 'var(--vf-danger-lighter)',
'bg-success': 'var(--vf-success-lighter)',
'bg-tag': 'var(--vf-primary)',
'bg-slider-handle': 'var(--vf-primary)',
'bg-toggle-handle': '#ffffff',
'bg-date-head': 'var(--vf-gray-100)',
'bg-addon': '#e9ecef',
'bg-btn': 'var(--vf-primary)',
'bg-btn-danger': 'var(--vf-danger)',
'bg-btn-secondary': 'var(--vf-gray-200)',
'color-input': 'var(--vf-gray-700)',
'color-input-focus': 'var(--vf-gray-700)',
'color-input-hover': 'var(--vf-gray-700)',
'color-input-danger': 'var(--vf-gray-700)',
'color-input-success': 'var(--vf-gray-700)',
'color-disabled': 'var(--vf-gray-700)',
'color-placeholder': 'var(--vf-gray-600)',
'color-passive': 'var(--vf-gray-700)',
'color-muted': 'var(--vf-gray-600)',
'color-floating': 'var(--vf-gray-600)',
'color-floating-success': 'var(--vf-gray-600)',
'color-floating-danger': 'var(--vf-gray-600)',
'color-floating-focus': 'var(--vf-gray-600)',
'color-danger': 'var(--vf-danger)',
'color-success': 'var(--vf-success)',
'color-tag': 'var(--vf-color-on-primary)',
'color-addon': 'var(--vf-gray-700)',
'color-date-head': 'var(--vf-gray-700)',
'color-btn': 'var(--vf-color-on-primary)',
'color-btn-danger': '#ffffff',
'color-btn-secondary': 'var(--vf-gray-700)',
'border-color-input': 'var(--vf-gray-400)',
'border-color-input-focus': '#80bdff',
'border-color-input-hover': 'var(--vf-gray-400)',
'border-color-input-danger': 'var(--vf-gray-400)',
'border-color-input-success': 'var(--vf-gray-400)',
'border-color-checkbox': 'var(--vf-gray-400)',
'border-color-checkbox-focus': '#80bdff',
'border-color-checkbox-hover': 'var(--vf-gray-400)',
'border-color-checkbox-danger': 'var(--vf-gray-400)',
'border-color-checkbox-success': 'var(--vf-gray-400)',
'border-color-checked': 'var(--vf-primary)',
'border-color-passive': 'var(--vf-gray-300)',
'border-color-slider-tooltip': 'var(--vf-primary)',
'border-color-tag': 'var(--vf-primary)',
'border-color-btn': 'var(--vf-primary)',
'border-color-btn-danger': 'var(--vf-danger)',
'border-color-btn-secondary': 'var(--vf-gray-200)',
'border-color-blockquote': 'var(--vf-gray-400)',
'border-color-hr': 'var(--vf-gray-600)',
'border-color-signature-hr': 'var(--vf-gray-600)',
'border-width-input-t': '1px',
'border-width-input-r': '1px',
'border-width-input-b': '1px',
'border-width-input-l': '1px',
'border-width-radio-t': '1px',
'border-width-radio-r': '1px',
'border-width-radio-b': '1px',
'border-width-radio-l': '1px',
'border-width-checkbox-t': '1px',
'border-width-checkbox-r': '1px',
'border-width-checkbox-b': '1px',
'border-width-checkbox-l': '1px',
'border-width-dropdown': '1px',
'border-width-btn': '1px',
'border-width-toggle': '0.125rem',
'border-width-tag': '1px',
'shadow-input': 'inset 0 1px 1px rgba(0, 0, 0, 0.075)',
'shadow-input-hover': 'inset 0 1px 1px rgba(0, 0, 0, 0.075)',
'shadow-input-focus': '0 0 0 0.2rem rgba(0, 123, 255, 0.25)',
'shadow-handles': '0px 0px 0px 0px rgba(0,0,0,0)',
'shadow-handles-hover': 'inset 0 1px 1px rgba(0, 0, 0, 0.075)',
'shadow-handles-focus': '0 0 0 0.2rem rgba(0, 123, 255, 0.25)',
'shadow-btn': 'inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075)',
'shadow-dropdown': '0px 0px 0px 0px rgba(0,0,0,0)',
'radius-input': '0.25rem',
'radius-input-sm': '0.2rem',
'radius-input-lg': '0.3rem',
'radius-btn': '0.25rem',
'radius-btn-sm': '0.2rem',
'radius-btn-lg': '0.3rem',
'radius-small': '0.25rem',
'radius-small-sm': '0.2rem',
'radius-small-lg': '0.25rem',
'radius-large': '0.25rem',
'radius-large-sm': '0.2rem',
'radius-large-lg': '0.25rem',
'radius-tag': '0.25rem',
'radius-tag-sm': '0.2rem',
'radius-tag-lg': '0.25rem',
'radius-checkbox': '0.25rem',
'radius-checkbox-sm': '0.2rem',
'radius-checkbox-lg': '0.25rem',
'radius-slider': '0.25rem',
'radius-slider-sm': '0.2rem',
'radius-slider-lg': '0.25rem',
'radius-image': '0.25rem',
'radius-image-sm': '0.2rem',
'radius-image-lg': '0.25rem',
'radius-gallery': '0.25rem',
'radius-gallery-sm': '0.2rem',
'radius-gallery-lg': '0.25rem',
'checkbox-size': '1rem',
'checkbox-size-sm': '0.875rem',
'checkbox-size-lg': '1rem',
'gallery-size': '6rem',
'gallery-size-sm': '5rem',
'gallery-size-lg': '7rem',
'toggle-width': '3rem',
'toggle-width-sm': '2.75rem',
'toggle-width-lg': '3rem',
'toggle-height': '1.25rem',
'toggle-height-sm': '1.125rem',
'toggle-height-lg': '1.25rem',
'slider-height': '0.375rem',
'slider-height-sm': '0.3125rem',
'slider-height-lg': '0.5rem',
'slider-height-vertical': '20rem',
'slider-height-vertical-sm': '20rem',
'slider-height-vertical-lg': '20rem',
'slider-handle-size': '1rem',
'slider-handle-size-sm': '0.875rem',
'slider-handle-size-lg': '1.25rem',
'slider-tooltip-distance': '0.5rem',
'slider-tooltip-distance-sm': '0.375rem',
'slider-tooltip-distance-lg': '0.5rem',
'slider-tooltip-arrow-size': '0.3125rem',
'slider-tooltip-arrow-size-sm': '0.3125rem',
'slider-tooltip-arrow-size-lg': '0.3125rem',
},
},
{
label: 'Material',
vars: {
primary: '#6200ee',
'primary-darker': '#5000cc',
'color-on-primary': '#ffffff',
danger: '#b00020',
'danger-lighter': '#f9e5e8',
success: '#4caf50',
'success-lighter': '#e8f5e9',
'ring-width': '0px',
'ring-color': '#673ab766',
'link-color': 'var(--vf-primary)',
'link-decoration': 'inherit',
'gray-50': '#fafafa',
'gray-100': '#f5f5f5',
'gray-200': '#eeeeee',
'gray-300': '#e0e0e0',
'gray-400': '#bdbdbd',
'gray-500': '#9e9e9e',
'gray-600': '#757575',
'gray-700': '#616161',
'gray-800': '#424242',
'gray-900': '#212121',
'dark-50': '#fafafa',
'dark-100': '#f5f5f5',
'dark-200': '#eeeeee',
'dark-300': '#e0e0e0',
'dark-400': '#bdbdbd',
'dark-500': '#9e9e9e',
'dark-600': '#757575',
'dark-700': '#616161',
'dark-800': '#424242',
'dark-900': '#212121',
'font-size': '1rem',
'font-size-sm': '0.875rem',
'font-size-lg': '1rem',
'font-size-small': '0.875rem',
'font-size-small-sm': '0.75rem',
'font-size-small-lg': '0.875rem',
'font-size-h1': '2.125rem',
'font-size-h1-sm': '2.125rem',
'font-size-h1-lg': '2.125rem',
'font-size-h2': '1.875rem',
'font-size-h2-sm': '1.875rem',
'font-size-h2-lg': '1.875rem',
'font-size-h3': '1.5rem',
'font-size-h3-sm': '1.5rem',
'font-size-h3-lg': '1.5rem',
'font-size-h4': '1.25rem',
'font-size-h4-sm': '1.25rem',
'font-size-h4-lg': '1.25rem',
'font-size-h1-mobile': '1.5rem',
'font-size-h1-mobile-sm': '1.5rem',
'font-size-h1-mobile-lg': '1.5rem',
'font-size-h2-mobile': '1.25rem',
'font-size-h2-mobile-sm': '1.25rem',
'font-size-h2-mobile-lg': '1.25rem',
'font-size-h3-mobile': '1.125rem',
'font-size-h3-mobile-sm': '1.125rem',
'font-size-h3-mobile-lg': '1.125rem',
'font-size-h4-mobile': '1rem',
'font-size-h4-mobile-sm': '1rem',
'font-size-h4-mobile-lg': '1rem',
'font-size-blockquote': '1rem',
'font-size-blockquote-sm': '0.875rem',
'font-size-blockquote-lg': '1rem',
'line-height': '1.5rem',
'line-height-sm': '1.25rem',
'line-height-lg': '1.5rem',
'line-height-small': '1.25rem',
'line-height-small-sm': '1.125rem',
'line-height-small-lg': '1.25rem',
'line-height-headings': '1.2rem',
'line-height-headings-sm': '1.2rem',
'line-height-headings-lg': '1.2rem',
'line-height-blockquote': '1.5rem',
'line-height-blockquote-sm': '1.25rem',
'line-height-blockquote-lg': '1.5rem',
'letter-spacing': '0px',
'letter-spacing-sm': '0px',
'letter-spacing-lg': '0px',
'letter-spacing-small': '0px',
'letter-spacing-small-sm': '0px',
'letter-spacing-small-lg': '0px',
'letter-spacing-headings': '0px',
'letter-spacing-headings-sm': '0px',
'letter-spacing-headings-lg': '0px',
'letter-spacing-blockquote': '0px',
'letter-spacing-blockquote-sm': '0px',
'letter-spacing-blockquote-lg': '0px',
gutter: '1rem',
'gutter-sm': '0.5rem',
'gutter-lg': '1rem',
'min-height-input': '3rem',
'min-height-input-sm': '2.125rem',
'min-height-input-lg': '3.5rem',
'py-input': '0.75rem',
'py-input-sm': '0.375rem',
'py-input-lg': '1rem',
'px-input': '1rem',
'px-input-sm': '0.625rem',
'px-input-lg': '1rem',
'py-btn': '0.375rem',
'py-btn-sm': '0.5rem',
'py-btn-lg': '0.5rem',
'px-btn': '1rem',
'px-btn-sm': '1rem',
'px-btn-lg': '1rem',
'py-btn-small': '0.28125rem',
'py-btn-small-sm': '0.375rem',
'py-btn-small-lg': '0.375rem',
'px-btn-small': '0.75rem',
'px-btn-small-sm': '0.75rem',
'px-btn-small-lg': '0.75rem',
'py-group-tabs': '0.75rem',
'py-group-tabs-sm': '0.375rem',
'py-group-tabs-lg': '1rem',
'px-group-tabs': '1rem',
'px-group-tabs-sm': '0.625rem',
'px-group-tabs-lg': '1rem',
'py-group-blocks': '1rem',
'py-group-blocks-sm': '0.75rem',
'py-group-blocks-lg': '1.25rem',
'px-group-blocks': '1.25rem',
'px-group-blocks-sm': '1rem',
'px-group-blocks-lg': '1.5rem',
'py-tag': '0.1875rem',
'py-tag-sm': '0.125rem',
'py-tag-lg': '0.1875rem',
'px-tag': '0.675rem',
'px-tag-sm': '0.5rem',
'px-tag-lg': '0.75rem',
'py-slider-tooltip': '0.25rem',
'py-slider-tooltip-sm': '0.1875rem',
'py-slider-tooltip-lg': '0.3125rem',
'px-slider-tooltip': '0.5rem',
'px-slider-tooltip-sm': '0.375rem',
'px-slider-tooltip-lg': '0.625rem',
'py-blockquote': '0.25rem',
'py-blockquote-sm': '0.25rem',
'py-blockquote-lg': '0.25rem',
'px-blockquote': '0.75rem',
'px-blockquote-sm': '0.75rem',
'px-blockquote-lg': '0.75rem',
'py-hr': '0.25rem',
'space-addon': '0px',
'space-addon-sm': '0px',
'space-addon-lg': '0px',
'space-checkbox': '0.5rem',
'space-checkbox-sm': '0.5rem',
'space-checkbox-lg': '0.625rem',
'space-tags': '0.1875rem',
'space-tags-sm': '0.1875rem',
'space-tags-lg': '0.1875rem',
'space-static-tag-1': '1rem',
'space-static-tag-2': '2rem',
'space-static-tag-3': '3rem',
'floating-top': '0.75rem',
'floating-top-sm': '0rem',
'floating-top-lg': '0.875rem',
'bg-input': 'var(--vf-gray-100)',
'bg-input-hover': '#ececec',
'bg-input-focus': '#dcdcdc',
'bg-input-danger': 'var(--vf-gray-100)',
'bg-input-success': 'var(--vf-gray-100)',
'bg-checkbox': 'var(--vf-gray-100)',
'bg-checkbox-hover': '#ececec',
'bg-checkbox-focus': '#dcdcdc',
'bg-checkbox-danger': 'var(--vf-gray-100)',
'bg-checkbox-success': 'var(--vf-gray-100)',
'bg-disabled': 'var(--vf-gray-50)',
'bg-selected': '#1118270d',
'bg-passive': 'var(--vf-gray-300)',
'bg-icon': 'var(--vf-gray-700)',
'bg-danger': 'var(--vf-danger-lighter)',
'bg-success': 'var(--vf-success-lighter)',
'bg-tag': 'var(--vf-primary)',
'bg-slider-handle': 'var(--vf-primary)',
'bg-toggle-handle': '#ffffff',
'bg-date-head': 'var(--vf-gray-100)',
'bg-addon': 'transparent',
'bg-btn': 'var(--vf-primary)',
'bg-btn-danger': 'var(--vf-danger)',
'bg-btn-secondary': 'var(--vf-gray-200)',
'color-input': 'var(--vf-gray-900)',
'color-input-focus': 'var(--vf-gray-900)',
'color-input-hover': 'var(--vf-gray-900)',
'color-input-danger': 'var(--vf-gray-900)',
'color-input-success': 'var(--vf-gray-900)',
'color-disabled': '#afafaf',
'color-placeholder': '#00000099',
'color-passive': 'var(--vf-gray-700)',
'color-muted': '#00000099',
'color-floating': '#00000099',
'color-floating-focus': 'var(--vf-primary)',
'color-floating-success': 'var(--vf-success)',
'color-floating-danger': 'var(--vf-danger)',
'color-danger': 'var(--vf-danger)',
'color-success': 'var(--vf-success)',
'color-tag': 'var(--vf-color-on-primary)',
'color-addon': 'inherit',
'color-date-head': 'var(--vf-gray-700)',
'color-btn': 'var(--vf-color-on-primary)',
'color-btn-danger': '#ffffff',
'color-btn-secondary': 'var(--vf-gray-700)',
'border-color-input': 'var(--vf-gray-600)',
'border-color-input-focus': 'var(--vf-primary)',
'border-color-input-hover': 'var(--vf-gray-600)',
'border-color-input-danger': 'var(--vf-danger)',
'border-color-input-success': 'var(--vf-gray-600)',
'border-color-checkbox': 'var(--vf-gray-600)',
'border-color-checkbox-focus': 'var(--vf-primary)',
'border-color-checkbox-hover': 'var(--vf-gray-600)',
'border-color-checkbox-danger': 'var(--vf-danger)',
'border-color-checkbox-success': 'var(--vf-gray-600)',
'border-color-checked': 'var(--vf-primary)',
'border-color-passive': 'var(--vf-gray-300)',
'border-color-slider-tooltip': 'var(--vf-primary)',
'border-color-tag': 'var(--vf-primary)',
'border-color-btn': 'var(--vf-primary)',
'border-color-btn-danger': 'var(--vf-danger)',
'border-color-btn-secondary': 'var(--vf-gray-200)',
'border-color-blockquote': 'var(--vf-gray-300)',
'border-color-hr': 'var(--vf-gray-400)',
'border-color-signature-hr': 'var(--vf-gray-400)',
'border-width-input-t': '0px',
'border-width-input-r': '0px',
'border-width-input-b': '1px',
'border-width-input-l': '0px',
'border-width-radio-t': '2px',
'border-width-radio-r': '2px',
'border-width-radio-b': '2px',
'border-width-radio-l': '2px',
'border-width-checkbox-t': '2px',
'border-width-checkbox-r': '2px',
'border-width-checkbox-b': '2px',
'border-width-checkbox-l': '2px',
'border-width-dropdown': '0px',
'border-width-toggle': '0.25rem',
'border-width-btn': '1px',
'border-width-tag': '1px',
'border-width-blockquote': '3px',
'shadow-input': '0px 0px 0px 0px rgba(0,0,0,0)',
'shadow-input-hover': '0px 0px 0px 0px rgba(0,0,0,0)',
'shadow-input-focus': '0px 0px 0px 0px rgba(0,0,0,0)',
'shadow-handles': '0px 0px 0px 0px rgba(0,0,0,0)',
'shadow-handles-hover': '0px 0px 0px 9px rgba(0,0,0,0.15)',
'shadow-handles-focus': '0px 0px 0px 9px rgba(0,0,0,0.15)',
'shadow-btn': '0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%)',
'shadow-dropdown': '0 4px 6px 0 rgb(32 33 36 / 28%)',
'radius-input': '0.25rem 0.25rem 0rem 0rem',
'radius-input-sm': '0.25rem 0.25rem 0rem 0rem',
'radius-input-lg': '0.25rem 0.25rem 0rem 0rem',
'radius-btn': '0.25rem',
'radius-btn-sm': '0.25rem',
'radius-btn-lg': '0.25rem',
'radius-small': '0.125rem',
'radius-small-sm': '0.125rem',
'radius-small-lg': '0.125rem',
'radius-large': '0.5rem 0.5rem 0rem 0rem',
'radius-large-sm': '0.5rem 0.5rem 0rem 0rem',
'radius-large-lg': '0.5rem 0.5rem 0rem 0rem',
'radius-tag': '999px',
'radius-tag-sm': '999px',
'radius-tag-lg': '999px',
'radius-checkbox': '0.25rem',
'radius-checkbox-sm': '0.25rem',
'radius-checkbox-lg': '0.25rem',
'radius-slider': '1rem',
'radius-slider-sm': '1rem',
'radius-slider-lg': '1rem',
'radius-image': '0.25rem 0.25rem 0rem 0rem',
'radius-image-sm': '0.25rem 0.25rem 0rem 0rem',
'radius-image-lg': '0.25rem 0.25rem 0rem 0rem',
'radius-gallery': '0.25rem 0.25rem 0rem 0rem',
'radius-gallery-sm': '0.25rem 0.25rem 0rem 0rem',
'radius-gallery-lg': '0.25rem 0.25rem 0rem 0rem',
'checkbox-size': '1rem',
'checkbox-size-sm': '0.9375rem',
'checkbox-size-lg': '1.125rem',
'gallery-size': '6rem',
'gallery-size-sm': '5rem',
'gallery-size-lg': '7rem',
'toggle-width': '3rem',
'toggle-width-sm': '2.75rem',
'toggle-width-lg': '3rem',
'toggle-height': '1rem',
'toggle-height-sm': '1.125rem',
'toggle-height-lg': '1.25rem',
'slider-height': '0.375rem',
'slider-height-sm': '0.3125rem',
'slider-height-lg': '0.4375rem',
'slider-height-vertical': '20rem',
'slider-height-vertical-sm': '20rem',
'slider-height-vertical-lg': '20rem',
'slider-handle-size': '1.25rem',
'slider-handle-size-sm': '1.25rem',
'slider-handle-size-lg': '1.4375rem',
'slider-tooltip-distance': '0.625rem',
'slider-tooltip-distance-sm': '0.625rem',
'slider-tooltip-distance-lg': '0.625rem',
'slider-tooltip-arrow-size': '0.375rem',
'slider-tooltip-arrow-size-sm': '0.375rem',
'slider-tooltip-arrow-size-lg': '0.375rem',
},
},
],
},
]
})This will add the 3 default themes under the Official themes group. The label of the group can be a tag that comes from builder locale, however, the theme label must be uniform.
The default themes are also available as the themes export of @vueform/builder:
js
// builder.config.js
import { defineConfig, themes } from '@vueform/builder'
export default defineConfig({
// This sets the default themes, so esentially does nothing
themes,
})Customizing Config Fields
The sections and separators export of @vueform/builder have a theme property that—just like in the case of different element types—contains the config panel sections and separators of the Theme panel.
We can override them via the theme property in builder.config.js:
js
// builder.config.js
import { defineConfig, sections, separators } from '@vueform/builder'
// Nothing will change in this case
export default defineConfig({
theme: {
sections: sections.theme,
separators: separators.theme,
}
})The sections are structured the same way as for element types. The same is true for separators.
Theme Field's Structure
Each field in Vueform Builder's theme panel is assigned to a CSS variable provided by Vueform.
For example, this is how the Primary color (stored in the --vf-primary CSS variable) is available for editing:
js
import { ThemeColorField } from '@vueform/builder'
const theme = {
sections: {
// ...
colors: {
name: 'colors',
label: 'section_colors',
fields: {
'primary': { type: ThemeColorField, name: 'primary', label: 'colors_primary_label', },
'primary-darker': { /* ... */ },
'color-on-primary': { /* ... */ },
}
// ...
},
///...
},
// ...
}The type defines the config field to be used, the name is the property name of the theme variable, and the label is a localized tag that is present in builder locale.
When the theme panel's Primary field is edited, its value is stored in the Builder Object's theme property under the primary key, which can later be used to set the --vf-primary CSS variable as described in the Rendering chapter.
We can use this knowledge to add, remove, or replace fields in the Theme panel.
Before proceeding, it's recommended to read through the Custom Config Panels chapter to learn about how config panels work in general and how to add, remove, or replace configuration fields.
Overriding Theme Fields
Let's say we don't want the primary color field to be a freely picked color, but we'd rather have users choose from 2 options: Red and Blue.
We can create a new field that picks from Red and Blue and override the related theme field via theme.sections in builder.config.js:
js
// builder.config.js
import {
defineConfig,
sections,
BaseThemeField
} from '@vueform/builder'
// Creating the color selector field
const ThemePrimaryField = class extends BaseThemeField {
name = 'ThemePrimaryField'
get schema () {
return {
[this.fieldName]: {
type: 'select',
label: this.options.label,
info: this.options.info,
items: ['Red', 'Blue']
}
}
}
}
// Overriding the field type for primary color
sections.theme.colors.fields.primary.type = ThemePrimaryField
export default defineConfig({
theme: {
sections,
}
})Theme fields need to be extended from the BaseThemeField export of @vueform/builder and they usually start with the Theme field name prefix.
Note that now the Primary color selector can only have either Blue or Red values, so we need to change the default theme's primary value to either Red or Blue. Otherwise, it would try to load #07bf9b, which isn't an available value:
js
// builder.config.js
import {
defineConfig,
sections,
BaseThemeField,
themes
} from '@vueform/builder'
themes[0].themes[0].vars.primary = 'Blue'
const ThemePrimaryField = class extends BaseThemeField {
name = 'ThemePrimaryField'
get schema () {
return {
[this.fieldName]: {
type: 'select',
label: this.options.label,
info: this.options.info,
items: ['Red', 'Blue']
}
}
}
}
sections.theme.colors.fields.primary.type = ThemePrimaryField
export default defineConfig({
themes,
theme: {
sections,
}
})Adding New Theme Fields
We can add config fields to the Theme panel by extending the sections and separators.
For example, let's add a new font-family field to the beginning of the fonts section:
js
// builder.config.js
import { defineConfig, sections, separators, BaseThemeField } from '@vueform/builder'
// Creating the font-family field
const ThemeFontFamilyField = class extends BaseThemeField {
name = 'ThemeFontFamilyField'
get schema() {
return {
'font-family': {
type: 'select',
columns: { label: 6 },
search: true,
canClear: false,
canDeselect: false,
label: 'Font family',
items: ['Roboto', 'Open Sans', 'Montserrat'],
default: 'Roboto',
},
};
}
}
// Adding the font-family field to the `fonts` section
sections.theme.fonts.fields = {
'font-family': {
type: ThemeFontFamilyField,
name: 'font-family',
label: 'Font family' // This could also be a localized tag
},
...sections.theme.fonts.fields
}
// Adding a new separator under the `font-family`
separators.theme.fonts = [
['font-family'],
...separators.theme.fonts,
]
export default defineConfig({
theme: {
sections: sections.theme,
separators: separators.theme,
}
})The next step is to ensure our new font-family variable is used for our form preview:
vue
<!-- Root component where the <VueformBuilder> is used (eg. App.vue) -->
<template>
<VueformBuilder ref="builder$" />
</template>
<script setup>
import { computed, ref } from 'vue'
const builder$ = ref(null)
const fontFamily = computed(() => {
return builder$.value?.builder.theme['font-family'] || 'Roboto';
})
</script>
<style lang="scss">
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&display=swap');
.vfb-preview-form {
font-family: v-bind('fontFamily');
}
</style>Finally, we need to ensure the --vf-font-family is used to define the font-family for our rendered forms:
scss
// In any CSS definition
form {
font-family: var(--vf-font-family, 'Arial');
}Now, when you load the theme variables into the renderer, the --vf-font-family will also have a value, which in turn fills in the variable for the font-family of any <form>.
Available Theme Fields
The following theme-related fields are exported from @vueform/builder that you can reuse to create custom fields:
| Field | Used by (example) | Description |
|---|---|---|
ThemeBorderField | Input / Border width | Pixel input that can be broken down to Top, Right, Bottom, and Left, or set as 'All equal'. The related variable must have 4 versions ending with -t, -r, -b, and -l. |
ThemeColorField | Colors / Primary | Color picker. |
ThemeColorSelectorField | Input / Border color | A select input that lists all available colors and allows for a custom value. |
ThemeRadiusField | Input / Radius | Pixel input with size selector that can be broken down to Top-left, Top-right, Bottom-right, and Bottom-left, or set as 'All equal'. |
ThemeSelectField | General / Link decoration | Select input. Select options can be provided by adding items to the field definition object. |
ThemeShadowField | General / Handle shadow | Text input with 0px 0px 0px 0px rgba(0,0,0,0) placeholder. |
ThemeSingleSizeField | General / Ring width | Pixel input without size selector. |
ThemeSizeField | Fonts / Font size | Pixel input with size selector. |
ThemeThemeField | Theme | The theme loader field. |
ThemeToolsField | Theme | The size selector tabs. |
