Dark mode/theme toggle for public content

[sofietoft]

What's your feature/idea?

Dark mode/theme is already possible for the GitBook platform.

It would be amazing if this feature was extended to the public content, so that readers/visitors on our docs site, can switch to dark mode.

What's your desired outcome?

A toggle - possibly on the right-hand side of the page - that enables users to switch the public-facing docs into dark mode.

What's the impact of this for you?

• Critical
• High
• Medium
• Low

Anything else?

We use GitBook for documentation for software developers. The thing that keeps coming up, when we ask for feedback is being able to switch the docs to dark mode/theme.

[SamyPesse]

I can't share an ETA at the moment, but this is definitely something we are considering doing.

We will first have to look at how it'll play out with existing customization options: if the visitor can switch between light and dark mode, then you need to have potentially 2 logos (one for light and one for dark mode) or also the ability to upload an alternative version of images; with the goal of making sure that the content will look great for both experiences.

[sofietoft]

Thanks for the reply @SamyPesse ! 💪
Awesome to hear that this is something you're considering - definitely a very desired feature from our community!

Good point about the logo(s) 🤔 - it should either be possible to set a logo for dark and one for light, or the dark mode shouldn't affect the logo "area". I guess that's a design decision, which is definitely not my strong suit - so I'll stay out of that one 😅

[bjarnef]

I guess some logos/images may work in both light and dark mode depending on the contrast. However on GitHub it was some time ago introduced, so it was possible to specify images in light/dark mode:
https://github.blog/changelog/2021-11-24-specify-theme-context-for-images-in-markdown/
https://twitter.com/github/status/1463556704436637707?lang=en

Maybe a similar approach would be possible in GitBook?

[vitaly-zdanevich]

I hope we can use https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

[rachellawson]

There are a few ways to achieve this without having to worry too much about multiple images etc. Take a look at https://rachelnorfolk.me/2020/wanting-add-little-darkness for an example.

[taszap]

Hi everyone, just a quick update from our side: it's in the works ⏳
I will make sure to share an update here and in our changelog once it's been shipped.

Housekeeping: related post #139

[Jisan09]

Any update on this ?

[taszap]

Hey, @Jisan09 we are conducting final tests and will be announcing this later this month/early June.
We may enable early testing access to selected users - I will reach out if that's the case.

[taszap]

Hello everyone,

Very excited to announce this has just shipped!
You can access the setting by navigating to your space, clicking customizations in sub-header and enabling this for your visitors!

You can check out how it works on our docs

Enjoy and please feel free to share any questions and feedback you might have.

[bjarnef]

@taszap looks great. Are the any plans to have a "auto" mode based on time of day? E.g. something like this https://shoelace.style/

[vitaly-zdanevich]

@bjarnef prefers-color-scheme is more important - operating system can change it, according to the time of the day too.