MonTally Themes

MonTally offers a powerful theming system that allows you to customize the appearance of your application. You can choose from built-in themes or create your own custom themes.

Built-in Themes

MonTally comes with several built-in themes that you can use right away:

Default: A clean, modern theme with a dark color scheme
Sylveon: A pink-themed design inspired by the Fairy-type Pokémon
Deino: A dark blue theme perfect for night-time hunting

Theme Configuration

Each theme in MonTally is defined by a JSON configuration file. Here's the complete configuration structure:

{
  "statusSwitch": true,
  "showAllSwitch": true,
  "showShinySwitch": true,
  "totalSwitch": true,
  "resetSwitch": false,
  "apiSwitch": false,
  "debugSwitch": false,
  "turboSwitch": false,
  "notificationsSwitch": true,
  "selectedLanguage": "en",
  "selectedSort": "'date_desc'",
  "captureArea": null,
  "selectedSprite": "Main",
  "showBorder": false,
  "shinyColor": true,
  "smallUI": false,
  "customCounterEnabled": true,
  "counterFrameImage": "",
  "counterMainImage": "",
  "primaryColor": "#dedede",
  "secondaryColor": "#949494",
  "tertiaryColor": "#616161",
  "quaternaryColor": "#676767",
  "backgroundColor": "#050505",
  "hoverColor": "#2b2b2b",
  "warningColor": "#dbcf80",
  "errorColor": "#d25151"
}

Display Settings

Option	Type	Default	Description
`statusSwitch`	boolean	true	Enable/disable status display
`showAllSwitch`	boolean	true	Show all Pokémon
`showShinySwitch`	boolean	true	Show shiny Pokémon
`totalSwitch`	boolean	true	Show total count
`resetSwitch`	boolean	false	Enable reset functionality
`apiSwitch`	boolean	false	Enable API features
`debugSwitch`	boolean	false	Enable debug mode
`turboSwitch`	boolean	false	Enable turbo mode
`notificationsSwitch`	boolean	true	Enable notifications

UI Customization

Option	Type	Default	Description
`selectedLanguage`	string	"en"	Selected language
`selectedSort`	string	"date_desc"	Sort order
`captureArea`	string	null	Capture area settings
`selectedSprite`	string	"Main"	Selected sprite style
`showBorder`	boolean	false	Show borders
`shinyColor`	boolean	true	Enable shiny colors
`smallUI`	boolean	false	Use compact UI
`customCounterEnabled`	boolean	true	Enable custom counter

Theme Colors

Option	Type	Default	Description
`primaryColor`	string	"#dedede"	Primary accent color
`secondaryColor`	string	"#949494"	Secondary color
`tertiaryColor`	string	"#616161"	Tertiary color
`quaternaryColor`	string	"#676767"	Quaternary color
`backgroundColor`	string	"#050505"	Background color
`hoverColor`	string	"#2b2b2b"	Hover state color
`warningColor`	string	"#dbcf80"	Warning color
`errorColor`	string	"#d25151"	Error color

Custom Images

Option	Type	Default	Description
`counterFrameImage`	string	""	Custom counter frame image in base64
`counterMainImage`	string	""	Custom counter main image in base64

Creating Custom Themes

You can create your own custom themes using the Theme Editor in the dashboard. The editor provides a user-friendly interface to customize all aspects of your theme.

Using the Theme Editor

Navigate to the Themes section in your dashboard
Click "Create New Theme"
Use the editor to customize your theme's appearance
Click "Save Theme" when you're done

Theme Editor Features

Live preview of your changes
Color picker for easy color selection
Toggle switches for boolean options
Reset button to revert changes
Download option to save your theme configuration

Theme Files

Themes are stored as JSON files in the public/themes directory. Each theme file contains:

Theme metadata (name, description, etc.)
Configuration settings
Preview image path
Author information

Best Practices

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

You can share your custom themes with other MonTally users by:

Exporting your theme configuration
Sharing the JSON file
Having others import it into their MonTally installation

Troubleshooting

If you encounter issues with themes:

Check that all required fields are present in your theme configuration
Ensure color values are in valid hex format
Verify that the theme file is properly formatted JSON
Try resetting to the default theme if problems occur

MonTally Themes

On this page