Header lines in main-page-content-file are dim in dark mode

[gmabey]

I really like both the main-page-content-file feature and the dark mode feature. :+1:

However, when an "H1" (#) line is included in the .md file, it shows up as dark grey instead of white when dark mode is enabled.

I haven't tried sub-headers (##, ###) but I suspect they suffer from the same formatting issue.

[markvincze]

@gmabey Thanks for reporting this! Fixed in #25

[markvincze]

@gmabey Closing this now, feel free to reply if it's still not working correctly.

[gmabey]

Sorry I'm finally getting around to testing this -- I do appreciate your interest in this issue. So, I'm still seeing that "H1" text as being dimmer than the other headers in version 0.11. On a black background, the text is dark grey, whereas each package listed underneath the text "This site contains the documentation for the following Protobuf packages." is a nice bright blue color.

Recall that this text is being pulled from my repo's README.md file, so my "H1" text is indicated with a #.

Hmm -- I see that the color of this text is changing, when I switch between light mode and dark mode. In light mode, it's solid black, just like the majority of the text on the page, as well as the "Packages" header-type line. Then when I switch back to dark mode, it turns dark grey.

[markvincze]

@gmabey Can you send an example of what your markdown content looks like exactly? I tested it now with this markdown:

# This is heading 1

## This is heading 2

### This is heading 3

#### This is heading 4

##### This is heading 5

And to me the contrast looks good (and consistent across the different headings) both in light and dark mode.

In light mode:

In dark mode:

Is it different when you test it?

[gmabey]

Yeah I'm still seeing it -- attached.

Is there an easy way to append the sabledocs version to the "Built with Sabledocs" string in the footer? That would be useful sometimes, obnoxious other times. README.md sabledocs.toml.txt

[markvincze]

@gmabey Thanks for doing another test and sending the screenshot!

Adding the version number to the footer certainly sounds like a good idea, I'll add that to the list of improvements.

As for the incorrect heading color, I don't know yet what it can be caused by. I tested it now with the latest stable package.

$ pip list | grep sable

sabledocs        0.11.547

I used the readme content you sent, but the heading color looked correct. The only thing I can think of is that for some reason an old version of the CSS is being used for you, either during the generation, or it's cached in the browser. Does the same thing happen if you open the docs in an incognito window, or if you open the Dev console and in the Network tab disable caching?

If I check that heading element in the Dev console, I see its color being set to whitesmoke:

That's what was added in this PR: https://github.com/markvincze/sabledocs/pull/25/files#diff-66dce658f5bc652a531c9a6817559c9b26a5d067ae5dbfdd54d8cffa10bf31ccR7928 I assume if you check the same, the style is missing?

You're not using a custom fully copy of the whole template by any chance, right?

[gmabey]

Ok, I did have multiple CLI versions installed, and this feature is now working as expected.

[gmabey]

AND -- I had forgotten about this but you were right (again) in that I am using a custom CSS file. That's because I need to remove the unpkg.com and fontawesome.com references. I thought of creating an issue requesting that as an option, but then I decided it was better to just use the existing hooks for customization that you already provided. And then figuring that all out again cost me more time than I wish.

[markvincze]

@gmabey would it help if the necessary CSS files were packaged together with the output? I was considering doing that just so that we're able to generate an HTML output which can be consumed completely offline if necessary.

[gmabey]

Yes, HTML that can be rendered completely off-line is what I need.

[markvincze]

@gmabey I adjusted the default template to use static files instead of the CDN sources, so now we only have these 3 assets:

    <link rel="stylesheet" href="static/mystyles.css" />
    <script src="static/fontawesome.js"></script>
    <script src="static/lunr.js"></script>

It's released in version 0.11.581

Update: actually this might not work yet, I think the fontawesome.js script dynamically loads other scripts. I'll check how to correctly package it statically.

[gmabey]

@markvincze This is working great! Thank you!