Change inline code highlighted text

[diasdmhub]

Attempted Debugging

• [X] I have read the debugging page

Searched GitHub Issues

• [X] I have searched GitHub for the issue.

Describe the Scenario

Whenever I format a text to inline code and click on it, the text is highlighted and becomes very hard to read. If I select the text, it becomes even harder to read. It sort of takes on a high contrast color.

Unselected inline code text

Clicked inline code text

Selected inline code text

How can I change this highlight color to something easier to read?

Hosting Environment

• Bookstack v24.02.3
• Ubuntu 22.04
• PHP 8.1.2
• Apache/2.4.52

[ssddanbrown]

Hi @diasdmhub, If you want to override the default browser/OS text selection color, you could add the following to your "Custom HTML Head Content" customization setting in BookStack:

<style>
  /* Use a purple background and white text for just code block elements*/
  .page-content code::selection { background: #b86ad3; color: #FFF; }

  /* As above, but for all page content elements*/
  .page-content *::selection { background: #b86ad3; color: #FFF; }
</style>

There are two examples in there, you could choose the one you want and tweak the colors as desired.

[diasdmhub]

Thanks @ssddanbrown. The purple background is easier on my eyes.

However, as shown in my clicked example, just clicking on an inline code text will highlight it in blue. Note that it is not a selection, it is just a click or placing the cursor on the inline code text.

My browser does not highlight any code text like this. Only Bookstack's text editor does that. I wish it wouldn't highlight the text like that.

[FlorinBuffet]

I can confirm in dark mode it is very hard to read. The blue selection seems to come from data-mce-selected="inline-boundary".

[diasdmhub]

I wonder how to edit or override it.