adding a props for changing the color of the months and days labels

[MrBigoudi]

I've added a prop to let the user choose the color of the labels for the months and the days. I've done so because when I had to use this module on a really dark background image I couldn't properly read the labels which were too dark. I've also modified the demo and the docs to handle the changes.

[razorness]

Hi @MrBigoudi. Thanks for your PR. I have a question: Is there any reason why this is more convenient than just using CSS?

[MrBigoudi]

Hi, thanks for your answer. I did these changes because I ran into an issue when I tried to use the module with tailwind while encapsulating a CalendarHeatmap inside a div. It might have been from my side but when adding a 'className="text-white"' in the div declaration, the labels weren't changing and, since I wanted to stick with tailwind only, I've tried messing with your code. This PR is pretty much a generalization of what I've done to fix my issue.

My example was the following:

<template>
    <div className="text-white">
        <CalendarHeatmap :tooltip="false" :values="heatmapData" :end-date="heatmapEndDate" :range-color="heatmapColors" :max="heatmapMaxCount"/>
  </div>
</template>

<script>
    import { CalendarHeatmap } from 'vue3-calendar-heatmap';
    import { fetchHeatmapData } from './github.js'

    export default {
        name: 'GitHubHeatmap',
        components: {
            CalendarHeatmap
        },
        data() {
            return {
                heatmapData: [],
                heatmapEndDate: "",
                heatmapColors: ['#FFFFFF', '#C4C4C4', '#9f7b7a', '#bb7672', '#d47067', '#eb6a59', '#ff6347'],
                heatmapMaxCount: 6,
                username: "mrbigoudi",
            };
        },
        methods: {
            getNow: function() {
                const today = new Date();
                this.heatmapEndDate= today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
            }
        },

        created(){
            this.getNow();
        },

        async mounted(){
            this.heatmapData = await fetchHeatmapData(this.username);
        }

    };
</script>

[razorness]

Okay ... let's say we stick with CSS to keep Javascript execution as flat as possible. On the other hand, the use of style is always quite nasty because of its high priority. We can use the special value currentColor.

Let's change

https://github.com/razorness/vue3-calendar-heatmap/blob/3bdc1eb3fa0b8362a47bb560085f5ddbc61d71ab/src/components/CalendarHeatmap.vue#L362

to

fill: currentColor;

Then, we can add

color: #767676;

as default to this block

https://github.com/razorness/vue3-calendar-heatmap/blob/3bdc1eb3fa0b8362a47bb560085f5ddbc61d71ab/src/components/CalendarHeatmap.vue#L333-L343

so the rule block looks like this

    .vch__container { 
        color: #767676;     

        .vch__legend { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
        } 

        .vch__external-legend-wrapper { 
            margin: 0 8px; 
        } 
    } 

Now, it should be possible to change the color of labels with a single CSS rule at the root element of this component:

<CalendarHeatmap class="text-white" .../>

Bonus: change problably won't break anyones styling by the usage of style attribute and it's easier to customize the overall look.

You wanna try this out?

[MrBigoudi]

Sure, that looks like a great compromise, I'll try it when I can !