How To Make Adaptive Card Color Depending On Image Background
Tags: webdev, javascript, css, html
Published: 2022-06-24 12:12:55


Hi, this time we will experiment with creating a simple UI component that can change color according to the background image.

I was inspired by the music player notification on my phone:

![reference](https://ik.imagekit.io/qygr7i2zcyjz/adaptive-color/reference_bIZ53fHh8.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1656070082620)

And the experiment result:

![result](https://ik.imagekit.io/qygr7i2zcyjz/adaptive-color/result_a7Vlc9pskP.png?ik-sdk-version=javascript-1.4.3&updatedAt=1656068821572)

looks cool right? now let's start making it 🚀

## Preparation

we need to create html, css, and js files first

index.html

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Adaptive Card Color</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <script src="script.js"></script>
</body>

</html>

```

style.css

``` css
*,
*::before,
*::after {
    padding: 0; margin: 0;
    box-sizing: border-box;
}

html {
    font-family: sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

body {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
```

script.js

``` javascript
console.log("hello world");
```

## Make card component

create html structure of the card like this

``` html
<div class="card">
    <img class="card-image" src="">
    <div class="card-text">
        <span>Lorem Ipsum</span>
        <span>Is simply dummy text of the printing and typesetting industry.</span>
    </div>
 </div>
```

don't forget the style 

``` css
.card {
    position: relative;
    overflow: hidden;
    width: 90%;
    max-width: 400px;
    margin-bottom: 30px;
    padding: 30px;
}

.card-image {
    position: absolute;
    top: 0; right: 0;
    width: auto;
    height: 100%;
    object-fit: cover;
    object-position: center;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000);
            mask-image: linear-gradient(90deg, transparent, #000);
}

.card-text {
    position: relative;
    z-index: 2;
    max-width: 75%;
    display: flex;
    flex-direction: column;
}

.card-text span:first-child {
    font-weight: 500;
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.card-text span:last-child {
    opacity: 0.7;
}
```

> For image source you can get it from unsplash or use a local file.

## Extract color from image

Yes, we have to extract color from image and it's a quite complex job. Luckily, i found a cool library that will do for us https://github.com/lokesh/color-thief

add the library to our project

``` html
<script src="https://unpkg.com/colorthief@2.3.2/dist/color-thief.umd.js"></script>
```

## Javascript Time

``` javascript
// get all card elements.
const cards = document.querySelectorAll(".card");

// create colorthief instance
const colorThief = new ColorThief();

cards.forEach(async (card) => {
    const image = card.children[0];
    const text = card.children[1];

    // get palette color from image
    const palette = await extractColor(image);

    const primary = palette[0].join(",");
    const secondary = palette[1].join(",");

    // change color
    card.style.background = `rgb(${primary})`;
    text.style.color = `rgb(${secondary})`;
});

// async function wrapper
function extractColor(image) {
    return new Promise((resolve) => {
        const getPalette = () => {
            return colorThief.getPalette(image, 4);
        };

        // as said in the colorthief documentation, 
        // we have to wait until the image is fully loaded.
        
        if (image.complete) {
            return resolve(getPalette());
        }

        image.onload = () => {
            resolve(getPalette());
        };
    });
}
```

> If you get an error and you use image from internet, you can add `crossorigin="anonymous"` attribute on the `img` tag.

Next task, check if the primary color is dark or light so we can correctly choose color for the text. Happy experimenting :D

Thank you very much for reading. Don't hesitate to leave comments, criticisms or suggestions, I will really appreciate it ☺️

Image cover by <a href="https://unsplash.com/@find_something_pretty_everyday?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Hasmik Ghazaryan Olson</a> on <a href="https://unsplash.com/@find_something_pretty_everyday?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>