Themes

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.

Application Colors

The application colors are used in multiple places in Ionic. These are useful for easily creating dark palettes 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.

Name	Description
--ion-background-color	Background color of the entire app
--ion-background-color-rgb	Background color of the entire app, rgb format
--ion-text-color	Text color of the entire app
--ion-text-color-rgb	Text color of the entire app, rgb format
--ion-backdrop-color	Color of the Backdrop component
--ion-backdrop-opacity	Opacity of the Backdrop component
--ion-overlay-background-color	Background color of the overlays
--ion-border-color	Border color
--ion-box-shadow-color	Box shadow color
--ion-tab-bar-background	Background of the Tab Bar
--ion-tab-bar-background-focused	Background of the focused Tab Bar
--ion-tab-bar-border-color	Border color of the Tab Bar
--ion-tab-bar-color	Color of the Tab Bar
--ion-tab-bar-color-selected	Color of the selected Tab Button
--ion-toolbar-background	Background of the Toolbar
--ion-toolbar-border-color	Border color of the Toolbar
--ion-toolbar-color	Color of the components in the Toolbar
--ion-toolbar-segment-color	Color of the Segment Buttons in the Toolbar
--ion-toolbar-segment-color-checked	Color of the checked Segment Buttons in the Toolbar
--ion-toolbar-segment-background	Background of the Segment Buttons in the Toolbar
--ion-toolbar-segment-background-checked	Background of the Segment Buttons in the Toolbar
--ion-toolbar-segment-indicator-color	Color of the Segment Button indicator in the Toolbar
--ion-item-background	Background of the Item
--ion-item-border-color	Border color of the Item
--ion-item-color	Color of the components in the Item
--ion-placeholder-color	Color of the placeholder in Inputs

Stepped Colors

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 palette.

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 #404040, which is a few shades lighter than our default text color. Meanwhile, the loading component background is a shade darker than white, using #f2f2f2. We use stepped colors in order to define these slight variations. It is important to update the stepped colors when updating the background or text color of an application.

Ionic provides separate step colors for text and background colors so they can be updated separately. This is useful for components that use both text and background stepped colors and allows us to effectively implement the high contrast palette.

By default, the Ionic text stepped colors start at the default text color value #000000 and mix with the background color value #ffffff using an increasing percentage. The Ionic background stepped colors start at the default background color value #ffffff and mix with the text color value #000000 using an increasing percentage. The full list of stepped colors is shown in the generator below.

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.

Background

Text

:root {
	--ion-background-color: #ffffff;
	--ion-background-color-rgb: 255,255,255;

	--ion-text-color: #000000;
	--ion-text-color-rgb: 0,0,0;

	--ion-text-color-step-50: #0d0d0d;
	--ion-text-color-step-100: #1a1a1a;
	--ion-text-color-step-150: #262626;
	--ion-text-color-step-200: #333333;
	--ion-text-color-step-250: #404040;
	--ion-text-color-step-300: #4d4d4d;
	--ion-text-color-step-350: #595959;
	--ion-text-color-step-400: #666666;
	--ion-text-color-step-450: #737373;
	--ion-text-color-step-500: #808080;
	--ion-text-color-step-550: #8c8c8c;
	--ion-text-color-step-600: #999999;
	--ion-text-color-step-650: #a6a6a6;
	--ion-text-color-step-700: #b3b3b3;
	--ion-text-color-step-750: #bfbfbf;
	--ion-text-color-step-800: #cccccc;
	--ion-text-color-step-850: #d9d9d9;
	--ion-text-color-step-900: #e6e6e6;
	--ion-text-color-step-950: #f2f2f2;

	--ion-background-color-step-50: #f2f2f2;
	--ion-background-color-step-100: #e6e6e6;
	--ion-background-color-step-150: #d9d9d9;
	--ion-background-color-step-200: #cccccc;
	--ion-background-color-step-250: #bfbfbf;
	--ion-background-color-step-300: #b3b3b3;
	--ion-background-color-step-350: #a6a6a6;
	--ion-background-color-step-400: #999999;
	--ion-background-color-step-450: #8c8c8c;
	--ion-background-color-step-500: #808080;
	--ion-background-color-step-550: #737373;
	--ion-background-color-step-600: #666666;
	--ion-background-color-step-650: #595959;
	--ion-background-color-step-700: #4d4d4d;
	--ion-background-color-step-750: #404040;
	--ion-background-color-step-800: #333333;
	--ion-background-color-step-850: #262626;
	--ion-background-color-step-900: #191919;
	--ion-background-color-step-950: #0d0d0d;
}