Estoy usando chartJs para agregar un gráfico de anillos en mi aplicación, pero necesito configurar su color en <script> y me gustaría obtener el color de theme/variables.css .
En el siguiente código, tengo un backgroundColor codificado, pero me gustaría obtenerlo de --ion-color-secondary y --ion-color-secondary-contrast en su lugar. ¿Cómo puedo lograr eso?
Aquí está el código:
<template> <Doughnut :chart-data="chartData" :chart-options="chartOptions" /> </template> <script lang=ts> import { defineComponent, PropType } from 'vue' import { Doughnut } from 'vue-chartjs' import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale, Plugin } from 'chart.js' ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale) export default defineComponent<{fastdata: any}>({ name: 'MrProgress', components: { Doughnut }, inject: ["fastdata"], setup() { const chartOptions = { responsive: true, maintainAspectRatio: true, cutout: "90%", borderWidth: 0, } return { chartOptions, }; }, computed: { chartData() { const pts = this.fastdata.user.pts; const missing = this.fastdata.user.proximo_nivel - pts; return { datasets: [ { backgroundColor: ['#41B883', '#e4e0d8'], data: [pts, missing] } ] } } } }) </script>Siguiendo el consejo de @EstusFlask en el comentario sobre userCssVar , logré resolverlo de la siguiente manera:
npm i @vueuse/core
... import { useCssVar } from '@vueuse/core' import { ref } from 'vue' <script> ... const color_pts = useCssVar(ref('--ion-color-secondary'), ref(null)).value; const color_missing = useCssVar(ref('--ion-background-color'), ref(null)).value; return { datasets: [ { backgroundColor: [color_pts, color_missing], data: [pts, missing] } ] } ... </script>