search

ansible-community / antsibull-docs

Tooling for building Ansible documentation
https://ansible.readthedocs.io/projects/antsibull-docs/
GNU General Public License v3.0
27 stars 17 forks source link

Added Dark Mode support to option tables #253

Closed SebastianGode closed 6 months ago

SebastianGode commented 7 months ago

I noticed that Antsibull didn't respect the prefers-color-scheme browser or system setting of the users which access the documentation website. This will result in completely unreadable tables for Sphinx-Themes which already include support for such user settings.

To fix this I added some css code to change the colors accordingly for dark mode. The colors are chosen to get a contrast ration >7 and to pass Google's usability rating with an AAA.

If you have any suggestions feel free to mention them.

Before image After image

Tip: You can quickly switch the Browser View to Dark-Mode or Light-Mode by using the Developer Options: image Just don't use the auomatic conversion from the Browser as that will replace all CSS.

felixfontein commented 7 months ago

@SebastianGode thanks for your contribution! I'll take a closer look soon. Can you add a changelog fragment? Thanks.

SebastianGode commented 7 months ago

I've added a fragment. I'm not sure if it's correct, but I tried :)

felixfontein commented 6 months ago

I started working around these problems in #254. That PR makes it easy to add new color schemes (this PR would translate into creating a copy of the default scheme, adding a media query with redefinitions of the colors for dark mode, and allowing to select that color scheme in the config).

That way colors can be selected (or even defined) by the extension's user (who also has control over which theme and other extensions are used).

felixfontein commented 6 months ago

I went ahead and merged #254 so you aren't blocked on that PR. Note that I changed the way the node.js dependencies (sass and postcss) are installed, now you have to run npm install or npm clean-install in src/sphinx_antsibull_ext/css/ before running ./build.sh.

SebastianGode commented 6 months ago

Thanks for the work @felixfontein ! I will have a look, it seems like you added some variables which I can simply adjust, will need to try that stuff out.

SebastianGode commented 6 months ago

@felixfontein I now think that I have fixed the tables in the narrow view. And adding the option to select different themes was awesome! That works like magic now :)

felixfontein commented 6 months ago

@SebastianGode thanks a lot for your contribution!

SebastianGode commented 6 months ago

@felixfontein Would it be possible to get a new Release to PyPi? 😃

felixfontein commented 6 months ago

Yes, maybe later today or tomorrow. I want to add a small change before releasing.