Adjust colors for dark-mode

[LordSimal]

Summary

It would be nice if the default generated charts also look nice in dark mode. Some of us use system wide dark mode.

Proposal

Adjust text colors etc. to be readable and apropriate in dark mode.

Additional Notes

E.g. (those are generated entries, so don't worry 😉)

[LordSimal]

Currently I just added this to my CSS

@media (prefers-color-scheme: dark) {
    .apexcharts-text.apexcharts-yaxis-label,
    .apexcharts-text.apexcharts-xaxis-label,
    .apexcharts-legend-series .apexcharts-legend-text {
        color: theme('colors.gray.300') !important;
        fill: theme('colors.gray.300');
    }

    .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title,
    .apexcharts-tooltip-text {
        color: theme('colors.gray.700');
        fill: theme('colors.gray.700');
    }
}

[Rusbelito]

thanks , its work for me , but it don't change the color of title :c , i add that :

.apexcharts-text.apexcharts-yaxis-title-text , thanks

Currently I just added this to my CSS

@media (prefers-color-scheme: dark) {
    .apexcharts-text.apexcharts-yaxis-label,
    .apexcharts-text.apexcharts-xaxis-label,
    .apexcharts-legend-series .apexcharts-legend-text {
        color: theme('colors.gray.300') !important;
        fill: theme('colors.gray.300');
    }

    .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title,
    .apexcharts-tooltip-text {
        color: theme('colors.gray.700');
        fill: theme('colors.gray.700');
    }
}