---
sourceDocument: Brazil Build or modify applications
sourceDocumentLink: https://www.servicenow.com/docs/r/application-development

 Release :

    - brazil

ft:locale :

    - en-US

ft:publication_title :

    - Brazil Build or modify applications

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# Configure theme-level theming

# Configure theme-level theming {#ariaid-title1}

Release version: Brazil  
Updated October 5, 2026  
![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes to read  
Configure brand colors, shape, theme-owned fonts, logos, favicons, and mobile color mappings in a theme.js module. Theme-level values can vary by tenant or user without a change to component code or an app rebuild.

## Before you begin

Role required: admin

## About this task

If a value must stay fixed for every deployment of the app, configure it at the app level instead. For instructions, see [Configure app-level theming](https://www.servicenow.com/docs/Y7PSF7cvWpNpzZKSyOihXA "Configure app-level CSS for styles that belong to the app and must stay the same regardless of the tenant or user-resolved theme. Lux supports two optional files for this, tailwind.app.css and head.app.css.").

## Procedure

1. Declare the theme in theme.js  
   Create theme.js at the app root, alongside aiux.json, and export an object literal.

   The following example includes the theme's fields. Replace the sample attachment sys IDs and font paths with values from your instance and app.

       // theme.js
       export const AppTheme = {
         primary_color: '#032D42',
         accent_color: '#63DF4E',

         neutral_colors: {
           use_hex_value: true,
           hex_value: '#F8F7F4'
         },

         shape: {
           selector_radius: '0.75rem',
           field_radius: '0.5rem',
           boxes_radius: '1rem',
           border_width: '1px'
         },

         fonts: [
           {
             name: 'Demo Grotesk',
             faces: [
               {
                 src: 'public/fonts/DemoGrotesk.woff2',
                 format: 'woff2',
                 weight: '100 900',
                 style: 'normal',
                 display: 'swap',
                 unicode_range: 'U+0000-00FF',
                 preload: true
               },
               {
                 src: 'https://cdn.example.com/fonts/DemoGrotesk-Italic.woff2',
                 format: 'woff2',
                 weight: '400',
                 style: 'italic',
                 display: 'swap',
                 preload: false
               }
             ]
           }
         ],

         mobile_color_variables: {
           'text-primary': '--color-text-primary',
           'surface-primary': '--primary-600',
           'text-on-primary': '--matched-primary-content',
           'custom-background': '#ffffff'
         },

         light_logo: 'aaaaaaaa11111111bbbbbbbb22222222',
         dark_logo: 'cccccccc33333333dddddddd44444444',
         light_favicon: 'eeeeeeee55555555ffffffff66666666',
         dark_favicon: '11111111aaaaaaaa22222222bbbbbbbb'
       };

   For the values each field accepts and what it generates, see [Theme field reference](https://www.servicenow.com/docs/cK1QvT9S7346IcSg4CwP3Q "The fields of a theme.js theme object set brand colors, neutral colors, shape, fonts, mobile color mappings, logos, and favicons. Each field's value determines the tokens and document resources that the theme generates.").  
   Important:  
   Use a theme.js module that exports an object literal, not theme.json. The build parses this module to produce the app's `sys_aix_theme` record, and it doesn't read a theme.json file in a Lux app.
2. Connect the theme to the app  
   Import the theme in application.js and export it as `appTheme`:

       // application.js
       import {AppTheme} from './theme.js';

       export default {
         appTheme: AppTheme,
         applicationLayout: 'aiux-nav-layout'
       };

   If the app has no lifecycle module, set the theme on the layout class instead:

       // pages/layout.js
       import {AIUXAppLayoutElement} from '@servicenow/aiux-components-core';
       import {AppTheme} from '../theme.js';

       export default class AppLayout extends AIUXAppLayoutElement {
         static appTheme = AppTheme;
       }

   A theme provisioned on the instance takes precedence over the file-based app theme. For file-based configuration, application.js takes precedence over the layout static. If none is configured, Lux uses its default theme.
3. Register a theme-owned font  
   Use `fonts` when a typeface belongs to the tenant's brand and should be replaceable without a change to app source. Declare each family with one or more faces:

       fonts: [
         {
           name: 'Demo Grotesk',
           faces: [
             {
               src: 'https://cdn.example.com/fonts/DemoGrotesk.woff2',
               format: 'woff2',
               weight: '100 900',
               preload: true
             }
           ]
         }
       ]

   The `fonts` field registers font faces but doesn't select a family for components.

   For a font that ships with the app and is identical for every tenant, register it in head.app.css instead, as described in [Configure app-level theming](https://www.servicenow.com/docs/Y7PSF7cvWpNpzZKSyOihXA "Configure app-level CSS for styles that belong to the app and must stay the same regardless of the tenant or user-resolved theme. Lux supports two optional files for this, tailwind.app.css and head.app.css.").

## Verify {#configure-theme-level-theming__configure-theme-level-theming-verify}

* Build and deploy the app, then confirm that a primary-colored control uses the configured brand color.
* Switch between light and dark modes and verify that text, surfaces, logos, and controls keep sufficient contrast.
* If the theme doesn't appear, confirm that theme.js is exported as `appTheme` before checking individual fields.
* For a custom font, confirm that the face loaded and that any expected preload was emitted.
* For a mobile mapping, inspect the mobile theme response and confirm that the semantic name resolves to light and dark values.

## Examples {#configure-theme-level-theming__configure-theme-level-theming-examples}

The examples/custom-font-theme app demonstrates a font supplied by the theme.