Fix typedoc Light/Dark mode styling #133
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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
docs-styles.css
to handle media queries onprefers-color-scheme
and thedata-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.
Type of Change
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.