Vue.js: How to retrieve css var under <script>

Question

I'm using chartJs to add a Doughnut chart on my app, but I need to setup it's color under <script> and I'd like to get the color from theme/variables.css .

In the code below, I have a hardcoded backgroundColor, but I'd like to get it from --ion-color-secondary and --ion-color-secondary-contrast instead. How can I achieve that?

Here is the code:

<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>

Answer 1

Following the tip from @EstusFlask in the comment regarding userCssVar, I manged to solve it in the following way:

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>