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:

FieldUsed by (example)Description
ThemeBorderFieldInput / Border widthPixel 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.
ThemeColorFieldColors / PrimaryColor picker.
ThemeColorSelectorFieldInput / Border colorA select input that lists all available colors and allows for a custom value.
ThemeRadiusFieldInput / RadiusPixel input with size selector that can be broken down to Top-left, Top-right, Bottom-right, and Bottom-left, or set as 'All equal'.
ThemeSelectFieldGeneral / Link decorationSelect input. Select options can be provided by adding items to the field definition object.
ThemeShadowFieldGeneral / Handle shadowText input with 0px 0px 0px 0px rgba(0,0,0,0) placeholder.
ThemeSingleSizeFieldGeneral / Ring widthPixel input without size selector.
ThemeSizeFieldFonts / Font sizePixel input with size selector.
ThemeThemeFieldThemeThe theme loader field.
ThemeToolsFieldThemeThe size selector tabs.
👋 Hire Vueform team for form customizations and developmentLearn more