mharj-react-dark

react-dark

Dark Mode context API based on prefers-color-scheme

Install

npm i mharj-react-dark

Provider setup

ReactDOM.render(
	<DarkModeProvider>
		<App />
	</DarkModeProvider>,
	document.getElementById('root'),
);

Provider can have initialValue={true/false} attribute

usage as HOC

use direct DarkModeConsumer, or

withDarkMode wrapper

class SomeComponent extends React.Component<WithDarkMode> {
	public render() {
		return <>Dark Mode: {this.props.isDarkMode ? 'true' : 'false'}</>;
	}
}

export default withDarkMode(App);

usage as Hook

useDarkMode

export const SomeComponent: React.FC = () => {
	const {isDarkMode} = useDarkMode();
	return <>Dark Mode: {isDarkMode ? 'true' : 'false'}</>;
};