Enhance Quarkus Docs page with Dark mode

[gian1200]

Description

As stated in the title, to enable a Dark mode option for the docs page. Nothing fancy nor complicated, but focusing on readability.

OS sync for initial configuration would be a nice to have thing, but not necessary.

Current docs: https://quarkus.io/guides/cache

Implementation ideas

Maybe something similar to GitHub's Dark dimmed: grey (non black background and non white text).

GitHub:

I know colors are a preference and relative, but if some people like a darker (or lighter) mode, maybe it can be expanded to:

• Lighter (whiter or current)
• Light (current or darker current)
• Dark (grey)
• Darker (black)

[quarkus-bot[bot]]

/cc @MichalMaler (documentation), @ebullient (documentation), @inoxx03 (documentation), @michelle-purcell (documentation), @rolfedh (documentation), @sheilamjones (documentation), @sunayna15 (documentation)

[gsmet]

I moved the issue to the website project. /cc @insectengine this might be a good idea. If I'm not mistaken @jponge had fun with this for the Mutiny website: https://smallrye.io/smallrye-mutiny/2.5.1/ .

[jponge]

Mutiny uses MkDocs Material so the dark mode was built-in and I just had to choose colors 🤣

[holly-cummins]

Watching this for http://extensions.quarkus.io and http://docs.quarkiverse.io, too.

[insectengine]

Put this on my work queue to look at but will need to prioritize.

This would need to be a site wide thing (not just on docs) so it will be a larger lift.

[roby2014]

Bump, need this.

[The-Funk]

I get the occasional light induced migraines so dark mode is enabled on my machine everywhere I can find it. Glad to see someone already put in this request.

[insectengine]

I submitted a draft PR with a dark mode for the site. It's a clean approach that detects the user's OS settings and sets either light or dark mode. I didn't include a switcher to avoid extra javascript and visual clutter on the page.

https://github.com/quarkusio/quarkusio.github.io/pull/1908

Note" While I've created dark mode versions of images on the content pages, we'll have to sort out how to swap images in the documentation to have dark mode friendly images via ascidoc.

@gsmet @maxandersen @holly-cummins

[maxandersen]

@holly-cummins @insectengine remind me where we landed on this? my memory is broken :)

[insectengine]

https://github.com/quarkusio/quarkusio.github.io/pull/1962

^ This PR addresses the outstanding issues.

1. Added color mode switcher in navigation (that changes to show state: light, dark, system).
2. Fixed pre code color issue in darkmode
3. Added solution for images in blog/guides with transparency in dark mode.

Outstanding issue: Still need Guides index fix for icons in dark mode @yrodiere @ia3andy < How is the image swap working for the main guides page going?

[yrodiere]

@yrodiere @ia3andy < How is the image swap working for the main guides page going?

@marko-bekhta ^

[marko-bekhta]

Just double checked it and the build with https://github.com/quarkusio/search.quarkus.io/issues/241 is in production. The guides layout is updated and the guide icons will be of the main text color:

.qs-guide-icon svg {
    width: 70px;
    margin: 1rem 0px 0px;
    fill: var(--main-text-color);
}

[insectengine]

@maxandersen - the change above removes the last known blocker.

[yrodiere]

@gsmet @insectengine Are you sure this change is complete? It seems configuration tables were overlooked... ?

https://quarkus.io/guides/building-native-image#configuration-reference

[marko-bekhta]

Noticed a slight mismatch in the tooltip label and actual theme switch sequence: next: in the tooltip doesn't match the theme the button actually switches to 🙈

[gsmet]

@insectengine I let you have a look at the two issues above. Especially to the first one as it's a bit time sensitive.

[The-Funk]

@insectengine thank you for your work on this. 🎉