Change color on labels in chart.js

Question

How do I change the color on the labels to blue? Is it possible to switch between colors, lets say blue, and red by clicking on a button?`

The reason why I ask for the switch, is because I might create a light/dark mode, and then it could be nice to change colors in the chart depending on this. But if its not possible then blue would be the best.

    const data = {
        labels: [
            'New',
            'To Do',
            'In Progress',
            'Resolved'
        ],
        datasets: [{
            label: 'WDC',
            data: [300, 50, 100, 20],
            backgroundColor: [
                'rgb(126, 191, 241)',
                'rgb(255, 159, 64)',
                'rgb(255, 255, 0)',
                'rgb(160, 160, 160)'
            ],
            borderColor: [
                'rgb(126, 191, 241)',
                'rgb(255, 159, 64)',
                'rgb(255, 255, 0)',
                'rgb(160, 160, 160)'
            ],
            backgroundColor: [
                'rgb(126, 191, 241)',
                'rgb(255, 159, 64)',
                'rgb(255, 255, 0)',
                'rgb(160, 160, 160)'
            ],
            hoverOffset: 4
        }]
    };
    const config = {
        type: 'pie',
        data: data,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            layout: {
                padding: 20
            },
            plugins: {
                legend: {
                    position: 'top'
                }
            }
        }
    };
    const myChart = new Chart(
        document.getElementById('myChart'),
        config
    );

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div id="wdc_canvas" style="position: relative; height:30vh; width:40vw">
    <canvas id="myChart" width="785" height="389" style="z-index: 8; display: block; box-sizing: border-box; height: 389px; width: 785px;"></canvas>
</div>

Answer 1

Not sure if you meant the labels in the legend or in the tooltip but here are the options for both of them:

const data = {
  labels: [
    'New',
    'To Do',
    'In Progress',
    'Resolved'
  ],
  datasets: [{
    label: 'WDC',
    data: [300, 50, 100, 20],
    backgroundColor: [
      'rgb(126, 191, 241)',
      'rgb(255, 159, 64)',
      'rgb(255, 255, 0)',
      'rgb(160, 160, 160)'
    ],
    borderColor: [
      'rgb(126, 191, 241)',
      'rgb(255, 159, 64)',
      'rgb(255, 255, 0)',
      'rgb(160, 160, 160)'
    ],
    backgroundColor: [
      'rgb(126, 191, 241)',
      'rgb(255, 159, 64)',
      'rgb(255, 255, 0)',
      'rgb(160, 160, 160)'
    ],
    hoverOffset: 4
  }]
};
const config = {
  type: 'pie',
  data: data,
  options: {
    responsive: true,
    maintainAspectRatio: false,
    layout: {
      padding: 20
    },
    plugins: {
      tooltip: {
        bodyColor: 'blue'
      },
      legend: {
        labels: {
          color: 'blue',
        },
        position: 'top'
      }
    }
  }
};
const myChart = new Chart(
  document.getElementById('myChart'),
  config
);

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div id="wdc_canvas">
  <canvas id="myChart"></canvas>
</div>