---
sourceDocument: Brazil ServiceNow AI Platform user interface
sourceDocumentLink: https://www.servicenow.com/docs/r/platform-user-interface

 Release :

    - brazil

ft:locale :

    - en-US

ft:publication_title :

    - Brazil ServiceNow AI Platform user interface

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Create a portal theme

# Create a portal theme {#ariaid-title1}

Release version: Brazil  
Updated September 10, 2026  
![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 minutes to read
Summarize  
![AI sparkle icon](https://servicenow.com/docs/portal-asset/ai-sparkle-icon) Summarized using AI  
This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.  

## Summary of Create a portal theme

ServiceNow enables customers to create custom portal themes when the Branding Editor does not offer sufficient customization options.
Creating a custom theme requires knowledge of CSS.
Themes allow you to control the visual appearance of your portal, including headers, footers, colors, styles, and behavior like fixed positioning.
Show full answer Show less  

## Creating and Configuring a Theme

To create a theme, navigate to **Service Portal \> Themes** and select **New**. Complete the theme form, which includes:

* **Name:** Internal identifier to associate the theme with a portal (not visible to users).
* **Turn off SCSS compilation:** Option to disable SCSS compilation and serve plain CSS directly.
* **Application Scope:** Ensures consistency between header menu and theme records.
* **Header and Footer:** Associate widgets from the spheaderfooter table to define portal headers and footers.
* **Fixed Header/Footer:** Lock these elements to remain visible when scrolling.
* **CSS Variables:** Define CSS custom properties to control colors and styles within the theme.

Note: Use the CSS Variables field only for CSS custom properties. Define general CSS rules in CSS Includes.

## Adding CSS Includes

CSS Includes allow you to add style sheets to your theme. You can add internal style sheets uploaded to the CSS table or link to external style sheets (e.g., corporate stylesheets). Key configuration fields include:

* **Name and Application Scope:** To identify and associate the style sheet correctly.
* **Source:** Choose between internal style sheets or external URLs.
* **Lazy Load:** Optionally load CSS asynchronously to improve load times; however, this can cause unstyled content flashes and should be used consistently across all CSS Includes in a theme.
* **RTL CSS File URL:** Support right-to-left languages by providing a mirrored stylesheet when needed.

## Adding JavaScript Includes

JavaScript Includes can be added similarly to CSS Includes for adding client-side logic:

* **Display Name and Application Scope:** For identification and scope consistency.
* **Source:** Choose between internal UI scripts or external JavaScript URLs.
* **Association:** Link the appropriate internal script or external file URL.
* **Package:** Automatically populated to indicate the Service Portal package affiliation.

## Additional Features

* **Dark Theme:** Enable a Coral dark theme variant to enhance user focus, readability, and accessibility.
* **Theme Variants:** Create customized visual experiences by starting from the Coral theme and adjusting CSS variables and branding options.

## Practical Benefits for ServiceNow Customers

By creating custom portal themes, customers gain full control over the look and feel of their Service Portal beyond what the Branding Editor offers. This flexibility helps maintain brand consistency, improve user experience, and support accessibility needs such as right-to-left languages or dark mode. Proper use of CSS and JavaScript includes ensures efficient management of styles and scripts, optimized page load performance, and consistent appearance across portal pages.  
If you need more customizations than the Branding Editor can provide, you can create your own custom theme.

Only users with an understanding of CSS should create custom themes.

1. Navigate to Service PortalThemes, then select New.
2. Complete the form fields and then from the form context menu, select Save.  
   {#c_CustomCSS__table_anh_ljr_mz__entry__2}

   | Field | Description |
   |-|-|
   | Name | Name of your theme. Use this name to associate the theme with your portal. This name isn't visible to users. |
   | Turn off SCSS compilation | Turns off compiling SCSS and sends the plain CSS file directly to the client. |
   | Application | The record scope. The header menu record and the source table must have the same application scope. |
   | Header | List of headers and footers from the sp_header_footer table that you can associate with a portal theme. Headers and footers are widgets and can be configured the same way. |
   | Footer | List of headers and footers from the sp_header_footer table that you can associate with a portal theme. |
   | Fixed header | Locks the header at the top of the page so that when you scroll, the header remains on the screen. |
   | Fixed footer | Locks the footer at the bottom of the page so that when you scroll, the footer remains on the screen. |
   | CSS variables | CSS custom properties that you can use to change the color and styles in a portal. For example, the stock theme uses some of the following variables: $sp-logo-margin-x: 		15px !default; $sp-tagline-color:		$text-color !default; $navbar-inverse-bg: 	#3a3f51 !default; Note: Use the CSS variables field to define CSS variables only. Use CSS Includes to define CSS rules. As of the Madrid release, Sass and LESS can be used within CSS Includes. |
   [Table 1. Theme form fields]

   {#c_CustomCSS__table_anh_ljr_mz}
3. To add a style sheet to the theme, in the CSS Include related list, select New.
4. Complete the style sheet form fields and select Submit.  
   {#c_CustomCSS__table_ew1_jjr_mz__entry__2}{#c_CustomCSS__p_nmg_nfg_h1c}

   | Field | Description |
   |-|-|
   | Name | Name of the CSS Include. Remember this name to associate the CSS Include with the theme. |
   | Application | The record scope. The header menu record and the source table must have the same application scope. |
   | Source | Select one of the following options: * Style Sheet: Add an internal style sheet that has been uploaded to the CSS table \[sp_css\]. For example, ng-sortable.min.css. Internal style sheets use standard CSS in the CSS field. * URL: Link to an external style sheet. Use external style sheets to use the same CSS as a corporate website or other online resource. {#c_CustomCSS__ul_ehs_5wm_b1b} |
   | Style sheet | An internal style sheet to associate with the theme. |
   | CSS file URL | A URL to an external style sheet to associate with the theme. |
   | Lazy Load | Option to load the CSS Include asynchronously to improve page load time. This option should be set to the same value for all CSS Includes of a theme. Enabling asynchronous loading for only some CSS Includes associated with a theme isn't recommended.{#c_CustomCSS__p_lmg_nfg_h1c} Note: Enabling Lazy Load isn't recommended for portals with flashing of unstyled content. The CSS Includes with Lazy Load enabled are listed in the Lazy load CSS includes related list in the theme record. |
   | RTL CSS file URL | A URL to an external style sheet for mirroring the direction of a portal when the session language is a right-to-left language, such as Hebrew. For information about support for right-to-left languages, see [Styling for right-to-left languages in portals](https://www.servicenow.com/docs/j~9tnuvNHFno9_CT3TLeQQ "Localizing a portal for right-to-left languages requires CSS that mirrors the direction of portal pages."). |
   [Table 2. Style sheet form fields]

   {#c_CustomCSS__table_ew1_jjr_mz}
5. To add a JavaScript include to the theme, in the JS Include related list, select New.
6. Complete the JS Include form fields and select Submit.  
   {#c_CustomCSS__table_d4l_1bn_b1b__entry__2}

   | Field | Description |
   |-|-|
   | Display name | Name of the JS Include. Remember this name to associate the JS Include with the theme. |
   | Application | The record scope. The header menu record and the source table must have the same application scope. |
   | Source | Select one of the following options: * UI Script: Add an internal UI script that has been uploaded to the UI script table \[sys_ui_script\]. Use UI scripts to create client-side JavaScript and reuse it in multiple locations. For more information on UI scripts, see [UI scripts](https://www.servicenow.com/docs/access?context=c_UIScripts&version=brazil&pubname=brazil-api-reference&ft:locale=en-US). * URL: Link to an external JavaScript file. Use external URLs to use the same JavaScript as a corporate website or other online resource. {#c_CustomCSS__ul_e4l_1bn_b1b} |
   | UI Script or JS file URL | Associate an internal UI script or JavaScript file URL, depending on which option you select in the Source field. |
   | Updated | Date and time that the JS Include was last updated |
   | Package | The Service Portal package that the JS include is associated with. For example, Service Portal Configuration Pages. This field is populated by default. |
   [Table 3. JS Include form fields]

   {#c_CustomCSS__table_d4l_1bn_b1b}
{#c_CustomCSS__ol_wbw_4f5_qv}
* **[Enable dark theme](https://www.servicenow.com/docs/wKZpqN7HczEddV_VnFVyhg)**   
  Use a Coral dark theme on a portal to improve focus, readability, and accessibility.
* **[Create a theme variant](https://www.servicenow.com/docs/rTkQwpJzxPz2QFEsmVcNTQ)**   
  Create a theme variant from the Coral theme. A theme variant uses customizable styling CSS variables and branding options to tailor the visual experience for your users.

*[\>]: and then