Skip to content

Conversation

austin-denoble
Copy link
Contributor

@austin-denoble austin-denoble commented Oct 6, 2023

Problem

@tdonia noticed the dark mode for the typescript client documentation was broken as we overrode a variety of styles with custom css, but didn't account for how the typedoc default theme handles media queries. We had also hidden the light/dark mode toggle, and I had cookies cached locally setting things to light mode, so this went unnoticed for a bit. 😅

There's no easy way to disable the default light/dark toggle behavior, and it defaults to the user's OS value.

Solution

  • Re-expose the mode selector. We had also hidden the entire settings accordion.
  • Update docs-styles.css to handle media queries on prefers-color-scheme and the data-theme attribute.

Initially I wanted to override everything with our own colors and keep the light/dark toggle disabled, but I think this would be far more tedious than just copying their patterns for managing colors, and overriding things individually for each mode.

In this PR I'm basically inheriting all their dark mode colors, and applying our Pinecone stuff in light mode. I also tweaked a few things to clean up look and feel in a few places while I was in there.

Before After
Screenshot 2023-10-06 at 3 41 49 PM Screenshot 2023-10-06 at 3 42 09 PM

Type of Change

  • Bug fix (non-breaking change which fixes an issue)

Test Plan

You can pull the branch down and run npm run docs:build locally. Navigate to ./docs in the repo and open the index file to view the generated documentation. Validate that light and dark modes both look visually reasonable.

@tdonia
Copy link
Contributor

tdonia commented Oct 6, 2023

looks great // works for me in both modes. thanks @austin-denoble!

Copy link
Collaborator

@jhamon jhamon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for tidying up :shipit:

@austin-denoble austin-denoble merged commit 58f34cf into main Oct 6, 2023
@austin-denoble austin-denoble deleted the adenoble/fix-typedoc-css-light-dark branch October 6, 2023 20:03
@austin-denoble austin-denoble restored the adenoble/fix-typedoc-css-light-dark branch October 19, 2023 21:59
@aulorbe aulorbe deleted the adenoble/fix-typedoc-css-light-dark branch May 28, 2024 21:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants