APLN Moderator

Hi Monika,

Thank you for this topic!

A Benetech-certified vendor offered the following solution:

Dark mode in different software applications handles back-ground colors in different ways. Highlighting (background-color in CSS) is usually ignored in Dark Mode.

The best solution we can suggest is to put a border around the highlighted content that will outline the text in dark mode. The CSS should be adjusted to make this possible. We used a red border with yellow highlight in the following example so that the border presence is clearly visible on screen. When we switch to dark mode in Thorium, the highlight disappears but the border remains.

CSS code:

/* ----Testing----- */
/*@media (prefers-color-scheme: dark) {  .highlight { background-color: white; color:black;}} */
.highlight {color:black; background:yellow; border:solid; border-color:red;}
@media (prefers-color-scheme: dark) {  .highlight { border-style:solid; border-color:white;  color:white;}}

 

Screenshots:

Thorium screenshot with Neutral theme selected.

Thorium screenshot with the text "highlighting example" highlighted in yellow

Thorium screenshot with Night theme selected.

Thorium screenshot in dark mode with the text "highlighting example" in a white border

Hope this helps!

a wooden table with a white keyboard on top, and a persons hand writing on a piece of paper

View our current resources