Hey there! I'm currently working on achieving a unique design inspiration that involves colorful badges grouped together. Here's a visual reference: https://i.sstatic.net/5LDBh.png
In the image, you can see these badges grouped in pairs, but they can actually be in sets of 4 or even 5.
My goal is to dynamically change both the background and text colors of each badge within every group programmatically.
I've experimented with numerous approaches, but none have quite hit the mark yet. At best, I've only been able to adjust the color of the first badge.
Here's a snippet from my page layout:
<template>
<div class="w-full flex flex-col px-6">
...
... (rest of the template)
...
</div>
</template>
<script>
import { mapState } from 'vuex';
...
... (remaining script content)
...
</script>
This component houses the mentioned badge:
<template>
...
... (component structure)
...
</template>
<script>
import { mapState } from 'vuex';
export default {
name: 'type',
props: ['name', 'bg-color', 'text-color'],
computed: {
...mapState({
colours: state => state.schedule.colours
}),
}
}
</script>
Furthermore, here's an overview of my store file:
export const state = () => ({
...
... (store state details)
...
});
export const mutations = {
...
... (mutations description)
...
}
export const actions = {
...
... (actions summary)
...
}
Ultimately, my objective is to randomly assign distinctive background colors to each individual badge within the groups, ensuring optimal visibility of text based on the color contrast. The challenge lies in applying this logic seamlessly across all badges without any repetition of colors.
If anyone has insights into how I can achieve this fluid color assignment for all badges within their respective groups, your guidance would be immensely appreciated! Thank you.