Modifying a style for different UI elements

Every UI element in the App SDK has formatting defined by attributes like color, border size, and corner radius. Copy the element's default style and modify it to change the way it looks. You can modify the style that the App SDK uses for a UI element in all views or in just a single view.

When you change the definition of a "styles" object at the top level of your UI configuration file, the App SDK applies that new style in all views unless you override it with a modified definition of that style that is nested inside a view object.

To modify the style for all occurrences of the UI element:

Modify the "styles" object at the top level of your UI configuration file. This is the best solution to use, because it makes it easy to keeps consistent style throughout your app.

To modify the style for only those occurrences of the UI element inside a specific view:

Copy the "styles" object from the top level of your UI configuration file and paste it nested inside the specific view object. Any modifications you make to that pasted style only apply to the specific view in which it is nested.

For example, if you want all of your titles to be a color different from the default, change the value of the corresponding attribute that is nested inside the "title" object that is nested inside the "styles" object.

{   ...
    "styles":{
        "title":{
            "text_color":"#313944"
        }
    },
    ...
}

But if you want only the title in the Select Account view to be a color different from the default, then change the value of the corresponding attribute inside the "select_account_view" object.

{   ...
    "views":{
        "select_account_view":{
            "styles":{
                "title":{
                    "text_color":"#333945"
                }
            }
        }
    },
    ...
}

This section begins by describing each view, then continues with a list of each style together with its description, its default display, and the default style definition.

Views in the App SDK

Inside the UI Configuration File, each view is represented by an object with a name that ends in "_view". All view objects must be enclosed in a "views" object.

sign_in_view and user_name_view

methods_view

sign_in_page_view and sign_in_container_view

sign_in_app_view

The following is a complete list of views displayed by the App SDK.

View Name	Description
adaptive_view	A view presenting a list of adaptive authenticators. The adaptive authenticators include email, phone number and photo ID.
confirmation_view	A pop-up dialog used to authorize a transaction and also used to authenticate with Yes/No.
confirm_otp_view	A view for confirming the email address or phone number provided on the input_otp_view.
fed_app_view	In nnlfedapp, this is the registration page.
fido_view	A view presenting a list of FIDO authenticators.
fingerprint_view	The view of the Fingerprint/Touch ID/Face ID authenticator.
input_otp_view	A view for providing an email address or phone number.
manage_regs_view	A view presenting the list of already registered authenticators. It allows the user to modify the authenticators.
message_bar_view	A view that displays error messages.
methods_view	The second page of the sign-in widget. It contains a list of authentication methods, including one with a password.
oob_notification_view	Not an actual view. A level containing the strings shown in the notification for OOB authentication.
oob_view	A view for registering/authenticating with a QR code.
otp_view	Not an actual view. This is an umbrella level that encloses otp-related views (input_otp_view, confirm_otp_view, provide_otp_view).
pending_auths_view	A view presenting a list of sign-in/transaction requests that are pending to be authorized.
pin_view	The view of the PIN authenticator.
progress_bar_view	A view that contains the progress bar indicator.
provide_otp_view	A view for providing the one time password received on the provided email address or phone number.
registration_view	Not an actual view. This is an umbrella level that encloses all registration-related views (fido_view, adaptive_view, manage_regs_view, rename_registration_view, remove_registration_view).
remove_registration_view	A pop-up dialog to confirm the deregistration of an authenticator.
rename_registration_view	A pop-up dialog to rename a registered authenticator.
scan_view	The camera view for scanning a QR code.
select_account_view	A view for selecting a user from the list of accounts.
select_asm_view	A view for selecting a FIDO authenticator from the list of registered authenticators to use for authentication.
select_fido_client_view	A view for selecting a remote client authenticator.
session_reminder_view	A view that is shown before the login session expires to either update the login session or to logout.
sign_in_view	Displayed when the user is signing in. Contains the user_name_view and/or the methods_view.
sign_in_app_view	In nnlsignin app, this is the entire sign-in page.
sign_in_container_view	In the Cloud Console, this is a subview of the sign_in_page_view that contains the sign_in_view.
sign_in_page_view	In the Cloud Console, this is the entire sign-in page.
sign_up_method_view	A pop-up dialog for registering an authentication method during sign up.
sign_up_view	The view for signing up a new user.
suggest_reg_view	The dialog presented to a new user after authentication, suggesting to register a passwordless authentication method.
try_fido_view	A view suggesting to the user that they might have a registered passkey and can try to authenticate with one.
user_name_view	Displayed inside sign_in_view. Contains the username input field and a button to proceed to authentication.
watch_auth_view	Not an actual view. A level containing the messages shown in alerts or error messages for the watch authenticator.

One "_view" object is nested inside another "_view" object in the UI Configuration file so that the inner level "_view" object uses the same "styles" object as the outer level "_view" object uses. This nesting does not determine that the inner "_view" is displayed inside the outer "_view" in your app.

Specifying a Color

Color must be specified using only RGB or ARGB values. If only 6 hex digits are present, the color is interpreted as an RGB value. If there are 8 hex digits, the first 2 hex digits are interpreted as the alpha, or opacity, of the color represented by the RGB value in the remaining 6 hex digits.

# 40333945

In the example above Alpha = 40, Red = 33, Green = 39, Blue = 45. All values are represented in hexadecimal.

Text Style for a User Input Field

User input fields have their own configurable style defined for them by a "styles" object named "input". This "styles" object can contain the following attributes:

text_color
dark_text_color
background_color
dark_background_color
border_color
border_size
corner_radius

Default display:

Default style definition:

"styles":{
    "input":{
        "background_color":"#00000000",
        "dark_background_color":"#00000000",
        "border_size":2,
        "border_color":"#8F8F8F",
        "dark_border_color": "#D5D3D3",
        "corner_radius":10,
        "text_color":"#313940",
        "dark_text_color":"#ffffff"
    },
    ...
}

Text Style for a Static Text Field

Each type of static text has its own configurable "styles" object defined for it. Below is the "manage_regs_view". The red callouts identify the "styles" object that applies to the static text.

manage_regs_view

Below is the "sign_up_method_view". The red callouts identify the "styles" object that applies to the static text.

sign_up_method_view

This section lists predefined static text styles, and describes the type of text that each "styles" object applies to.

"title"

The title is the static text appearing at the top of a view.

Default style definition:

"styles":{
    "title":{
        "text_color":"#313940",
        "dark_text_color": "#ffffff"
    },
    ...
}

"subtitle"

The subtitle usually follows the title and describes the view.

Default style definition:

"styles":{
    "subtitle":{
        "text_color":"#313940",
        "dark_text_color": "#ffffff"
    },
    ...
}

"heading"

The heading is at the top of a secondary view like cells and rows.

Default style definition:

"styles":{
    "heading":{
        "text_color":"#313940",
        "dark_text_color": "#C9C9C9"
    },
    ...
}

"subheading"

The subheading follows a heading and contains a description.

Default style definition:

"styles":{
    "subheading":{
        "text_color":"#827D7D",
        "dark_text_color": "#ffffff"
    },
    ...
}

"text"

This style applies to normal text.

Default display:

Default style definition:

"styles":{
    "text":{
        "text_color":"#313940",
        "dark_text_color": "#ffffff"
    },
    ...
}

"error_text"

This style applies to user messages that indicate an error.

Default display:

Default style definition:

"styles":{
    "error_text":{
        "text_color":"#AF272F",
        "dark_text_color": "#FDB9BB"
    },
    ...
}

Button Styles

There are five styles that apply to buttons. One additional style applies to buttons on an iOS navigation bar. Each "styles" object applies to a different type of button. This section lists the five predefined button styles, and describes the buttons that each button style applies to.

Each button style can contain the following attributes:

text_color
background_color
disable_color
border_color
border_size
corner_radius
text_alignment

Note that the text displayed on a button is specified by the "strings" object.

"prominent_button"

This style applies to buttons that you want to stand out visually. A view can have any number of prominent buttons.

Default display:

Default style definition:

"styles":{
    "prominent_button":{
        "background_color":"#AF272F",
        "disable_color":"#40AF272F",
        "text_color":"#FFFFFF",
        "corner_radius":10
    },
    ...
}

"main_button"

This style applies to primary buttons that trigger the main function of the dialog.

Default display:

Default style definition:

"styles":{
    "main_button":{
        "background_color":"#313940",
        "text_color":"#ffffff",
        "corner_radius":10,
        "text_alignment":"center"
    },
    ...
}

"basic_button"

Specifies the style for other buttons that don't stand out in a view. A view has any number of basic buttons.

Default display:

Default style definition:

"styles":{
    "basic_button":{
        "background_color":"#ECECEC",
        "dark_background_color": "#BEBEBE",
        "text_color":"#313940",
        "corner_radius":10,
        "text_alignment":"center"
    },
    ...
}

"cancel_button"

Specifies the style for cancel buttons. A view has at most one cancel button.

Default display:

Default style definition:

"styles":{
    "cancel_button":{
        "text_color":"#AF272F",
        "dark_text_color": "#F1C3C3"

    },
    ...
}

"minor_button"

Currently the only button that this style applies to is the Never ask me again button, displayed during the Suggest Registration UI. This "minor_button" is secondary to the "cancel_button" which is labeled Not now by default.

Default display:

Default style definition:

"styles":{
    "minor_button":{
        "text_color":"#313940",
        "dark_text_color": "#FFFFFF"
    },
    ...
}

View Styles

A view is a fragment of the user's screen. One view can be nested inside another view and have overlapping borders. There are three different styles that apply to views on all platforms. The "styles" object called "view_background" applies to main views. The "styles" object called "row_background" applies to rows in a list. The "styles" object called "dialog_background" applies to pop-up dialog boxes. This section describes these view styles and what they apply to.

The entire view above is generated by Tutorial App and is not customizable with JSON. The "methods_view" is nested inside the "sign_in_view".

There are four additional styles that apply to views appearing in iOS apps only. See "keypad_background", "nav_bar_background", "nav_bar_button" and "nav_bar_title" for more information.

"view_background"

This style applies to a main view that might contain other views. It only specifies the background color of the view. The style called "view_background" is pictured here. It has five views styled with "row_background" embedded in it.

Default display:

adaptive_view and fido_view

Default style definition:

"styles":{
    "view_background":{
        "background_color":"#00000000",
        "dark_background_color": "#00000000"
    },
    ...
}

"row_background"

This style specifies how rows in a list look. This style can contain the following attributes:

background_color
corner_radius
border_size
border_color

Default display:

Default style definition:

"styles":{
    "row_background":{
        "background_color":"#FFFFFF",
        "dark_background_color": "#999999",
        "corner_radius":10
    },
    ...
}

"dialog_background"

This style applies to pop-up dialog boxes. This style can contain the following attributes:

background_color
corner_radius
border_size
border_color

Default display:

suggest_reg_view

Default style definition:

"styles":{
    "dialog_background":{
        "background_color":"#FFFFFF",
        "dark_background_color": "#555555",
        "corner_radius":10
    },
    ...
}

Other Styles

There are six additional "styles" objects:

"toggle" applies to all platforms
"progress_bar" applies to all platforms
"keypad_background" applies only on iOS
"nav_bar_background" applies only on iOS
"nav_bar_button" applies only on iOS
"nav_bar_title" applies only on iOS

This section describes these six styles and what they apply to.

"toggle"

This style specifies the different colors and shapes in an on/off switch. Currently this is used only on the "manage_regs_view" to show the enabled/disabled state of FIDO authenticators.

Default display:

Default style definition:

"styles":{
    "toggle":{
        "thumb_enable_color": "#313940",
        "thumb_disable_color": "#656B70",
        "track_enable_color": "#00000000",
        "track_disable_color": "#00000000",
        "background_color": "#00000000",
        "corner_radius": 16,
        "border_color": "#313940",
        "border_size": 1
    },
    ...
}

"progress_bar"

This style is nested inside the "styles" object inside the "progress_bar_view". Modify this style to specify the color of the progress bar indicator.

Default display:

progress_bar_view

Default style definition:

"progress_bar_view":
    "styles":{
        "progress_bar":{
            "progress_bar_color":"#FFFFFF",
            "dark_progress_bar_color": "#CC000000",
            "corner_radius": 10
        },
        ...
    }
}

"keypad_background"

Only applies to an iOS app.

This style specifies the background color of the PIN keypad on iOS devices. This style object must be nested inside the "styles" object that is inside the "pin_view" object.

Default display:

Default style definition:

"pin_view":{
    "styles":{
        "keypad_background":{
            "background_color":"#FFFFFF"
        }
    }...
}

"nav_bar_background"

Only applies to an iOS app

This style specifies the background color for the navigation bar.

Default display:

Default style definition:

"styles":{
    "nav_bar_background":{
        "background_color":"#313940"
    },
    ...
}

"nav_bar_button"

Only applies to an iOS app.

This style specifies the text color for buttons on the navigation bar. See the Back button:

Default display:

Default style definition:

"styles":{
    "nav_bar_button":{
        "text_color":"#F9F9F9"
    },
    ...
}

"nav_bar_title"

Only applies to an iOS app.

This style specifies the color for the title of a navigation bar. See Enter your PIN:

Default display:

Default style definition:

"styles":{
    "nav_bar_title":{
        "text_color":"#F9F9F9"
    },
    ...
}

Modifying a style for different UI elements

Views in the App SDK

sign_in_view and user_name_view

methods_view

sign_in_page_view and sign_in_container_view

sign_in_app_view

Specifying a Color

Text Style for a User Input Field

Text Style for a Static Text Field

manage_regs_view

sign_up_method_view

"title"

"subtitle"

"heading"

"subheading"

"text"

"error_text"

Button Styles

"prominent_button"

"main_button"

"basic_button"

"cancel_button"

"minor_button"

View Styles

"view_background"

adaptive_view and fido_view

"row_background"

"dialog_background"

suggest_reg_view

Other Styles

"toggle"

"progress_bar"

progress_bar_view

"keypad_background"

"nav_bar_background"

"nav_bar_button"

"nav_bar_title"

Resources