How to Add a Custom Theme Option Under User Preferences in the Now Mobile AppIssue <!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } This article describes how to add a new custom theme option that appears under Settings > Preferences > Theme in the Now Mobile app. By creating a UX Theme, UX Style (variant), and associating them via the M2M relationship, administrators can provide users with additional theme options in the mobile app. Release<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } Now Mobile Resolution<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } Step 1: Create a UX Theme In the Filter Navigator, type sys_ux_theme.list and press Enter.Click New to create a new UX Theme record.Enter a Name for the theme (e.g., "Mobile Coral").Configure any additional fields as needed.Click Submit to save the record. Step 2: Create a UX Style (Variant) In the Filter Navigator, type sys_ux_style.list and press Enter.Click New to create a new UX Style record.Enter a Name for the style (e.g., "My Custom Variant").Set the Type field to variant.In the CSS Variables section, define your custom color values. You can copy the CSS variables from an existing OOB style (e.g., the Polaris Dark style) and modify the color values to match your brand or desired look and feel.Click Submit to save the record. Step 3: Associate the Style with the Theme Open the UX Style record you just created.Scroll down to the UX Style - UX Theme (M2M) related list at the bottom of the form.Click New to create a new mapping record.Set the Style field to your newly created style (e.g., "My Custom Variant").Set the Theme field to your UX Theme created in Step 1 (e.g., "Mobile Coral").Click Submit to save the mapping. Step 4: Verify on the Now Mobile App Open the Now Mobile app on your device.If the app was already open, reload or restart it to pick up the new configuration.Navigate to Settings (gear icon) > Preferences > Theme.The new theme option should now appear in the list of available themes.Tap the new theme to apply it and verify the custom colors are displayed. Additional Information If the Theme option is not visible under Preferences, ensure the system property glide.ui.polaris.dark_themes_enabled is set to true.Custom themes created this way are considered customizations. Changes to OOB theme structures during upgrades may require re-validation of custom themes.For more information on mobile theming, refer to the ServiceNow product documentation: https://www.servicenow.com/docs/bundle/yokohama-mobile/page/administer/tablet-mobile-ui/task/enable-dark-theme.html Related Links ServiceNow Docs: Dark theme for mobile - https://www.servicenow.com/docs/r/mobile/mobile-dark-theme.htmlServiceNow Docs: Enable dark theme - https://www.servicenow.com/docs/bundle/yokohama-mobile/page/administer/tablet-mobile-ui/task/enable-dark-theme.html