Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Theme changing in react

What package/library is best for theme changing in react? I would mention that I’m not using Tailwind, just simple scss. Is there a similar alternative like next-themes is for nextjs? Or what do you suggest for best performance for changing theme (dark mode/light mode).

Tags:

2

Answers


  1. 0

    For changing theme you should prefer React Context API – create context to manage your theme state (dark / light ) and provide it throughout your component tree or if there is another way i would really like to know…

    Login or Signup to reply.
  2. 0

    You can try the classical theming of React’s Material UI or, if you want just a package use-dark-mode.
    You can install this last one with:

    npm i use-dark-mode

    And to use it for example:

    import React from 'react';
import useDarkMode from 'use-dark-mode';
 
import Toggle from './Toggle';
 
const DarkModeToggle = () => {
  const darkMode = useDarkMode(false);
 
  return (
    <div>
      <button type="button" onClick={darkMode.disable}>
        ☀
      </button>
      <Toggle checked={darkMode.value} onChange={darkMode.toggle} />
      <button type="button" onClick={darkMode.enable}>
        ☾
      </button>
    </div>
  );
};
 
export default DarkModeToggle;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search