Customizing Theme Panel
Learn how to customize the Theme panel.
Disabling Config Fields
The following options can be used to disable theme config fields:
// 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
:
// 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
:
// 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
:
// 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:
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
:
// 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:
// 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:
// 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:
<!-- 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:
// 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. |