Dark mode

[asafm]

Desired feature or idea: What would you like to see happen?
I would like to read the website at night comfortably, hence I would like the site to support dark mode automatically, based on the operating system setting.

---

• Registry code-block styling workaround is incompatible with dark mode #4389
• Switch to using Chroma classes rather than embedded styles #4391
• [Dark mode] Left-nav color and contrast adjustments are needed google/docsy#1943
• Mermaid: support dark mode google/docsy#1961
• .td-box--white should be dark-mode compatible google/docsy#1967
• White blocks/lead down arrow doesn't match dark-mode colors google/docsy#1970
• [Dark mode] Banner compatibility prep #4347
• Enable light/dark mode menu #4346
• Bring in last Docsy light/dark mode related element color fixes

[svrnm]

hey @asafm, we use docsy as hugo template, so it might be an option to bring this feature there to get it for the opentelemetry.io website. @chalin wdyt?

[theletterf]

Notice that google/docsy#331 is still open.

[chalin]

Yes, there's base work that needs to be done first -- migrating to Bootstrap 5.3. That should get some attention in the next release (or so) :).

[theletterf]

@chalin Support for custom themes will unlock this?

[chalin]

Yes, the feature is on its way -- probably next week, via version 0.10.0 of Docsy.

[svrnm]

As this has a clear outcome ("implement dark mode when docsy has it") I remove the discussion label, but I add blocked since this depends on docsy being 0.10

[cartermp]

The little collapsy arrow would probably look more visually distinct if it had a brighter color

▶️ Edit: tracked via:

• [Dark mode] Left-nav color and contrast adjustments are needed google/docsy#1943

[pellared]

Registry and Status pages look incorrect

▶️ Edit (@chalin)

• .td-box--white should be dark-mode compatible google/docsy#1967

[jpkrohling]

Came here to also say that the Registry page looks odd :-)

▶️ Edit (@chalin)

• .td-box--white should be dark-mode compatible google/docsy#1967

[theletterf]

Love it overall!

We might want to check all Mermaid diagrams for weird color / transparency effects. See, for example, https://deploy-preview-4347--opentelemetry.netlify.app/docs/concepts/instrumentation-scope/

Mermaid has dark mode support, apparently. Check:

• Mermaid Diagrams in Dark Mode alshedivat/al-folio#1609
• https://mermaid.js.org/config/theming.html#available-themes

▶️ Edit (@chalin)

• Mermaid: support dark mode google/docsy#1961

[chalin]

Thanks all for your feedback, it's much appreciated! I'll look into each issue. Keep'm coming ✨

[tiffany76]

Many of the code snippets have faded to illegible, at least for me. This screenshot is from the Collector Quick start page, but the issue is present on many other pages as well.

▶️ Edit (@chalin):

• Registry code-block styling workaround is incompatible with dark mode #4389
• Switch to using Chroma classes rather than embedded styles #4391

[chalin]

The little collapsy arrow would probably look more visually distinct if it had a brighter color ...

@cartermp - here's a preview of the fix in google/docsy#1952, WDYT?

• https://deploy-preview-1952--docsydocs.netlify.app/docs/

[asafm]

Thanks a lot for this!