Option to change background and text colors, as well as text sizes, in the settings directly.

[kindfulkirby]

Describe the feature you'd like

In addition to being able to set colors for Primary, Link, and page hierarchy colors, it would be great to be able to set the background and text colors, as well as text size, or sizes.

Describe the benefits this would bring to existing BookStack users

CSS is finicky and often doesn't produce the results a user (who hasn't spent years doing web design) would expect. It would save admins frustration, if there was a foolproof way to set these things up.

Can the goal of this request already be achieved via other means?

Probably, but I can not figure out the right magic words to put in the "Custom HTML Head Content" box, to increase the dark mode contrast and font-sizes. It seems I have to change every single element's style manually, or maybe they get overwritten somewhere else. It's a struggle.

Have you searched for an existing open/closed issue?

• [X] I have searched for existing issues and none cover my fundamental request

How long have you been using BookStack?

Under 3 months

Additional context

I find the default dark mode quite hard to read. A lot of the text is tiny (but other text is quite large which makes using the browser's zoom function rather annoying). The contrast in Dark Mode between much of the text and the background is too low for my old eyes. Light Mode is much more easily readable, but sadly not easy to look at (but that's a me problem).

[szabeszg]

I'd also like to see built-in support for changing the most important aspects of the content. The body copy font size is just too small, while header sizes are too big.

I did not spend too much time analysing the CSS (so there can easily be better ways to implement workarounds), but this is what I currently have in the "Custom HTML Head Content":

<style>
  #main-content { font-size: 16px; }
  #main-content .page-content a { text-decoration: underline; }
  #main-content img { filter: drop-shadow(0 0 16px rgba(111, 111, 111, 0.5)); }
  h1 { font-size: 2.8em; line-height: 1.1em; }
  h2 { font-size: 2.3em; line-height: 1.1em; margin-top: 0.48em; }
  h3 { font-size: 2.0em; line-height: 1.1em; }
  h4 { font-size: 1.8em; line-height: 1.1em; }
</style>

The drop-shadow is applied as a frame for all images to prevent those with a white background from blending into the page in light mode. I also believe that underlining is essential for links; otherwise, users may have difficulty spotting them (at least in my experience).

[ssddanbrown]

Thanks for the request @kindfulkirby.

Personally I'm happy with where the line is drawn for customization so far, and the balance of providing controls for anything non-neutral with the ability to add CSS for anything beyond that. I'm not keen to expand beyond that scope as it quickly becomes quite wide, while adding to what needs to be considered on the development side.

[kindfulkirby]

Fair enough. Maybe we can add some more examples to the documentation. While I have managed to tweak the colors and fonts to my satisfaction (mostly), I am far from certain I've done so in a sensible way, so maybe someone who knows what they're doing can provide those examples!