Skip to content
VertiTab

Theme Configuration

Theme Configuration

Section titled “Theme Configuration”

In the theme editor, you can customize themes in detail through six tabs. This guide introduces the functionality and operation methods of each configuration page.

Entering the Theme Editor

Section titled “Entering the Theme Editor”

Edit Existing Themes

Section titled “Edit Existing Themes”
  1. On the custom themes page, click the three-dot menu (⋮) in the top-right corner of a theme card
  2. Select “Edit”

Create New Themes

Section titled “Create New Themes”
  1. Click the “Create New Theme” card
  2. Choose a base template to start customizing

Theme Editor Interface

Section titled “Theme Editor Interface”

The theme editor contains six main configuration tabs:

1. Basic Information (⚙️)

Section titled “1. Basic Information (⚙️)”
  • Theme Name: Give your theme an easily recognizable name
  • Theme Description: Brief description of theme features or applicable scenarios
  • Preview Function: Real-time preview of theme effects

2. Color Schemes (🎨)

Section titled “2. Color Schemes (🎨)”
  • Light Mode Configuration: Set colors for light theme
  • Dark Mode Configuration: Set colors for dark theme
  • Primary Colors: Main color, secondary color
  • Semantic Colors: Error, warning, info, success status colors
  • Background Colors: Default background, paper background
  • Text Colors: Primary text, secondary text, disabled text
  • Action Colors: Hover, selected, focus states

3. Typography (📝)

Section titled “3. Typography (📝)”
  • Global Font Settings: Font family, base size
  • Heading Fonts: H1-H6 various heading sizes and styles
  • Body Fonts: Body1, Body2 body font configuration
  • Button Fonts: Button text styles
  • Caption Fonts: Small font styles

4. Component Customization (🧩)

Section titled “4. Component Customization (🧩)”

Main component configuration cards:

  • CssBaseline: Global style base settings
  • List: Basic styles for list containers
  • ListItem: List item styles and spacing
  • ListItemButton: ⭐ List button styles (used by side panel tabs)
  • Avatar: Avatar component size and shape
  • IconButton: Icon button styles
  • Icon: Icon size and colors
  • Menu: Menu background and spacing
  • MenuItem: Menu item styles
  • Dialog: Dialog appearance
  • DialogTitle: Dialog title styles
  • ButtonBase: Basic button properties
  • Button: Regular button styles

Components marked with ⭐ have greater interface impact

5. JSON Editor (📄)

Section titled “5. JSON Editor (📄)”
  • Direct Editing: Edit complete theme configuration in JSON format
  • Formatting: Automatically format JSON code
  • Validation: Check JSON syntax errors
  • Advanced Users: Suitable for users with programming experience

6. Global Styles (🎨)

Section titled “6. Global Styles (🎨)”
  • Custom CSS: Add additional CSS styles
  • Advanced Customization: Override default styles
  • Note: Requires CSS knowledge

Save and Preview

Section titled “Save and Preview”

Real-time Preview

Section titled “Real-time Preview”
  • Editing displays preview effects in real-time
  • Changes are immediately reflected in the interface

Save Options

Section titled “Save Options”
  • Save Button: Save current changes
  • Cancel Button: Discard changes and return

Important Notes

Section titled “Important Notes”
  • Custom theme features require premium membership
  • Real-time preview effects during editing
  • Theme applies immediately to the entire extension after saving

Common Operation Tips

Section titled “Common Operation Tips”
  1. Start with Color Schemes: Set the main color tone
  2. Adjust Font Sizes: Optimize reading experience
  3. Focus on ListItemButton: Affects side panel tab display
  4. Use Preview Function: Check actual effects anytime
  5. Utilize Component Descriptions: Each component has detailed explanations of its purpose

Next Steps

Section titled “Next Steps”