Apply UI theming

This guide walks you through applying a custom theme to your navigation application, from export to implementation.

Prerequisites

Before you begin, make sure you have access to the following resources:

• Automotive UI Toolkit — The Figma file containing the design system components and Tokens Studio configuration
• Visual Assets — The Figma file containing icons, images, and other visual assets
• Tokens Studio plugin — Installed and configured in Figma
• GitHub access — Permission to clone and run the RRO script repository

Step 1: Finish up your theme in Figma

In the Automotive UI toolkit, you find all necessary instructions to create your custom UI theme. Before exporting, review your theme in the UI Toolkit to ensure all token values are finalized. Verify that your customizations display correctly across the components in Figma.

Step 2: Export your theme files

Export design tokens

Once you are satisfied with your theme customizations, export your tokens from Tokens Studio. Use the Export function and select the option to export as multiple JSON files. This ensures each token set is exported as a separate file, which is required for the build process.

Export visual assets

Open the Visual Assets Figma file and export the assets you have replaced with your own. Make sure the exports follow the naming conventions and file formats preset in the file.

Prepare your fonts

If your theme uses custom fonts, ensure you have the font files ready in the required formats. Include all necessary font weights and styles.

The recommended approach is to provide a font file containing only Latin characters through the RRO mechanism, keeping the memory footprint minimal. For other scripts (such as Cyrillic, Arabic, or CJK), the application relies on the Android OS font fallback mechanism to supply the appropriate glyphs.

Step 3: Apply the theme

With your JSON files, assets, and fonts ready, you can now apply the theme to your application using the RRO (Runtime Resource Overlay) script.

The RRO script and detailed instructions are currently in private preview and only available on request. Please reach out to request it.

Next steps

After creating the RRO and applying it to the application, test your custom theme thoroughly on your target devices to ensure all visual elements render correctly. Pay special attention to contrast ratios and legibility across different screen sizes and lighting conditions.