Reference Documentation

Reference Documentation

Technical reference guide for VertiTab’s custom theme system.

Official Documentation Links

MUI Official Resources

• MUI Default Theme Viewer - View complete MUI theme structure and default values
• MUI Theme Customization Documentation - Official theme customization guide
• MUI Component API - Detailed API documentation for all components

Theme Structure Overview

Basic Information

{
  id: 'ultraviolet',
  name: 'Ultra Violet',
  description: 'Pantone Color of the Year 2018 - Ultra Violet with mysterious and creative purple tones',
  isBuiltIn: true,
  themeIndex: 17
}

Color Schemes

colorSchemes: {
  light: {
    palette: {
      // Primary colors
      primary: { main: '#6B46C1' },
      secondary: { main: '#A855F7' },
      error: { main: '#DC2626' },
      warning: { main: '#D97706' },
      info: { main: '#2563EB' },
      success: { main: '#059669' },
      // Background colors
      background: {
        default: '#FEFBFF',
        paper: '#FAF7FF',
      },
      // Text colors
      text: {
        primary: '#1A1A1A',
        secondary: '#4A4A4A',
        disabled: '#9E9E9E',
      },
      // Action colors
      action: {
        active: '#5B21B6',
        hover: 'rgba(107, 70, 193, 0.08)',
        selected: 'rgba(107, 70, 193, 0.3)',
        focus: 'rgba(107, 70, 193, 0.16)',
      },
      divider: '#F3F0FF',
    },
  },
  dark: {
    // Dark mode configuration...
  }
}

Typography

typography: {
  htmlFontSize: 16,
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
  fontSize: 14,
  h1: {
    fontWeight: 500,
    fontSize: '1.5rem',
    lineHeight: 1.3
  },
  h4: {
    fontWeight: 400,
    fontSize: '0.875rem',
    lineHeight: 1.4
  },
  body1: {
    fontWeight: 400,
    fontSize: '0.875rem',
    lineHeight: 1.5
  },
  button: {
    fontWeight: 400,
    fontSize: '0.875rem',
    lineHeight: 1.75
  }
}

Key Component Examples

CSS Baseline Settings

MuiCssBaseline: {
  defaultProps: {
    enableColorScheme: true
  },
  styleOverrides: {
    html: {
      fontSize: "16px"
    },
    body: {
      background: undefined,
      "-webkit-font-smoothing": 'antialiased',
      "-moz-osx-font-smoothing": 'grayscale'
    }
  }
}

List Item Button

MuiListItemButton: {
  defaultProps: {
    dense: true,
    disableGutters: false,
    divider: false,
    disableRipple: false
  },
  styleOverrides: {
    root: {
      borderRadius: '6px',
      paddingTop: '4px',
      paddingRight: '8px',
      paddingBottom: '4px',
      paddingLeft: '8px',
      '&:hover': {
        backgroundColor: 'rgba(107, 70, 193, 0.08)',
        boxShadow: '0 2px 8px rgba(107, 70, 193, 0.15)',
        transform: 'translateY(-1px)'
      }
    }
  }
}

Icon Button

MuiIconButton: {
  defaultProps: {
    disableRipple: false,
    disableFocusRipple: false,
    color: 'primary',
    size: 'small'
  },
  styleOverrides: {
    root: {
      padding: '4px',
      margin: 0,
      borderRadius: '6px',
      '&:hover': {
        backgroundColor: 'rgba(107, 70, 193, 0.08)',
        boxShadow: '0 2px 8px rgba(107, 70, 193, 0.2)',
      }
    }
  }
}

Icon Components

MuiIcon: {
  defaultProps: {
    fontSize: 'small',
    color: 'inherit'
  },
  styleOverrides: {
    root: {
      fontSize: '14px',
    }
  }
},
MuiSvgIcon: {
  defaultProps: {
    fontSize: 'small',
    color: 'inherit'
  },
  styleOverrides: {
    root: {
      fontSize: '14px'
    }
  }
}

Avatar Component

MuiAvatar: {
  defaultProps: {
    variant: 'rounded'
  },
  styleOverrides: {
    root: {
      width: '14px',
      height: '14px',
      fontSize: '14px',
    }
  }
}

Menu Component

MuiMenu: {
  defaultProps: {
    dense: true,
    disableAutoFocusItem: true,
  },
  styleOverrides: {
    paper: {
      borderRadius: '8px',
      paddingTop: '8px',
      paddingBottom: '8px',
      boxShadow: '0 8px 32px rgba(107, 70, 193, 0.15)',
      border: '1px solid rgba(107, 70, 193, 0.1)',
    }
  }
}

Button Component

MuiButton: {
  defaultProps: {
    color: 'primary',
    disableFocusRipple: false,
    disableRipple: false,
    size: 'small',
  },
  styleOverrides: {
    root: {
      borderRadius: '8px',
      '&:hover': {
        transform: 'translateY(-1px)',
        boxShadow: '0 4px 16px rgba(107, 70, 193, 0.25)'
      }
    }
  }
}

Background Settings Syntax

Solid Colors

background: #6b46c1;
background: rgb(107, 70, 193);
background: rgba(107, 70, 193, 0.8);

Gradients

background: linear-gradient(45deg, #6b46c1, #a855f7);
background: radial-gradient(circle, #6b46c1, #a855f7);

Images

background: url("image.jpg") center/cover no-repeat;

Theme Configuration Tips

Color Consistency

• Use the same primary color series
• Maintain color correspondence between light and dark modes
• Ensure sufficient contrast ratios

Component Coordination

• Unified border radius design (e.g., borderRadius: '6px')
• Consistent spacing patterns (e.g., padding: '4px')
• Coordinated animation effects

Performance Optimization

• Avoid overly complex shadows and animations
• Use transform instead of changing layout properties
• Use reasonable transition durations

Common Issues

Theme Not Applying

1. Check if JSON syntax is correct
2. Confirm theme is saved and applied
3. Clear browser cache and reload

Style Conflicts

1. Check CSS specificity
2. Use browser developer tools for debugging
3. Verify component name spelling

Performance Issues

1. Reduce complex CSS animations
2. Optimize background image sizes
3. Limit number of custom styles

Related Documentation

• Theme Configuration - Basic configuration guide
• Font Size Adjustment - Typography settings
• Background Settings - Background style configuration