{"repo":"xcv58/use-system-theme","free":true,"listed":false,"github":"https://github.com/xcv58/use-system-theme","clone":"git clone https://github.com/xcv58/use-system-theme.git","description":"React Hook for System Theme","language":"TypeScript","stars":13,"topics":["react-hooks","nextjs","theme","typescript"],"license":null,"category":"saas-starters-boilerplates","readme_excerpt":"use-system-theme React Hook for System Theme (User preferred color scheme). Please use React 16.8.0 for React Hooks support. It detects the system theme and will update right after the users change the theme. Install or Usage Browser support As 2019 December, all major browsers on both mobile and desktop platforms support the prefers-color-scheme media query feature. For more details, please check: https://caniuse.com/#feat=prefers-color-scheme SSR support The useSystemTheme function has only one argument isSSR , and you must pass true for SSR app. Otherwise, your app may have bug like doesn't show dark them on dark theme devices. To support SSR (server side rendering), the initial theme will be always light (since we don't know the theme on the server side) and it would immediately become dark if the device's theme is dark . Unfortunately, we can't avoid this because of the React hydrate: React expects that the rendered content is identical between the server and the client. So that for all SSR app, the initial screen will be light and become dark immediately on dark theme devices. It's caused by the nature of how React SSR works. Development yarn start To build the library and watch the file changes locally. Develop with local examples The local examples use the yalc to get live local version library. You need to run yarn watch:yalc on the root directory during development. And use npx yalc add use-system-theme in the example directory under examples/ . Then follow the READ","default_branch":null,"files":null,"tree":[],"storefront":"/r/xcv58","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/xcv58/use-system-theme/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}