Additional Theming Options

Find out what additional options are available for theming Ionic applications.

We'll cover the following

Other Ionic theming options

Ionic also provides developers with the ability to modify theme variables that are used across multiple components.

These theme variables can be grouped under the following categories:

  • Application Colors: Used in multiple places throughout an Ionic project, like tab bar colors, border colors, backdrop color, and so on
  • Stepped Colors: Uses color steps (subtle variations in change from one color to another color) to provide styling variations in UI appearance. These are used only with the--ion-text-color and --ion-background-color variables
  • Dark mode: Implement a custom dark color theme on an app-wide basis

Additionally, global variables are able to be used to change application-wide settings such as paddings and margins.

Styling Ionic with CSS shadow parts

The shadow DOM is a component-local DOM (meaning it is separate and hidden from the regular DOM) that encapsulates specific markup and styles to only that component.

This provides several benefits for developers, including:

  • Structure: Allows developers to structure their apps in distinct chunks rather than one large DOM structure, like a page
  • Isolated DOM: Regular DOM queries (for example, document.querySelector()) won’t be able to access nodes within the shadow DOM used by the web component
  • Scoped CSS: Styles scoped inside the shadow DOM of a web component do not “leak out” and styles outside of the shadow DOM do not “bleed in”
  • Simplified CSS: No naming conflicts (as styles will only affect the markup inside the web component), simpler selectors, and use of more generic naming conventions for classes and IDs
  • Composition: Create declarative markup for our component (for example to name the function of a component or identify its purpose – <drop-down-menu>, <scrollbar>, and so on)

Web components that follow the shadow DOM specification can allow developers to use CSS shadow parts to modify CSS properties on a shadow DOM Element from outside of that shadow DOM.

This is only possible if the shadow DOM element is exposed via a part attribute that developers can then access using the ::part() CSS pseudo-selector.

Within the documentation for Ionic components, simply look for the “CSS Shadow Parts” section to see which values exist for the part attribute for that component. For example, the ion-select component has the following CSS shadow parts.

In the case of the ion-select component, we might use CSS shadow parts to target the placeholder part like so:

Get hands-on with 1400+ tech skills courses.