Theme Examples

<VizzlyComponent theme={{
    detail: "minimal",
    rowLimit: 5,
    forms: {
        select: {
            background: '#fff',
            border: '2px rgb(243, 244, 246) solid',
            borderRadius: '0.375rem',
            color: 'rgb(55, 65, 81)',
            fontWeight: 'inherit',
            indicatorColor: 'rgb(75 85 99)',
            '&:focus': {
                border: '2px rgb(224, 242, 255) solid',
            },
            '&:hover': {
                border: '2px rgb(224, 242, 255) solid',
            },
        },
    },
    buttons: {
        primary: {
            background: 'rgb(48, 116, 217)',
            borderRadius: '0.25rem',
            border: '1px solid rgb(48, 116, 217)',
            boxShadow: '0 2px 0 rgb(0 0 0 / 5%)',
            color: '#fff',
            fontSize: '12px',
            fontWeight: 500,
            padding: '0.35rem 0.75rem',
            '&:hover': {
                background: '#5795e6',
            },
        }
    }
  }} 
/> 

<VizzlyComponent theme={{
    detail: "minimal",
    rowLimit: 5,
    modals: {
        base: {
            borderRadius: '0.375rem',
            border: '0px solid',
            background: 'rgb(255, 255, 255)',
            boxShadow:
            '0 0 #0000,0 0 #0000,0 20px 25px -5px rgb(0 0 0 / 0.1),0 8px 10px -6px rgb(0 0 0 / 0.1)',
        },
        header: { padding: '0.75rem 0.75rem 0px 1.25rem' },
        content: { padding: '0.75rem' },
        footer: { padding: '0 0.75rem 0.75rem 1.25rem' },
        overlay: {
            background: '#000',
            opacity: 0.3,
        },
    },
    tabs: {
        selected: {
            borderRadius: '0.5rem',
            padding: '0.5rem 0',
            fontSize: '0.75rem',
            fontWeight: 700,
            boxShadow: '0 0 #0000,0 0 #0000,0 1px 2px 0 rgb(0 0 0 / 0.05)',
            background: 'rgb(48 116 217)',
            color: 'rgb(255 255 255)',
        },
        unselected: {
            borderRadius: '0.5rem',
            padding: '0.5rem 0',
            fontSize: '0.75rem',
            fontWeight: 700,
            color: 'rgba(0, 0, 0, 0.4)',
        },
    },
    buttons: {
        primary: {
            background: 'rgb(48, 116, 217)',
            borderRadius: '0.25rem',
            border: '1px solid rgb(48, 116, 217)',
            boxShadow: '0 2px 0 rgb(0 0 0 / 5%)',
            color: '#fff',
            fontSize: '12px',
            fontWeight: 500,
            padding: '0.25rem 0.75rem',
            '&:hover': {
              background: '#5795e6',
            },
        }
    },
    lists: {
        title: {
            fontWeight: 500,
        },
        border: '2px solid rgb(229 231 235 / 0.6)',
        borderRadius: '0.5rem',
        background: 'rgb(255 255 255 / 1)',
        icon: {
            color: '#1f293799',
            background: '#fff',
            border: '1px solid transparent',
        },
    },
  }} 
/> 

<VizzlyComponent theme={{
    detail: "verbose",
    rowLimit: 5,
    colors: ['#688AE8', '#C33D69', '#2EA597', '#8456CE', '#E07941', '#3759CE'],
    panels: {
        padding: '0.75rem',
        borderRadius: '0.5rem',
        background: '#fff',
        boxShadow:
        '0 4px 6px -1px rgb(0 0 0 / 0.1),0 2px 4px -2px rgb(0 0 0 / 0.1)',
    },
    charts: {
        title: {
            fontWeight: 500,
        },
        subject: {
            color: '#8f8f91',
            fontSize: '0.875rem',
        },
    },
  }}
/>