npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

use-system-theme

v0.1.1

Published

React Hook for System Theme

Downloads

422

Readme

use-system-theme

NPM npm bundle size

CircleCI Maintainability

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.

2019-12-25 19 43 26

Install

yarn add use-system-theme

or

npm install --save use-system-theme

Usage

import React from 'react'
import useSystemTheme from 'use-system-theme'

export default () => {
  const systemTheme = useSystemTheme()
  return <div>The System Theme is: {systemTheme}</div>
}

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.

declare const useSystemTheme: (isSSR?: boolean) => SystemTheme
import React from 'react'
import useSystemTheme from 'use-system-theme'

export default () => {
  const systemTheme = useSystemTheme(true)
  return <div>The System Theme is: {systemTheme}</div>
}

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 README file in each example folder.

Note: the yalc will change the pcakge.json for the example project to "use-system-theme": "file:.yalc/use-system-theme". Please do NOT commit the change because it would cause CI/CD failure.

License

MIT © xcv58