Ionic provides several global variables that are used throughout components to change the default theme of an entire application. Application Colors are useful to change the look of most of the Ionic components, and Stepped Colors are used as variations in some of the Ionic components.
The application colors are used in multiple places in Ionic. These are useful for easily creating dark themes or themes that match a brand.
It is important to note that the background and text color variables also require a rgb variable to be set in
rgb format. See
The Alpha Problem for an explanation of why the
rgb property is also needed.
||Background color of the entire app|
||Background color of the entire app, rgb format|
||Text color of the entire app|
||Text color of the entire app, rgb format|
||Color of the Backdrop component|
||Opacity of the Backdrop component|
||Background color of the overlays|
||Box shadow color|
||Background of the Tab Bar|
||Background of the focused Tab Bar|
||Border color of the Tab Bar|
||Color of the Tab Bar|
||Color of the selected Tab Button|
||Background of the Toolbar|
||Border color of the Toolbar|
||Color of the components in the Toolbar|
| ||Color of the Segment Buttons in the Toolbar|
||Color of the checked Segment Buttons in the Toolbar|
| ||Background of the Segment Buttons in the Toolbar|
||Background of the Segment Buttons in the Toolbar|
||Color of the Segment Button indicator in the Toolbar|
| ||Background of the Item|
| ||Border color of the Item|
| ||Color of the components in the Item|
| ||Color of the placeholder in Inputs|
After exploring different ways to customize the Ionic theme, we found that we couldn't use just one background or text color. In order to imply importance and depth throughout the design, we need to use different shades of the background and text colors. To accommodate this pattern, we created stepped colors.
While updating the background (
--ion-background-color) and text (
--ion-text-color) variables will change the look of the app for most components, there are certain Ionic components where it may look off, or broken. This will be more apparent when applying a darker theme.
In some components we use a shade darker than the background or lighter than the text. For example, an item heading text may need to be
By default, the Ionic stepped colors start at the default background color value
Stepped Color Generator
Create a custom background and text color theme for your app. Update the background or text color’s hex values below, then copy and paste the generated code directly into your Ionic project.