dark mode support with styled-components

index.tsx

import React, { lazy, useState } from 'react';
import { ThemeProvider } from 'styled-components/macro';
import lightTheme from 'theme/light';
import darkTheme from 'theme/dark';

export default function Router() {
  // fallback for lightTheme
  const [theme, setTheme] = useState(lightTheme);

  useEffect(() => {
    function changeTheme(e: any) {
      if (e.matches) {
        setTheme(darkTheme);
      } else {
        setTheme(lightTheme);
      }
    }
    // https://caniuse.com/#search=prefers-color-scheme
    const md = window.matchMedia('(prefers-color-scheme: dark)');
    md.addListener(changeTheme);
    changeTheme(md.matches);
    return () => {
      md.removeListener(changeTheme);
    };
  }, []);

  return (
    <ThemeProvider theme={theme}>
      <div>Hello theme mode!</div>
    </ThemeProvider>
  );
}