Service Portal themes control your portal's visual branding — colors, fonts, logo placement, and navbar styling. This guide shows you how to customize these elements to match your organization's look and feel.
The problem with default portal styling
Out-of-the-box Service Portal instances look generic. Your users see ServiceNow's default blue color scheme, standard fonts, and the ServiceNow logo. For organizations that need branded self-service experiences, this creates a disconnect between the portal and their corporate identity. IT teams end up fielding questions about whether the portal is legitimate or official, and the generic appearance undermines user confidence in the self-service tools you're trying to promote.
How Service Portal theming works
Portal theming uses SASS variables to control visual elements across all pages in that portal. You'll work with two main components: the Portal record itself, which has a Theme field that points to a Theme record, and the Theme editor, where you modify SASS variables for colors, fonts, and layout. The theme applies globally to every page within that portal — you can't theme individual pages differently. Logo placement happens at the Portal level, not the Theme level, which trips up people who expect everything to be in one place.
Taking portal branding further
Once your basic colors and logo are working, you'll want to customize specific UI components like buttons, cards, and form elements. Advanced theming involves overriding SASS variables for individual Bootstrap components, adding custom CSS for elements that don't have SASS variables, and potentially creating multiple themes if you run multiple portals with different brand requirements. Production-quality portal theming also includes responsive design testing and accessibility compliance for color contrast ratios.
Before you start
- •portal_admin or admin role
- •An existing Service Portal instance
Sourdough: ServiceNow Monitoring and Analytics
A Chrome extension for ServiceNow Admins and Developers with essential tools, analytics, graphs and monitoring features.
Free to install. Pro $5/month after a 14-day no-card trial.
Pro requires the ServiceNow admin role. Upgrade inside the extension.
Step by step
Open your Portal record
Navigate to Service Portal > Service Portal Configuration > Portals. Find and open your portal record. You'll see a Theme field — this is what controls the overall styling. If it's empty, you're using the default Stock theme. Note the Logo field here as well — this is where you'll set your organization's logo, separate from the theme colors and fonts.
Create or select a theme
In the Theme field, either select an existing custom theme or create a new one. If creating new, click the search icon, then New. Give it a descriptive name like 'Corporate Brand 2024'. Don't clone Stock — start fresh to avoid inheriting variables you don't need. The theme record itself is mostly just a container; the real work happens in the theme editor.
Name themes by brand or time period, not by colors — your brand colors will change before your theme name does.
Open the Theme Editor
From your Theme record, click the 'Open in Theme Editor' related link. This opens the SASS variable editor where you'll do most of your customization. You'll see categories like Brand Colors, Typography, and Layout. Start with Brand Colors — set $brand-primary to your organization's primary color and $brand-secondary if you have one. These variables cascade through the entire portal interface.
Configure primary brand colors
Set $brand-primary to your main brand color (use hex values like #0066cc). This controls buttons, links, and active states. Set $brand-success, $brand-warning, and $brand-danger if your organization has specific colors for these states. Leave secondary colors alone initially — focus on getting your primary brand color working across the portal first.
Preview changes frequently using the preview pane — SASS compilation can produce unexpected results with certain color combinations.
Set typography variables
In the Typography section, modify $font-family-base to your organization's primary font family. Use web-safe fonts or ensure custom fonts are loaded separately. Set $font-size-base if you need larger or smaller default text. Don't change too many typography variables at once — start with font family and size, then test before adjusting line heights or weights.
Customize navbar styling
Look for navbar-related variables like $navbar-bg, $navbar-brand-color, and $navbar-link-color. Set these to match your brand. The navbar is the most visible branding element, so get this right first. Test both light and dark variations to ensure text remains readable. Save your theme changes and preview them in the portal.
Navbar text color should contrast strongly with your navbar background color — aim for at least 4.5:1 ratio for accessibility compliance.
Add your organization logo
Back in your Portal record, upload your logo to the Logo field. This logo appears in the navbar, separate from theme styling. Use a PNG with transparent background, ideally 200px wide or less. The portal automatically scales it, but smaller files load faster. Update the portal record to save the logo change.
Apply and test the theme
Return to your Portal record and ensure the Theme field points to your customized theme. Save the portal record. Open the portal in a new browser tab to see your changes live. Test key pages like the homepage, catalog, and knowledge base to verify the branding looks consistent. Check mobile responsiveness by resizing your browser window.
Best practices
Create separate themes for different portals rather than trying to make one theme work everywhere — portal audiences often have different branding needs.
Always set SASS variables rather than writing custom CSS when possible — variables cascade properly and are easier to maintain.
Test your theme with real content, not just the default portal pages — custom widgets and knowledge articles can expose branding issues that aren't visible on stock pages.
Keep your logo file under 50KB and use SVG format when possible — large logo files slow down every page load across your entire portal.
Document which SASS variables you've modified in the theme description — future maintainers need to know what's been customized when troubleshooting.
Test Your Knowledge
Quick 3-question quiz — see how your ServiceNow skills stack up.
A list view on a table with millions of records is slow. Best fix?
Select an answer to continue