Theme Editor

The Theme Editor is a powerful tool that allows you to create and customize themes for MonTally. It provides a user-friendly interface with live preview capabilities.

Features

Color Customization

The editor allows you to customize various color aspects of your theme:

• Background Color: The main background color of the application
• Primary Color: Used for buttons, highlights, and important UI elements
• Secondary Color: Used for borders and secondary UI elements
• Tertiary Color: Used for subtle accents and tertiary UI elements

UI Options

You can toggle various UI settings to customize the appearance:

• Dark Mode: Enables dark mode for the interface
• Show Borders: Displays borders around elements for better visual separation
• Compact UI: Makes the interface more compact with reduced spacing

Usage

Creating a New Theme

1. Navigate to the Themes section in your dashboard
2. Click the "Create New Theme" button
3. Enter a name and description for your theme
4. Use the color pickers and toggles to customize your theme
5. Click "Save Theme" when you're done

Editing an Existing Theme

1. Select a theme from the theme gallery
2. Click the "Edit" button
3. Make your desired changes
4. Click "Save Theme" to update the theme

Previewing Changes

The Theme Editor provides a live preview of your changes:

• Changes are reflected in real-time
• You can see how your theme will look in the actual application
• The preview includes all UI elements to ensure consistency

Saving and Exporting

• Save Theme: Saves your changes to the current theme
• Reset: Reverts all changes to the original theme state
• Download: Exports the theme configuration as a JSON file

Best Practices

Color Selection

• Use high contrast colors for better readability
• Consider color blindness when choosing colors
• Test your theme in both light and dark modes
• Keep the UI consistent with MonTally's design language

Performance

• Avoid using too many different colors
• Keep the configuration simple and focused
• Test the theme on different devices and screen sizes

Accessibility

• Ensure sufficient contrast between text and background
• Use colors that are distinguishable for color-blind users
• Test the theme with screen readers

Troubleshooting

Common Issues

1. Colors not updating

   • Check that the color values are in valid hex format
   • Ensure you've clicked "Save Theme" after making changes

2. Theme not applying

   • Verify that the theme file is properly formatted
   • Check that all required fields are present
   • Try resetting to the default theme

3. Performance issues

   • Reduce the number of custom colors
   • Simplify the theme configuration
   • Clear your browser cache

API Reference

The Theme Editor component accepts the following props:

interface ThemeEditorProps {
  themePath?: string; // Path to the theme JSON file
  initialTheme?: ThemeConfig; // Initial theme configuration
  onSave?: (theme: ThemeConfig) => Promise<void>; // Callback when theme is saved
  onReset?: () => void; // Callback when theme is reset
}

ThemeConfig Type

interface ThemeConfig {
  backgroundColor: string;
  primaryColor: string;
  secondaryColor: string;
  tertiaryColor: string;
  darkMode: boolean;
  showBorder: boolean;
  smallUI: boolean;
}