How to make the dark mode/white mode switch in React more distinctive

🔓 What you'll get from this 4-minute read

• You'll get to know a quick and neat trick to achieve a more creative switch between dark mode and white mode within React.

• You'll establish more self-confidence for your future front-end React projects.

In order to see the following explanation in action, please see this codepen.

🎯 The Objective

Switching between dark mode and white mode on any webpage that offers such a service mostly changes the general interface colors. While this process in itself is quite handy, it's pretty much done the same way for almost every standard webpage you can find - the interface colors are just switched out with darker ones.

This means there is potential to create some sort of unique feature in this regard. In this quick guide, I will show you how to utilize a background image in React for this purpose.

Therefore, we will create an effect where the background image will change to a darker or brighter part in order to fit the dark mode or white mode, respectively.

For this quick guide, I'm assuming that a React project has already been created.

🔧 Setting it up

As a first step, I want to create a React state that will receive a boolean type - false or true:

const [darkmode, setDarkMode] = React.useState(false)

In my example, I'm using a variable in order to create the required CSS styles. This approach is handy since we can directly implement any states - like our darkmode state that we already created.

See the comments I added for the following code to get an insight into why I added these specific styles:

const backgroundStyle = {
    // large height, so we are able to scroll:
    height: '150vh',

    // Choose an image with a darker portion on bottom
    // and a lighter portion on the top, or vice versa:
    backgroundImage: `url(https://cdn.pixabay.com/photo/2022/01/25/16/01/sky-6966721_960_720.jpg)`,

    // We want our image to cover the whole available space:
    backgroundSize: 'cover',

    // If the dark mode state is "true" it will switch 
    // to the bottom part of the image (the darker portion). 
    // With "false", it will stay at the top (the brighter portion):
    backgroundPosition: darkmode ? 'bottom' : 'top',

    // We want our image to stay in place while we are scrolling:
    backgroundAttachment: 'fixed',

    // Set a transition for the switch between the dark 
    // and white mode (otherwise it will jump from top to bottom or vice versa)
    transition: 'all 1s',
  }

After this step, I want to actually return something in React while having the opportunity to change the darkmode state. Therefore, I'm implementing the following code into our small example:

  return(
    <div style={backgroundStyle}>
      <button 
        style={buttonStyle} 
        onClick={() => setDarkMode(!darkmode)}
      >
        CLICK HERE FOR CHANGE
      </button>
    </div>
  )

Please keep in mind that the buttonStyle is just some styling for buttons, that has no further impact on the actual feasibility of this example. Feel free to add whatever you want to the styling.

With the onClick mechanism, we are arranging the change between the boolean values for our darkmode state - from false to true and vice versa.

❗ Have the following in mind

You will see that the image I picked for this example may not be perfect. This small effect highly depends on whether you have access to suitable background/landscape images or not.

For my projects, I normally like to use Vexels.com since it provides me with unique, stylish images while being clear with the copyright.

I also didn't utilize the prefers-color-scheme media feature of CSS for this small example.

✅ Conclusion

In my opinion, this small effect has the potential to add a little unique feature to front-end projects. Of course, this is not a suitable solution for every occasion. However, I think that it's valuable to stay creative and find these little chances that can help to sharpen your overall skills while being useful for some projects.

📃 Resources

• Used background image: Nathtravelandphoto via pixabay.com