react dark mode check system mode

Upset Unicorn answered on May 19, 2021 Popularity 8/10 Helpfulness 4/10

answer react dark mode check system mode

related react dark mode

react dark mode check system mode

Comment

window.matchMedia('(prefers-color-scheme: dark)')
  .addEventListener('change', event => {
      const colorScheme = event.matches ? "dark" : "light";
      console.log(colorScheme); // "dark" or "light"
 });

Popularity 8/10 Helpfulness 4/10 Language javascript

Source: www.kindacode.com

Tags: javascript mode system

Link to this answer
Share Copy Link

Contributed on Aug 17 2022

Upset Unicorn

0 Answers Avg Quality 2/10

Closely Related Answers

react dark mode

Comment

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;

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: www.smashingmagazine.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on May 19 2021

Elated Emu

0 Answers Avg Quality 2/10

react dark mode

Comment

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;

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 12 2023

YOU.com

0 Answers Avg Quality 2/10

react dark mode check system mode

Contents

More Related Answers