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

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

1. Click the "Create New Theme" card
2. Choose a base template to start customizing

Theme Editor Interface

The theme editor contains six main configuration tabs:

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 (🎨)

• 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 (📝)

• 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 (🧩)

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 (📄)

• 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 (🎨)

• Custom CSS: Add additional CSS styles
• Advanced Customization: Override default styles
• Note: Requires CSS knowledge

Save and Preview

Real-time Preview

• Editing displays preview effects in real-time
• Changes are immediately reflected in the interface

Save Options

• Save Button: Save current changes
• Cancel Button: Discard changes and return

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

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

• Font Size Adjustment: Learn about font configuration in detail
• List Spacing Settings: Optimize side panel display effects
• Background Settings: Customize background styles