The Ionic Conference App's theming and styling system is built around a hierarchy of style files, leveraging Ionic Framework's capabilities while adding custom elements specific to this application. This comprehensive system ensures a consistent visual language throughout the app.

The Theme Structure

At the heart of the theme structure lies a hierarchy of style files. The main configuration is defined in variables.scss, which is then imported and applied throughout the application. This file defines color variables, track colors, and platform-specific styles. Additionally, the app has two other primary styling files: global.scss imports Ionic core styles and defines app-wide styling, while app.scss contains minimal app-level styles.

Custom Color Palette

The app extends Ionic's default color palette with custom colors for specific features. Each custom color is defined with multiple variants (base, rgb, contrast, shade, tint) following Ionic's color pattern convention. This approach ensures a consistent visual language throughout the application.

Track Colors

Conference tracks, such as Angular and Design, each have their own unique color, defined in the variables.scss file. The app uses a SCSS list variable $tracks that contains all track names. An @each directive in component-specific SCSS files (like session-detail.scss) loops through this list to create class names that correspond to each track.

Dark Mode

The Ionic Conference App implements dark mode using Ionic's built-in dark mode theming system. The app uses a UI element to toggle the dark mode, adding or removing a class (ion-palette-dark) on the main ion-app element. This approach ensures a seamless transition between light and dark modes.

Platform-Specific Styling

The app provides different styling for iOS and Material Design platforms. The application detects the platform and applies the appropriate styling using CSS classes: .ios for iOS styling, and .md for Material Design (Android) styling. Components use these selectors to implement platform-specific visual treatments, maintaining the native look and feel on each platform.

Extending the Theme

To extend the theme with new colors or styles:

  • Add new color variables to variables.scss
  • Create CSS classes using the Ionic color convention
  • Apply the classes to components

For track colors specifically:

  • Add the new track name to the $tracks SCSS list in variables.scss
  • Add a corresponding color variable using the pattern --ion-color-[trackname]
  • Add the track to the tracks array in data.json

Style Linting Configuration

When developing new styles, the application includes configuration for style linting. The project uses stylelint with the stylelint-config-standard-scss configuration to ensure consistent SCSS code quality.

Benefits of Theming and Styling

The theming and styling system in the Ionic Conference App provides:

  • Consistent visual language through centralized color and style definitions
  • Support for platform-specific styling (iOS vs. Material Design)
  • Dark mode capabilities
  • Track-based color system for categorizing content
  • Extensible structure for adding new visual elements

This system follows Ionic Framework best practices while adding application-specific customizations that enhance the user experience.