window.matchMedia('(prefers-color-scheme: dark)')

  .addEventListener('change', event => {

      const colorScheme = event.matches ? "dark" : "light";

      console.log(colorScheme); // "dark" or "light"

 });

import React from 'react'

import { func, string } from 'prop-types';

import styled from "styled-components"

const Button = styled.button`

  background: ${({ theme }) => theme.background};

  border: 2px solid ${({ theme }) => theme.toggleBorder};

  color: ${({ theme }) => theme.text};

  border-radius: 30px;

  cursor: pointer;

  font-size:0.8rem;

  padding: 0.6rem;

  }

\`;

const Toggle = ({theme,  toggleTheme }) => {

    return (

        <Button onClick={toggleTheme} >

          Switch Theme

        </Button>

    );

};

Toggle.propTypes = {

    theme: string.isRequired,

    toggleTheme: func.isRequired,

}

export default Toggle;

​

import React, { useState, useEffect } from 'react';

​

const App = () => {

  const [darkMode, setDarkMode] = useState(false);

  useEffect(() => {

    const bodyElement = document.querySelector('body');

    if (darkMode) {

      bodyElement.classList.add('dark');

    } else {

      bodyElement.classList.remove('dark');

    }

  }, [darkMode]);

​

  const toggleDarkMode = () => {

    setDarkMode(!darkMode);

  };

​

  return (

    <div>

      <button onClick={toggleDarkMode}>

        {darkMode ? 'Disable Dark Mode' : 'Enable Dark Mode'}

      </button>

​

      {/* Your app content goes here */}

    </div>

  );

};

​

export default App;