Skip to content

[Feature request]: add contrast provider#360

Open
ihardlight wants to merge 6 commits intopacocoursey:mainfrom
ihardlight:feat/contrast-provider
Open

[Feature request]: add contrast provider#360
ihardlight wants to merge 6 commits intopacocoursey:mainfrom
ihardlight:feat/contrast-provider

Conversation

@ihardlight
Copy link

@ihardlight ihardlight commented Jun 8, 2025

I would like to be able to get not only theme from provider but user contrast preferences as well
I have developed a new library called “next-contrast,” which functions similarly to “next-themes” but with a focus on contrast.

📌 Summary

This PR introduces a new ContrastProvider and useContrast API to improve accessibility by enabling explicit support for the prefers-contrast media query. These additions make it possible to handle high-contrast themes in a declarative and ergonomic way within the existing next-themes ecosystem.

🧩 What’s Included
• ✅ ContrastProvider: context provider that detects and responds to user’s contrast preferences.
• ✅ useContrast hook: allows access to the current contrast mode and preference in a fully typed and reactive way.
• ✅ SSR-safe hydration and fallback handling for contrast preference detection.
• ✅ E2E test coverage for both system-based and user-defined contrast modes.
• ✅ Documentation updates in the README, including usage examples and configuration options.

🎯 Motivation

Many operating systems support user preferences for high or low contrast, which is essential for users with vision impairments or accessibility needs. However, there has been no built-in way to integrate this into next-themes. By adding a ContrastProvider, developers can now:
• Respect and respond to system contrast settings.
• Explicitly define and persist contrast themes
• Build UIs that adapt to both theme and contrast preferences.

This lays the groundwork for building more accessible, flexible, and user-centered Next.js applications.

@ihardlight ihardlight changed the title feat: add contrast provider [Feature request]: add contrast provider Jun 9, 2025
@ihardlight
Copy link
Author

@pacocoursey Hi! What do you think about supporting high contrast themes?

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.

1 participant