Created
May 22, 2024 05:00
-
-
Save BrianHung/5941bae43559272151caa355c42b112f to your computer and use it in GitHub Desktop.
Prefers Color Scheme JavaScript React
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export function setGlobalRootColor() { | |
try { | |
const rootElement = document.documentElement; | |
const classList = rootElement.classList; | |
classList.remove('light', 'dark'); | |
const themePreference = localStorage.getItem('theme'); | |
if (themePreference === 'system' || (!themePreference && true)) { | |
const prefersDark = '(prefers-color-scheme: dark)'; | |
const darkModeMediaQuery = window.matchMedia(prefersDark); | |
if (darkModeMediaQuery.media !== prefersDark || darkModeMediaQuery.matches) { | |
rootElement.style.colorScheme = 'dark'; | |
classList.add('dark'); | |
} else { | |
rootElement.style.colorScheme = 'light'; | |
classList.add('light'); | |
} | |
} else if (themePreference) { | |
classList.add(themePreference); | |
} | |
if (themePreference === 'light' || themePreference === 'dark') { | |
rootElement.style.colorScheme = themePreference; | |
} | |
} catch (error) {} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
interface useColorSchemeParams<T> { | |
light: T; | |
dark: T; | |
} | |
export const useColorScheme = <T>({ light, dark }: useColorSchemeParams<T>): T => { | |
const [colorScheme, setColorScheme] = React.useState<T>(light); | |
React.useEffect(() => { | |
if (!window.matchMedia) return; | |
const query = window.matchMedia('(prefers-color-scheme: dark)'); | |
setColorScheme(query.matches ? dark : light); | |
const onChange = () => setColorScheme(query.matches ? dark : light); | |
query.addEventListener('change', onChange); | |
return () => query.removeEventListener('change', onChange); | |
}, [light, dark]); | |
return colorScheme; | |
}; | |
export const useGlobalRootColor = () => | |
React.useEffect(function useGlobalRootColor() { | |
if (!window.matchMedia) return; | |
const query = window.matchMedia('(prefers-color-scheme: dark)'); | |
setGlobalRootColor(); | |
const onChange = () => setGlobalRootColor(); | |
query.addEventListener('change', onChange); | |
return () => query.removeEventListener('change', onChange); | |
}, []); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment