Skip to content

Theme and CSS

This example shows how to customize the appearance of a mobile app (i.e., all purely graphical aspects). In an HTML environment, this is possible by modifying the style sheet settings, i.e., the CSS file.

How to modify your CSS

Note:

  • This example doesn't explain the (complex) rules of CSS file syntax. The goal is simply to show how to access them.

  • Only dynamic applications (Dashboard Editor) are covered here. However, the same methods can also be applied to static Apps, which also provide access to the application's general variables (icon, main colors, etc.).

Hardware

You don't need any hardware to run this demo.

The App

The app contains a page with two tabs. The first contains a push button, and the second a widget of type ionic value. Below, we'll see how to modify the appearance of these components.

UI Editor

Below we will distinguish between the global style of an object type and that of a specific component: a modification at the global level will apply to all objects of the same type, whereas the style specific to an object will only have an impact on that one.

Modifying a Specific Component

This method applies to basic components, not layout components. In the component's parameter list, the very last parameter is HTML class. If you define a class for this parameter, you can then edit the characteristics of that class in the CSS file. This is what is done for the item value component in the second tab. In this case, we specified the test_class class. We then had to go to the Theme section and click EDIT CODE. Here is the added code: 

.test_class {
    background: red;
}

Here, we only change the background color, but the CSS syntax allows you to make a thousand adjustments.

Modifying all components of a type

Modifying all components of a particular class requires knowing the class ID. Often, a component is associated with multiple classes defined in Ionic, and finding the class name isn't always easy. The best method is to open debug mode in your browser to analyze the list of classes it's associated with.

Debug with your browser

In order, you should:

  1. Open the debugger while you are in your browser (Chrome?) on Tap-Manager. Calling the debugger usually corresponds to the shortcut F12.

  2. In the debugger, click on the selection icon (usually in the top left corner of the menu bar).

  3. Then click on the element to analyze. Here, we would like to change the background color of the selected tab. So, click on it.

  4. Then, we retrieve the list of classes with which it is associated: mdc-tab mat-mdc-tab-link mat-mdc-focus-indicator multi-line-tab-label ng-star-inserted mdc-tab--active mdc-tab-indicator--active If, like the author of these lines, you are not an expert in Ionic, you will have to 'try' several classes. If you want to change the background color of the active tab, you can intuitively try:

    `mdc-tab--active 
mdc-tab-indicator--active`

It turns out that the first class is the correct one. So we add the following lines to the global CSS file:

`.mdc-tab--active {
    background-color: var(--ion-color-success);
    font-size: 1.1em;
    color: white;
}

This will change the color of the selected tab, slightly increase the text size, and finally (theoretically) set the text color to white.

In practice, everything works... except the text color. To find out how the text color is defined, you need to select more precisely and click on the text itself, not just on the tab. Analyzing the content, we find that the text style is defined by the rule below, to which we can add a color attribute:

`.mat-mdc-tab:not(.mat-mdc-tab-disabled).mdc-tab--active 
.mdc-tab__text-label, 
.mat-mdc-tab-link:not(.mat-mdc-tab-disabled).mdc-tab--active 
.mdc-tab__text-label {
    color: white !important;
}`

With this block added, we get what we want, and it will apply to all 'tabs' components in the project.

Data Flow Editor

There is not any data flow for this App.

Back to top