magda m Shannon Greywalker we have fixed this bug from our end. Kindly validate this once at your and let us know if any issues / concerns. Thank you for your time.

Until (and if) Kovai is able to natively improve the code syntax highlighting in dark mode, you can work around these issues yourself with some CSS overrides in the Doc360 Settings.

Doc360 uses the https://prismjs.com/ library for their code block presentation. The stylesheet that renders the code blocks is called "vendor.css" when you inspect a Doc360 page. This probably just the prism.css file from the library, modified slightly and renamed.

The problem is that the prism library (and CSS) wasn't built to handle both light and dark themes. It's one-size-fits-all by default. So the trick is to copy their selectors from vendor.css, add those to your CSS overrrides, and then prefix every selector with

.dark_theme

(Be sure to leave a space after that).

As an example, here is our current set of dark theme overrides for all the prism selectors. All we did was look at the original color in Chrome in Chrome's inspector (in dark mode), and then put that color into a graphic editing program and use the color picker to lighten and saturate the original color, and then test it by plugging the new hex code into Chrome's inspector. Once we got a color that worked well in dark mode and looked similar to original color in light mode, we used the new hex code in the CSS override.

================ Example CSS overrides ============

/* Next N selectors improve readability of code block syntax highlighting in dark mode

Most of these come from the Prism library, which in Doc360 output is called "vendor.css" (prism.css). */

.dark_theme .token.cdata,

.dark_theme .token.comment,

.dark_theme .token.doctype,

.dark_theme .token.prolog {

color: #708090;

//

}

.dark_theme .token.punctuation {

color: #999999;

//

}

.dark_theme .token.boolean,

.dark_theme .token.constant,

.dark_theme .token.deleted,

.dark_theme .token.number,

.dark_theme .token.property,

.dark_theme .token.symbol,

.dark_theme .token.tag {

color: #e1007d;

//

}

.dark_theme .token.attr-name,

.dark_theme .token.builtin,

.dark_theme .token.char,

.dark_theme .token.inserted,

.dark_theme .token.selector,

.dark_theme .token.string {

color: #73ab02;

//

}

.dark_theme .language-css .token.string,

.dark_theme .style .token.string,

.dark_theme .token.entity,

.dark_theme .token.operator,

.dark_theme .token.url {

color: #ee9900;

//

}

.dark_theme .token.atrule,

.dark_theme .token.attr-value,

.dark_theme .token.keyword {

color: #009add;

//

}

.dark_theme .token.class-name,

.dark_theme .token.function {

color: #eb5738;

//

}

.dark_theme .token.important,

.dark_theme .token.regex,

.dark_theme .token.variable {

color: #ee9900

//

}

.dark_theme .token.content {

color: #009add;

//

}

.dark_theme .environment.constant {

color: #e1007d;

//

}