How to change highlighted text in dark mode?

  • This topic has 1 reply, 2 voices, and was last updated 1 week, 5 days ago by APLN Moderator.
Viewing 2 posts - 1 through 2 (of 2 total)
How to change highlighted text in dark mode? thread
Author Posts
Monika

I have a book where messages are underlined (I have attached screenshots). The problem is that the underline disappears when I turn on the night mode, and if I want to change the colour of the underline in the dark mode, it doesn’t work @media (prefers-color-scheme: dark) {  .Highlight { background-color: white; color:black;}}.
Perhaps someone have some possible solution to make the reading experience similar in both modes?

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!

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.

Want to join the discussion?

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

View our current resources