Current Color Scheme Hook #70
Assignees
Labels
new hook
Add new hook
Comments
|
I need to consult on what is the best way to implement this hook. In my research, I found three general cases where color schemes are defined. A list of the investigated methods and the benefits and limitations that come with them will be specified below:
The strategies taken by development teams are based on using all of the above together, in most cases giving priority in the following order:
Example: Reference: Shadcn/ui export function ThemeProvider({
children,
defaultTheme = 'system',
storageKey = 'vite-ui-theme',
...props
}: ThemeProviderProps) {
const [theme, setTheme] = useState<Theme>(
() => (localStorage.getItem(storageKey) as Theme) || defaultTheme
)
useEffect(() => {
const root = window.document.documentElement
root.classList.remove('light', 'dark')
if (theme === 'system') {
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
.matches
? 'dark'
: 'light'
root.classList.add(systemTheme)
return
}
root.classList.add(theme)
}, [theme])
const value = {
theme,
setTheme: (theme: Theme) => {
localStorage.setItem(storageKey, theme)
setTheme(theme)
},
}
return (
<ThemeProviderContext.Provider {...props} value={value}>
{children}
</ThemeProviderContext.Provider>
)
}
export const useTheme = () => {
const context = useContext(ThemeProviderContext)
if (context === undefined)
throw new Error('useTheme must be used within a ThemeProvider')
return context
}Questions:
|
Thank you for your research! Very insightful. 🙌 |
|
Perfect. Thanks |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Detect changes in the current color preference through Match Media and the classes defined in the root.
The text was updated successfully, but these errors were encountered: