CSS performance enhancement vs dark mode

Just wanted to share an incompatibility I encountered between the Khoros Community CSS performance improvements and using the prefers-color-scheme: dark CSS media query which you might want to use for shipping a dark community theme.

So I tried to enable our dark theme by adding to the header wrapper the following:

<link rel="stylesheet" href="/html/assets/dark.css" media="(prefers-color-scheme: dark)">

...but the result was that even for non dark mode browser some elements of this dark.css got included in Khoros' CSS performance improvement inline CSS. The result was that some elements showed styling of dark theme, resulting in low contrast / white text on white background:

It looks like the CSS performance enhancement script looks for any styling and whether it applies to the current page.

My workaround was restricting the dark theme to only registered users as the script is loading the page anonymously:

<#if user.registered>
<link rel="stylesheet" href="/html/assets/dark.css" media="(prefers-color-scheme: dark)">
</#if>

Hope this helps anyone running into the same problem and ideally Khoros can add prefers-color-scheme for the CSS enhancements going forward.