New to Kinvey? Get started today with this tutorial or attend our getting started webinar.

App Appearance

Kinvey Studio provides various ways to customize the look and feel of your apps. Options range from choosing a global color theme to manually editing per-component CSS.

Changing the Color Theme

The global color theme determines the color palette applied to components, backgrounds, highlights, graphs an so on. You can choose a color theme for web and mobile separately.

Web

The web color themes represent themes created using Kendo UI ThemeBuilder. You can choose from a variety of predefined themes or import your own.

To select a predefined color theme:

  1. Open your app in Kinvey Studio.
  2. In the left-side navigation, click Themes > Web Theme.
  3. In the Theme list, click a color scheme to see a preview.
  4. When you are happy with your selection, click Save.

To import a color scheme created in Kendo UI ThemeBuilder:

  1. Unzip the Kendo UI ThemeBuilder theme in an empty folder.
  2. Open your app in Kinvey Studio.
  3. In the left-side navigation, click Themes > Web Theme.
  4. Click Import ThemeBuilder Theme.

    If you don't have a theme ready, click Go to Kendo UI ThemeBuilder to open the web-based Kendo UI ThemeBuilder and create one.

  5. Select the .css file from the theme.

    You theme appears on at the bottom of the Themes list.

  6. In the Themes list, click the theme to preview it.

  7. When you are happy with your selection, click Save.

Mobile

Kinvey Studio provides a variety of predefined mobile color themes.

To select a predefined color scheme:

  1. Open your app in Kinvey Studio.
  2. In the left-side navigation, click Themes > Mobile Theme.
  3. In the Theme list, click a color scheme to see a preview.
  4. When you are happy with your selection, click Save.

Editing Component Styles

When changing the global color theme is not enough to achieve the look and feel that you are after, you can write your own CSS styles and apply them to a separate web or mobile component.

For deeper understanding of component styling, check the Angular styling documentation in addition to the information below.

Applying Scoped Styles

Certain use-case scenarios require you to scope your CSS to a certain view. Examples include avoiding the pollution of the global scope with names, avoiding any conflicting CSS cascades and accidental overrides, achieving encapsulation and modularity, and creating smaller, easier-to-read CSS files.

Scoped styles are suitable for adding view-specific implementations that are not intended to be used by other views. The CSS rules that you write for a view, no matter how general, do not leak out.

Global styles that are defined in app.custom.css or in custom themes affect all views.

Kinvey Studio provides two ways of applying scoped styles: using GUI tools to change the basic appearance or writing your own CSS code.

  1. Open your app in Kinvey Studio.
  2. Enter a module and then select the view containing the component that you want to style.
  3. In the Design editor, select the component.
  4. In the Inspector, click the Styles tab and use the graphical tools to alter basic visual parameters.
  5. For advanced effects, do the following:

    1. Switch to the Code editor.
    2. In the list of files, select the view's .css file.
    3. Create your CSS classes and save the file.
    4. Go back to the Design editor and select the component that you want to style.
    5. On the Inspector's Properties tab, enter the relevant CSS classes in the CSS Class List text box, separated by spaces.

      Example: .message .main-list

In case you are using an external IDE or code editor, write your styles in the stylesheet file that Kinvey Studio outputs in the view folder when generating an application. It has the following path:

<app base folder>/src/app/modules/<module name>/<view name>/<view name>.component[.tns].css

Where:

  • <app base folder> is the folder where you created the Kinvey Studio application
  • <module name> is the name of the module where you created the view
  • <view name> is the development name (not the display name) of the view
  • [.tns] is only there for mobile views

Examples:

* Mobile view: `vehicles-mobile.component.tns.css`
* Web view: `vehicles-web.component.css`

Applying Global Styles

For primitives and styles that apply to multiple components across the application, use the global stylesheet files. Use your text editor or IDE of choice to edit the files. The .css files are located in your project's src/app/ folder.

  • app.custom.css—use for web components
  • app.custom.tns.css—use for mobile components

Do not modify the CSS files located directly under src. They are overwritten each time you generate the application, meaning you will lose any changes you make to them.

  1. Create CSS classes in app.custom.css or app.custom.tns.css depending on the target platform.
  2. Open your app in Kinvey Studio.
  3. Enter a module and then select the view containing the component that you want to style.
  4. In the Design editor, select the component.
  5. On the Inspector's Properties tab, enter the CSS classes selectors that you created in the CSS Class List text box, separated by spaces.

    Example: .message .main-list

Got a question?