The one with Chakra UI Vue and color palette switching
Tags: vue, chakraui, webdev
Published: 2020-09-18 18:56:10

### Let's start with a new small fun project with Chakra UI Vue!

I'm going to build a Vue.js project where it's possible to switch between color palettes defined in a custom theme object.

I picked a few palettes from [www.canva.com/colors/color-palettes](https://www.canva.com/colors/color-palettes) to use them in the project later on.

Visually the project will not contain much besides a nice grid showing the colors. This is how the end result will look like.

![The Project](https://dev-to-uploads.s3.amazonaws.com/i/qxqc47sy8uces5c1q99j.png)

### Aight let's roll 🚗 with the Vue CLI and start a new project

```bash
vue create my-project
# OR
vue ui
```

After waiting a few seconds I can add Chakra UI Vue into this.

```bash
vue add chakra-ui
```

If you do like some magic ✨ you can enable the auto import of the Chakra UI components during the setup of the **vue add chakra-ui** run, like I did.

Now we have a clean project, inside the **App.vue**. We have a template with the `<c-theme-provide/>` tag and the `<c-reset />` tag. 

Just to have a start we will add a `<h1>` in there for some content.

![Basic code of the project with cThemeProvide, CReset and H1](https://dev-to-uploads.s3.amazonaws.com/i/i1cvbwrhxruk2vu64mpr.png)

We need the **CThemeProvide** component so that all the Chakra UI components inside the tag can access the theme object.

The **CReset** component will provide all the needed css reset styles to make sure all the Chakra UI components work correctly.

Boot up the project using the following command.

```bash
yarn serve
```

🎉 Awesome job so far! Let's take a moment to check out this beautiful project!

### The real work starts now by adding a custom theme! 💅

Inside the **assets** folder we have created a new folder for our **themes** and created a Javascript file for the custom theme. We can call it whatever we want or be boring and use **custom-theme.js**.

Since we only will play around with custom colors, we only added those to the **theme object**.

![Code of the custom theme object](https://dev-to-uploads.s3.amazonaws.com/i/ythf3r9sihbyu3xhwaos.png)

When defining a palette we have to consider to keep the same object structure (primary-1, ..., primary-4) to have it interchangeable later on in the project.

Now that we have some pretty palettes inside the new custom theme object we have to let Chakra UI know we want to extend its default theme with our custom theme.

Inside the **main.js** file we have to pass our custom theme object in the **extend theme** option.

![Code of adding the custom theme in the extend theme option](https://dev-to-uploads.s3.amazonaws.com/i/oc7wtbhtle1ysnp2en2l.png)

### Let's build the grid displaying our custom palettes now! 🎉

As we dive into Charka UI we find two interesting components for grid building. We will keep it simple and use the **simpleGrid** ([https://vue.chakra-ui.com/simplegrid](https://vue.chakra-ui.com/simplegrid)) component.

![Updated grid view](https://dev-to-uploads.s3.amazonaws.com/i/itvv44cwtegocfdk89xh.png)

Yaay now everything is green... Don't worry it's what we need for now! 
So this grid makes 4 columns of a full screen height. 
Let's now change this green screen and add a palette in there.

The only thing we do have to change is the **style prop background**. We can shorten background to **bg** if you would prefer to type less.

The value for this prop will be our first color palette added as following.

![Code of grid with our first color palette](https://dev-to-uploads.s3.amazonaws.com/i/1xydc11lv8izhcsrzx4x.png)

Let's check out our grid, got to say it looks amazing right?!

### Toggle please?

Ok, now we should see how we can dynamically change the **style props** value, so we can toggle between the pallets.

First, we put our grid to the background and place a button to switch palettes on top of it. 

![Code of the template with the button](https://dev-to-uploads.s3.amazonaws.com/i/wavwjwt7zf0200d64hp8.png)

So we now have a blue button on top of our palette grid. I'm sure there are other ways to get that blue button in the center of the screen, but this is the way I'm sticking with now. Feel free to add your own implementation here! 💪

When the user clicks the button it should change to a new palette.

Inside the template we add the **@click** directive and call a newly added **changePalette** method.

![Code of the button](https://dev-to-uploads.s3.amazonaws.com/i/9jlt89hyko68oo62ers0.png)

Inside this method we start with setting the **currentPalette** to another one, for example bamboo beach. 🐼

![Code of the method to change palette](https://dev-to-uploads.s3.amazonaws.com/i/en7icrwxisq377yh09ll.png)

If we now press our blue button we see that value of **currentPalette** has been changed to 'bambooBeach'. Now we only have to make sure this also changes in the **Styled props** of the grid!

This can be done by dynamically binding our value of **currentPalette** to the **bg** styled prop.

![Code of the template with dynamic styled prop of the background](https://dev-to-uploads.s3.amazonaws.com/i/apxnguqrl2x3w3qnilfg.png)

You may notice the string concatenation in there, this is added since only the **currentPalette** is different.

### Let's make the palette picking random for the fun! 🤪

![Code of with the random number generator](https://dev-to-uploads.s3.amazonaws.com/i/op1rip5mzl4t2jckaext.png)

Firstly we need a list of all our palettes to pick a random palette from. 

Then we need a random number between 0 and the last index of the **paletteList**, so we can pick a palette at a random index in the array.

Who wants to see the same palette twice? Not me! 🙅‍♂️ To avoid this we have to add a little check.

If the random number obtained is less than the **lastRandom**, it can be used as is. Otherwise it has to be incremented by one, so that the **lastRandom** has been skipped.

It's really interesting that it's is possible for any **styled prop** value that can be set inside the **custom theme**. So we can make for example our own "black & white" mode.

Now let's smash that button and have fun! 🎉

### **❤️ Contribute to this blog**

Having any questions, caught a mistake or have tips? Please reach out to me!