如何在nivo图表设置中添加自定义颜色主题

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nivo@0.74.0/nivo.min.css" />
<script src="https://cdn.jsdelivr.net/npm/nivo@0.74.0/nivo.min.js"></script>

import { NivoBar } from '@nivo/bar';

const data = [
  { country: 'A', value: 10 },
  { country: 'B', value: 20 },
  { country: 'C', value: 15 },
];

const MyChart = () => (
  <NivoBar
    data={data}
    width={400}
    height={300}
    theme={{
      background: '#ffffff',
      textColor: '#333333',
      axis: {
        domain: {
          line: {
            stroke: '#555555',
          },
        },
        ticks: {
          line: {
            stroke: '#555555',
          },
          text: {
            fill: '#333333',
          },
        },
      },
      grid: {
        line: {
          stroke: '#dddddd',
        },
      },
      legends: {
        text: {
          fill: '#333333',
        },
      },
    }}
  />
);

ReactDOM.render(<MyChart />, document.getElementById('chart-container'));