Adaptive React.js Duotone component
Tags: react, javascript, css, html
Published: 2020-07-07 09:48:58

---
title: Adaptive React.js Duotone component
published: true
description: Create a beautiful dynamic duotone React component
tags: react,js,css,html
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/aadv621kg1fh6yisvh6z.png
canonical_url: https://www.jimraptis.com/blog/react-adaptive-duotone-effect/
---

This tutorial is about creating a simple duotone React.js component you can easily tweak.

> Duotone design refers to creations that are made up of two contrasting colors. Much like what it describes, the word “duotone” has two parts: “duo,” meaning double, and “tone,” meaning color.

If you're impatient like me, grab the Codesandbox code right away.

{% codesandbox react-duotone-tutorial-w1zqt %}

Let's start!

## Setup

The best way to start building a new single-page application in React in by using <code class="code-inline">create-react-app</code>. Replace the _duotone-app_ text with your app's name.

```javascript
  npx create-react-app duotone-app
```

The only external library is the CSS-in-JS library React <code class="code-inline">styled-components</code>. It comes in handy when you want to pass variables in your CSS. The installation command is the following:

```javascript
  yarn add styled-components
```

## How it works

Our approach is based on the hacky way described in this tweet by [Una Kravetz](https://twitter.com/Una).

  <blockquote class="twitter-tweet"><p lang="en" dir="ltr">Duotone images are so <a href="https://twitter.com/hashtag/trendy?src=hash&amp;ref_src=twsrc%5Etfw">#trendy</a> right now 😎<br><br>Had some airport time so I drew out how to get this effect w/one div in CSS 😊 <a href="https://twitter.com/hashtag/devdoodles?src=hash&amp;ref_src=twsrc%5Etfw">#devdoodles</a> <a href="https://t.co/WENOWlwcUY">pic.twitter.com/WENOWlwcUY</a></p>&mdash; Una Kravets 👩🏻‍💻 (@Una) <a href="https://twitter.com/Una/status/923231326420922368?ref_src=twsrc%5Etfw">October 25, 2017</a></blockquote>

The image is set as a <code class="code-inline">background-image</code> of a div element. Then, we utilize the <code class="code-inline">::before</code> and <code class="code-inline">::after</code> selectors to add two colored overlay layers above the div. The hack is on using the CSS property <code class="code-inline">mix-blend-mode</code> to blend the overlay layers with the original image.

> The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.

One important point here is that the colors have to be contrasting to make the effect aesthetically pleasing!

## Build the Duotone component

The React component will get as props the url of your image and two contrasting colors:

```javascript
<Duotone
  src="https://source.unsplash.com/random"
  lightColor={lightColor}
  darkColor={darkColor}
/>
```

Defining the actual div element with the <code class="code-inline">background-image</code> property is our 1st task.

```css
const Duotone = styled.div`
  background-image: url(${props => props.src});
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 50% 50%;

  position: relative;

  /* Setup the fixed dimensions */
  width: 225px;
  min-height: 400px;
`
```

The <code class="code-inline">position: relative</code> rule is necessary to position the overlay layers relative to the original div. Unfortunately, there is one small drawback with this method. You have to specifically know and set the dimension of your image.

Now, we're ready to apply the selectors that represent the overlay layers. The <code class="code-inline">::before</code> selector sets as background color the <code class="code-inline">lightColor</code> with <code class="code-inline">mix-blend-mode: darken</code>. In that way, the background is replaced with the content where the content is , otherwise, it is left as it was.

```css
&::before {
  background-color: ${props => props.lightColor};
  content: "";
  display: block;
  border-radius: 32px;
  width: 100%;
  height: 100%;
  mix-blend-mode: darken;
  position: absolute;
}
```

Then, we simple apply the <code class="code-inline">::after</code> selector too. Here, the backgroud get the <code class="code-inline">darkColor</code> and set the CSS rule <code class="code-inline">mix-blend-mode: lighten</code> to replace the background with the content where the content is lighter.

```css
&::after {
  background-color: ${props => props.darkColor};
  content: "";
  display: block;
  border-radius: 32px;
  width: 100%;
  height: 100%;
  mix-blend-mode: lighten;
  position: absolute;
}
```

Our component is ready!

## Real-life use case

I used the Duotone component for [the root page of my blog](http://www.jimraptis.com/).

As you've already noticed, the blog has multiple theming options. The problem was how could I adapt my header image to the active theme. My initial thought was to use a gradient overlay above the image. But I didn't like this idea due to its aesthetic result.

By implementing the Duotone component, I was able to easily customize the image based on the active primary and secondary colors and produce an eye-catching effect.

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Theming v2<br><br>- More color palettes<br>- Adaptive duotone effect based on the active theme <a href="https://t.co/NKCAQIfTKg">pic.twitter.com/NKCAQIfTKg</a></p>&mdash; Jim Raptis💥 (@d__raptis) <a href="https://twitter.com/d__raptis/status/1279906014440144897?ref_src=twsrc%5Etfw">July 5, 2020</a></blockquote>

## The final Duotone React component

Here is the final Duotone React component:

```css
const Duotone = styled.div`
  background-image: url(${props => props.src});
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 50% 50%;

  position: relative;

  /* Setup the fixed dimensions */
  width: 225px;
  min-height: 400px;


  &::before {
    background-color: ${props => props.lightColor};
    content: "";
    display: block;
    border-radius: 32px;
    width: 100%;
    height: 100%;
    mix-blend-mode: darken;
    position: absolute;
  }

  &::after {
    background-color: ${props => props.darkColor};
    content: "";
    display: block;
    border-radius: 32px;
    width: 100%;
    height: 100%;
    mix-blend-mode: lighten;
    position: absolute;
  }
`
```

If you liked this post, you can [follow me on Twitter](https://twitter.com/intent/follow?original_referer=https://www.jimraptis.com&screen_name=d__raptis) where I share daily tips about coding, design and bootstrapping micro-startups.