Docs dark mode v1.0

[akeller]

Description

Add a "dark mode" option to the docs web site, and check/refine CSS styles and content for any issues and to align branding with product dark mode.

When should this change go live?

• This is a bug fix, security concern, or something that needs urgent release support.
• This is already available but undocumented and should be released within a week.
• This on a specific schedule and the assignee will coordinate a release with the DevEx team. (apply hold label or convert to draft PR)
• This is part of a scheduled alpha or minor. (apply alpha or minor label)
• There is no urgency with this change and can be released at any time.

PR Checklist

• My changes are for an already released minor and are in /versioned_docs directory.
• My changes are for the next minor and are in /docs directory (aka /next/).

• My changes require an Engineering review, and I've assigned the Engineering DRI or delegate.
• My changes require a technical writer review, and I've assigned @camunda/tech-writers as a reviewer.

[mesellings]

Did some work on this today, still to check:

• Admonitions
• Tabs
• API ref styles
• Some images as discussed (transparent SVGs)

But other than that, it's already looking good (homepage and page content)! Shouldn't take much to finish off and get into review for the team.

@akeller FYI, I think this will be done before the hackathon, so might scrap that idea.

[mesellings]

SVGs non-blocking:
Investigated page: http://localhost:3000/docs/next/components/modeler/bpmn/bpmn-coverage

• All images render sufficiently, though black outlined ones could be clearer.
• Don't want to add a blanket background colour to .SVGs
• Suggest follow-up work on this page to go through these images and improve for dark mode.

[mesellings]

@camunda/tech-writers The first iteration of dark mode is now ready for review in this PR:

https://preview.docs.camunda.cloud/pr-4510/index.html

Changes made as follows:

• General dark mode styling/colours follows the product dark mode where possible.
• Home page edited to suit dark mode.
• Enable/disable using the icon at the top right of the banner.

Things to look at and check if we need to make further mods, or if they are 'okay as is' for now.

• Admonition colours
• Tabs (I changed them to 'buttons in dark mode)
• Link colour (blue works better than orange in dark mode and matches product)
• API ref styles
• Images (might do some follow-up work on a few specific pages with transparent SVGs, but they are usable for now)

[conceptualshark]

This is super cool, thank you for all the time you've put into making this feasible!! 🙌

• The admonitions, like you mentioned, including things like <details>, look very bright for the theme. When stacked with other elements (code blocks or admonitions nested in <details>) I think this becomes more apparent.

• The badge buttons also look very bright:

• The Algolia search seems to use a different default dark mode, but I don't think this necessarily needs to be updated in a V1 push.

I'm not sure how important any of these are! Nothing looks dramatic, everything seems to be functioning on the pages I'm reviewing in the areas you've asked us to take a look at. I'm stoked for this to be possible!

[mesellings]

Had some time at the RSG so took a look at badges, links, and general accessibility 👍

[github-actions]

The preview environment relating to the commit 198c387 has successfully been deployed. You can access it at https://preview.docs.camunda.cloud/pr-4510/index.html