react dark mode

1      if #available(iOS 13.0, *) {
2          UIWindow.appearance().overrideUserInterfaceStyle = .light
3      }
4

1import React from 'react'
2import { func, string } from 'prop-types';
3import styled from "styled-components"
4const Button = styled.button`
5  background: ${({ theme }) => theme.background};
6  border: 2px solid ${({ theme }) => theme.toggleBorder};
7  color: ${({ theme }) => theme.text};
8  border-radius: 30px;
9  cursor: pointer;
10  font-size:0.8rem;
11  padding: 0.6rem;
12  }
13\`;
14const Toggle = ({theme,  toggleTheme }) => {
15    return (
16        <Button onClick={toggleTheme} >
17          Switch Theme
18        </Button>
19    );
20};
21Toggle.propTypes = {
22    theme: string.isRequired,
23    toggleTheme: func.isRequired,
24}
25export default Toggle;
26

1// DarkMode/index.js
2
3const DarkModeToggle = () => {
4  const [isDark, setIsDark] = useState(localStorage.getItem("theme") === "dark" ? true : false);
5  useEffect(() => {
6    document
7    .getElementsByTagName("HTML")[0]
8    .setAttribute("data-theme", localStorage.getItem("theme"));
9  },[]);
10

1$ npm i use-dark-mode