Ionic components are built with CSS Variables for easy customization of an application. CSS variables allow a value to be stored in one place, then referenced in multiple other places. They also make it possible to change CSS dynamically at runtime (which previously required a CSS preprocessor). CSS variables make it easier than ever to override Ionic components to match a brand or theme.
CSS variables can be set globally in an application in the
:root selector. They can also be applied only for a specific mode. See Ionic Variables for more information on the global variables Ionic provides.
When using the Ionic CLI to start an Angular project, the
src/theme/variables.scss file is created where you can override the default Ionic Variables.
To set a CSS variable for a specific component, add the variable inside of its selector. See Ionic Variables for more information on the component-level variables Ionic provides.
The var() CSS function can be used to get the value of a CSS variable, along with any number of fallback values, if desired. In the below example, the
--background property will be set to the value of the
--charcoal variable, if defined, and if not it will use
Ionic provides variables that exist at the component level, such as
--color. For a list of the custom properties a component accepts, view the
CSS Custom Properties section of its API reference. For example, see the Button CSS Custom Properties.