Recommend A react Library which make you elegant and quickly to create dark mode on react.js

leslieSie — Mon, 22 Aug 2022 15:49:00 +0000

We always have a need,use one button to change your company website or system to dark mode theme.It looks easy to deal with it,but actually not.So today, I recommend the Library called react-dark-mode-lib help you easier to handle it.

Why recommand react-dark-mode-lib?

We've concluded that there are three ways to do this.

Change CSS

this way is easy to understand, you bind variable on React Dom. change variable let className or styles change.then before, you must comfirm define CSS on global. For example:

import { useState } from 'react'
const App= () => {
    const [status, setStatus] = useState(false)
    return (
       <>
         <button onClick={ () => setStatus(!status) }>Change color</button>
         <div className={ status ? 'activeBgColor': 'normalBgColor' }>test</div>
       </>
    )
}

  .activeBgColor {
     background: black
  }
  . normalBgColor {
    background: white
  }

The problem is obvious,you need to maintain multi-css.

Use CSS3 filter add the follow CSS will deal the problem.

body{
    filter: invert(100%) hue-rotate(180deg) brightness(115%) contrast(95%) !important;
}

this way not allow you custom special element css

Use CSS3 mix-blend-mode

this way can do it,but github no found a library handle elegant and quickly on react. The reason is why create react-dark-mode-lib

How to Use

First, you should use npm/yarn tool install the library

npm install react-dark-mode-lib

then the simplest use is direct import library. For example:

import DarkMode from 'react-dark-mode-lib'
import { useState } from 'react'

const App = () => {
  const [visible, setVisible] = useState(false) 
  return (
    <DarkMode visible={visible} />
  )
}

The biggest feature is that allow use JSX to created any element on dark mode Layer. you can run the example to know more.

If you have issues and suggestion,called me on github.If help your work,Please give a star on github to me.Thank you.

DEV Community: leslieSie

Recommend A react Library which make you elegant and quickly to create dark mode on react.js

Why recommand react-dark-mode-lib?

How to Use