How to add custom color theme in nivo chart settings

Question

I am using Nivo charts in one of my projects and I have implemented nivo chart settings as they have implemented them in their website. However, I wanted to add a few of my own custom color theme options additional to what nivo provides. For more clarity, I am attaching this screenshot

Right now, we import colors from nivo package as

import {
    categoricalColorSchemeIds,
    divergingColorSchemeIds,
    sequentialColorSchemeIds,
    colorSchemes,
} from '@nivo/colors'

now I read somewhere that we can inject our custom object as color theme, can anyone help me show as how it would be possible if for ex I want to add new theme with name CustomTheme with colors of "#000, #fff ,#ff0000". How would we do that, any help would be helpful. Thanks in advance

Answer 1

Do:

colors={['#111111', '#222222']}
colorBy="index"

Answer 2

Moreover. After voting up @Tania answer which works perfectly (without any colorBy) I found out you can recall CSS variables in the array so you have support for light and dark theme straight forward. Like

const customColors = [
  getComputedStyle(document.documentElement).getPropertyValue('--severity-low'),
  getComputedStyle(document.documentElement).getPropertyValue(
    '--severity-medium'
  ),
  getComputedStyle(document.documentElement).getPropertyValue(
    '--severity-high'
  ),
  getComputedStyle(document.documentElement).getPropertyValue(
    '--severity-critical'
  ),
]