The App Maker editor and user apps will be shut down on January 19, 2021. New application creation is disabled. Learn more


The Style panel lets you customize the look and feel of your app. You can set themes, choose between widget variants, and even create your own styles.

Global Style: style multiple widgets at once

Set an app-wide style with themes

The theme selector at the top of the Styles tab controls the default appearance of widgets in your app. App Maker currently has two themes:

  • Material: A theme that implements Material Design, the standard Google visual style. Use this theme to build apps that look like Google favorites like Inbox or Keep.

  • Plain: A simpler theme that provides a generic look and feel. Build on to the plain theme to develop your own unique visual style.

Customize widgets with CSS

If you want to tweak Material widgets or spruce up the Plain theme, you can customize widgets by writing your own Cascading Style Sheets, or CSS.

App Maker widgets and their sub-components have built-in CSS classes with app- as a prefix, followed by their names. To change widgets' appearance, add your own CSS to these classes using the text area below the theme selector. Example:

/* Adds rounded corners to button widgets */
.app-Button {
  border-radius: 10px;

/* Sets font size for rows in list panels */
.app-ListPanelRow {
  font-size: 1.2em;

You can also use the full range of CSS selectors to style your app:

/* Turns off link underlines. */
.app-Link:link {
  text-decoration: none;

/* Changes color of disabled buttons. */
.app-Button[disabled] {
  background-image: none;
  background-color: white;

Style for different screen sizes

Users might access your app from devices with large or small screens. You can improve their experience with your app by including responsive design, which changes the layout depending on the screen size (also called screen resolution).

To automatically adjust the layout for different screen sizes, use media queries in your global CSS. For an introduction to responsive design, see Responsive Web Design Basics. For an example, see Responsive layout grid.

Test your size-specific styles in the page editor

To test your styling, you can resize the canvas manually or apply a specific screen resolution. Changing the resolution in the page editor doesn't affect your published apps and other developers won't see the changes. You can refresh the page to return the canvas to the original custom size.

To select a specific screen resolution, at the top of the page editor click Device resolutions .

You can see the screen size of the canvas in the upper-right corner, unless you select Custom resolution, in which case the custom size is in the property editor in the dimension values.

Manage screen resolutions

To add a screen resolution, click Device resolutions and click Add resolution. Or, you can click Settings App SettingsAdd Resolution.

To edit and delete screen resolutions, go to Settings App Settings and locate the Viewport resolutions section. Point to the resolution that you want to edit or delete and click Edit or Delete .

Widget Style: style a single widget

Widget themes

Use the theme picker to easily apply styles to widgets. Select a widget and choose from a list of themes in the drop-down in the action bar.

Theme picker

The Material theme comes with multiple variants for most widgets. For example, panel widgets have a Paper variant that looks like a piece of white paper, a Transparent variant that shows widgets below the panel, and many more.

Widget-specific CSS

The Style tab has a text area to enter custom CSS, so you can tweak a selected widget's style to your exact specifications. Widget styles also have the prefix .app- followed by the name of the page the widget is located on then the name of the widget itself. When the widget is selected it shows up at the top of the auto-complete popup.


/* Changes color of SampleButton1 to yellow */
.app-NewPage-SampleButton1 {
  background-image: none;
  background-color: yellow;

/* Sets font in SampleListPanel1's rows to bold */
.app-NewPage-SampleListPanel1Row {
  font-weight: bold;

Custom variants

App Maker also lets you create your own variants. To make a variant, use the CSS section of the Styles tab, and create a class with a name in the format app-[WidgetType]--[VariantName]. Example:

.app-Button--RedButton {
  background-image: none;
  background-color: red;

Once you've created an appropriately-named class, your variant appears in the Variant drop-down in the action bar when that widget is selected.

Extra styles with the styles property

You can add styles to widgets outside the Style panel using the styles property under Display in the Property Editor. Define a class under Style, and add it to the property. Styles assigned this way don't need the usual app- prefix. Example:

.specialSubmitButton {
  background-image: none;
  background-color: red;