Can Different Knowledge Blocks Be Applied Based on GUI Light or Dark Theme?

[GeorgeO]

Is it possible to apply a different knowledge block to an article depending on whether it is opened in light or dark theme?

I have lots of CSS styles contained in knowledge blocks, and unfortunately some have hard-coded text colors which don't work so well in dark theme.

Thanks

[MaryG]

Hi @GeorgeO — there's no native way to conditionally swap Knowledge Blocks based on light/dark theme, but the better fix is likely upstream in how the CSS is written rather than swapping blocks.

The cleanest approach: replace hard-coded color values in your block CSS with CSS custom properties that respond to the user's theme automatically.

For example, instead of:
color: #1a1a1a;

Use:
color: var(--now-color--neutral-18, #1a1a1a);

Now UX ships a full set of CSS variables (--now-color--, --now-color-text--, etc.) that flip automatically between light and dark theme. If your blocks reference those instead of hex values, they adapt without any conditional logic.

If swapping blocks is still the direction you want to go, you could embed a small inline script in a block that checks document.documentElement and shows/hides content based on the active theme class — but that's fragile and not something ServiceNow supports officially.

Worth auditing the hard-coded values first — in most cases replacing 3-4 color declarations fixes the problem across all your blocks at once.

Note: CSS variable names have shifted across releases, so it's worth verifying the exact token names against the Now Design System docs for your release before updating your blocks. The pattern is consistent but specific variable names may differ.

[GeorgeO]

Thank you, MG.

As a follow-on, my blocks are based on CSS styles created in an external WYSIWIG editor (robohelp), because I find authoring directly in ServiceNow to be painful.
So, the blocks are the RoboHelp CSS encased between <style> </style> tags, like the example below. If I'm following you correctly, I need to use variables to reference the servicenow CSS variables. I guess my question is if the SN variables are contained within the robohelp style block (as shown in the example below), will they be automatically updated by the theme?:

<style>
/*Created with Adobe RoboHelp*/
:root {
--now-color--neutral: 79,86,100;
--now-color--primary: 79,82,189;
--now-color--secondary: 79,82,189;
--now-color_selection--primary: 0,123,88,
--now-color_selection--secondary: 79,82,189,
--now-color--interactive: 79,82,189,
--now-color_surface--brand: 79,82,189,
--now-color_chrome--brand: 48,47,75,
--now-color_chrome--divider: 42,41,65
}
h1 {
font-weight: bold;
margin-right: 0pt;
page-break-after: avoid;
margin-top: 0px;
margin-bottom: 12pt;
font-family: Arial;
margin-left: 1pt;
font-size: 17pt;
color: var(--now-color--neutral);
}
h2 {
font-weight: bold;
margin-right: 0pt;
page-break-after: avoid;
margin-top: 16pt;
margin-bottom: 8pt;
margin-left: 1pt;
font-family: Arial;
font-size: 15pt;
color: #ABF8F8;
</style>

[MaryG]

Hi@GeorgeO
 The issue is in how the variables are being declared.

When you define the :root block inside your own <style> tag, you are hardcoding the variable values. That means the platform theme is no longer supplying those values dynamically. You are essentially telling ServiceNow, “use these colors,” instead of allowing the active theme to provide them.

To get theme-responsive behavior, remove the :root { } variable definitions from your style block and only reference the ServiceNow variables in your CSS rules.

For example:

<style>
h1 {
  font-weight: bold;
  font-family: Arial;
  font-size: 17pt;
  color: rgb(var(--now-color--neutral));
}

h2 {
  font-weight: bold;
  font-family: Arial;
  font-size: 15pt;
  color: rgb(var(--now-color--neutral));
}
</style>

The platform/theme needs to own the variable values. Your article or block CSS should consume the variables, not redefine them.

Also, any hardcoded colors like this:

color: #ABF8F8;

will not respond to light/dark theme changes. Those should be replaced with an appropriate ServiceNow CSS variable as well.

One tradeoff is that RoboHelp may not preview the colors accurately, because RoboHelp does not know what values ServiceNow will supply at render time. You would need to validate the final behavior in ServiceNow, ideally in both light and dark themes.