Skip to content

docs: fix docs dark mode example contrast#1694

Merged
silviuaavram merged 2 commits into
downshift-js:masterfrom
pupuking723:fix/docs-dark-mode-contrast
Jun 25, 2026
Merged

docs: fix docs dark mode example contrast#1694
silviuaavram merged 2 commits into
downshift-js:masterfrom
pupuking723:fix/docs-dark-mode-contrast

Conversation

@pupuking723

Copy link
Copy Markdown
Contributor

Fixes #1668.

This updates the Docusaurus example controls to use theme-aware colors instead of hard-coded light mode values. The shared examples now use Docusaurus color variables for labels, inputs, buttons, select toggles, and menu text, with explicit highlighted-item colors for dark mode. The tag group combobox styles also use theme variables for the input wrapper, input, toggle button, menu, and highlighted options.

The change is scoped to documentation examples only and does not touch Downshift runtime behavior.

Verification:

  • npm run docs:build
  • npx tsc --noEmit -p docusaurus/tsconfig.json
  • npx kcd-scripts format docusaurus/pages/combobox.tsx docusaurus/pages/shared.css docusaurus/pages/useCombobox.tsx docusaurus/pages/useMultipleCombobox.tsx docusaurus/pages/useMultipleSelect.tsx docusaurus/pages/useSelect.tsx docusaurus/pages/useTagGroupCombobox.css
  • git diff --check

@silviuaavram

Copy link
Copy Markdown
Collaborator

hey @pupuking723 thanks for the PR! I will take a look shortly. One comment: the original issue is about the styles in the downshift docsite, which sits in this repo. If you would also like to take a shot at that, it would be great! Thanks!

@codecov-commenter

codecov-commenter commented Jun 23, 2026

Copy link
Copy Markdown

⚠️ Please install the 'codecov app svg image' to ensure uploads and comments are reliably processed by Codecov.

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (74ce0f5) to head (54f62a9).
⚠️ Report is 28 commits behind head on master.
❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files
@@            Coverage Diff             @@
##            master     #1694    +/-   ##
==========================================
  Coverage   100.00%   100.00%            
==========================================
  Files           18        69    +51     
  Lines         1726      1922   +196     
  Branches       518       591    +73     
==========================================
+ Hits          1726      1922   +196     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@silviuaavram silviuaavram changed the title fix docs dark mode example contrast docs: fix docs dark mode example contrast Jun 25, 2026
@silviuaavram silviuaavram merged commit 3c7584b into downshift-js:master Jun 25, 2026
4 checks passed
@pupuking723

Copy link
Copy Markdown
Contributor Author

Thanks for reviewing and merging this. I’ll take a look at the docsite styling location as a follow-up and open a separate PR if I can keep it scoped.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Dark mode contrast issue on docs page

3 participants