CSS Variables | CSS Custom Properties for Variables & Components

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. Refer to Ionic Variables for more information on the global variables Ionic provides.
When using the Ionic CLI to start an Angular, React or Vue 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. Refer to Ionic Variables for more information on the component-level variables Ionic provides.
CSS variables can also be changed via JavaScript using setProperty():
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 #36454f.
The value of a CSS variable can be read in JavaScript using getPropertyValue():
Ionic provides variables that exist at the component level, such as --background and --color. For a list of the custom properties a component accepts, view the CSS Custom Properties section of its API reference. For example, refer to the Button CSS Custom Properties.
There are several global variables that Ionic provides in order to make theming an entire application easier. For more information, refer to Colors, Themes and Advanced Theming.