Operators are highlighted with a white background on dark themes

[Demdillypickles]

The prism.css file provided by your project has the code below:

.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url {
    color: #9a6e3a;
    background: hsla(0,0%,100%,.5)
}

I do not see this style in the original prism.css from the PrismJS project.

This small bit of code is causing operators to be highlighted with a white background, even in dark themes. What was the reason for including this? Unless I am missing something, I think it should just be removed entirely. This small issue is making dark themes "unusable" with your component.

Screenshot example of operators being highlighted with a transparent white background. Makes dark themes look bad.

[Taiizor]

The default prism.css file does not support dark mode. Which style file did you use that caused this issue, @Demdillypickles? Because there are multiple style files specifically designed for dark themes. I tried a few of them and didn't encounter this issue, to be honest.

[Demdillypickles]

Okay, I think I might have figured out a clue to what is happening.

So ultimately, I did solve my problem (perhaps short-term) by cloning the repo and just removing the bit I referenced above. I noticed that I could recreate the issue in the BrismServerDemo project by applying the dark themes the same way as described in the README. I just added another <link> element referencing whatever dark theme I was testing.

At the time, I was laser focused because I was pretty sure I could fix my problem, and it worked so it was a quick 5 minute dive.
I didn't spend a whole lot of time exploring the demo, I just quickly went to the code example pages to validate my issue. I did not notice in your demo that you have the dark mode toggle button.

So this morning, I cloned the project again to make sure I could recreate the issue to help with it, and I did notice the dark mode toggle this time, and the handling behind it. I have concluded that the issue only exists when you apply a dark theme as default. If I instead just apply whatever dark theme using the <link> element that you guys had set up for the dark mode toggle, it all works just fine, no weird highlight.

Spending more time with your demo, I notice that the highlighting does serve a purpose for the light themes, so now I understand where it came from. But it also seems like it is something that is meant to be toggled off when transitioning to a dark theme. But if the default theme is dark, the highlighting for the benefit of light themes is also being applied by default.

Some more context, my introduction to PrismJS was actually through this project! I'm just a Blazor dev that was searching for some code highlighting, and that brought me to you. I'm just trying to make a simple internal tool to be used by 4 guys, and I already know none of us would ever use a light theme. I bring this up to explain why I just did a simple ctrl + f in the original prism.css. I now appreciate that you are actually doing a bit more lifting for us than PrismJS does. I am definitely weak with JS and CSS so I am not quite capable of taking the issue much further, but I am definitely down to assist with troubleshooting how I can. From what I can tell, this is the only issue so I'd love to help get that last percent of perfection!