Modify Reader Mode Color of Hex codes

Support
1

59
59718Ă—496 5.74 KB

Is it possible to change color hex code to #000000 instead of your current colors ?, The Current one is not real black.

Screenshot Capture - 2024-09-19 - 10-53-36
Screenshot Capture - 2024-09-19 - 10-53-361938Ă—1094 321 KB

2 Likes
2

Use inspect element in your browser to identify the selector. You should be able to see the CSS used.

Create a custom Theme component and add your selector

Some-selector {
        background-color: #000000 !important;
}

The important overrides the color to your preference.

Looking at the code in GitHub looks like these 2 selectors. Note check The theme component to see if there are settings first to adjust the background color

I checked the component in my site no settings to change so try the first selector below in a custom component in common CSS. Test and if needed add the 2nd selector with the codes below. My skills are still fairly basic. But I think should work.

.reader-mode {
  .d-header {
    background-color:  #000000 !important ;
  }

The below may also need to be overridden. But try the above first & test. The below code might need some other things overridden. Let me know and will see if I can identify what else may need to be adjusted.

 .topic-area#topic::before {
        background: #000000 !important ;
  }

__

Important!!!

Taking a deeper look. Change your Theme’s dark mode Secondary color to the black hex code.

My code above will have undesirable side effects of forcing black background on both Light & Dark mode. Making light mode unreadable.

So I recommend modifying your Dark color scheme. The Secondary to the true black.

If the Dark color scheme is part of a theme you will need to copy clone it and modify your copy with the new value.