我有一个React应用程序，它使用Chart.js来渲染图表。我想使用Tailwind CSS配置中定义的自定义颜色来自定义图表中标签的颜色。我已经在我的tailwind.config.js和CSS文件中设置了自定义颜色，但我不确定如何将这些颜色用于我的图表标签。
以下是我的代码中的相关组件：

index.css：

@tailwind base;
@tailwind components;
@tailwind utilities;

.theme-light {
  --labelColor: #000000;
}

.theme-dark {
  --labelColor: #ffffff;
}

字符串

tailwind.config.js：

module.exports = {
  theme: {
    extend: {
      colors: {
        labelColor: 'var(--labelColor)',
      },
    },
  },
  plugins: [],
};

型

chart.jsx：

import React from 'react';
import { Bar } from 'react-chartjs-2';
import { Chart, registerables } from 'chart.js';

Chart.register(...registerables);

const Graph = ({ chartData }) => {
  const options = {
    plugins: {
      legend: {
        display: true,
        labels: {
          usePointStyle: true,
          color: **labelColor**,
        }
      }
    },
    scales: {
      x: {
        ticks: {
          display: true,
          color: **labelColor**,
        }
      },
      y: {
        ticks: {
          display: true,
          color: **labelColor**,
        }
      }
    }
  }

  const datasets = [];

  chartData.forEach((data, index) => {
    datasets.push({
      label: data.name,
      data: data.data,
    });
  });

  const data = {
    labels: chartData[0].labels,
    datasets: datasets,
  }

  return <Bar data={data} options={options} />;
}

export default Graph;

型
在这种情况下，对使用自定义Tailwind颜色的最合适方法有什么建议吗？