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 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.
Aight let's roll 🚗 with the Vue CLI and start a new project
vue create my-project
# OR
vue ui
After waiting a few seconds I can add Chakra UI Vue into this.
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.
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.
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.
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.
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) component.
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.
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.
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.
Inside this method we start with setting the currentPalette to another one, for example bamboo beach. 🐼
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.
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! 🤪
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!
Top comments (0)