Search Documentation

Introducing Themes

While templates provide a way to structure individual pages, Trongate's theming system offers a more comprehensive approach to managing your application's appearance. Themes allow you to package templates together with assets such as; stylesheets, fonts, images and JavaScript files to create cohesive design packages.

Beyond Templates

A template is essentially an HTML file with embedded PHP code that defines a page's structure. However, modern web applications often require more sophisticated styling solutions that go beyond simple HTML templates. You might need:

• Multiple coordinated color schemes
• Custom typography and fonts
• Comprehensive icon sets
• Standardized UI components
• JavaScript enhancements
• Theme-specific assets and images

This is where Trongate's theming system comes into play, providing a structured way to manage all these design elements.

Theme Architecture

In Trongate, a theme is more than just a collection of templates - it's a complete design package. Themes are defined in the themes.php configuration file and are structured to provide flexible, reusable design systems.

The Default Admin Theme

Trongate ships with a built-in 'admin' theme, which serves as an excellent example of the theming system's capabilities. This theme is implemented through the admin() method in the Templates class:

While this method appears similar to standard template loading, it actually triggers Trongate's theme loading mechanism, pulling resources from the themes directory rather than the standard templates directory.

Theme Configuration

Themes are defined in config/themes.php. Here's how the admin theme is configured:

The configuration specifies:

• dir: The theme's directory path relative to the themes directory
• template: The primary template file for the theme

Color Scheme Management

The admin theme demonstrates one of Trongate's powerful theming features: easy color scheme switching. By modifying the dir path from default_admin/blue to default_admin/red, you can instantly switch the entire admin interface to a different color scheme.

Theme Structure

A typical Trongate theme directory contains:

• Template files (.php)
• Stylesheets (.css)
• JavaScript files (.js)
• Theme-specific assets (images, fonts, icons)
• Color scheme variations

This structured approach allows themes to provide comprehensive design solutions while maintaining clean separation between different visual aspects of your application.