Custom theme

import {
  JBrowseLinearGenomeView,
  useCreateViewState,
} from '@jbrowse/react-linear-genome-view2'

export default function CustomTheme() {
  const state = useCreateViewState({
    assembly: {
      name: 'volvox',
      uri: 'https://jbrowse.org/genomes/volvox/volvox.2bit',
    },
    tracks: [
      {
        trackId: 'volvox_gff3',
        name: 'Volvox genes',
        uri: 'https://jbrowse.org/code/jb2/main/test_data/volvox/volvox.sort.gff3.gz',
      },
    ],
    view: {
      loc: 'ctgA:1105..1221',
      tracks: ['volvox-ReferenceSequenceTrack', 'volvox_gff3'],
    },
    configuration: {
      theme: {
        palette: {
          primary: { main: '#311b92' },
          secondary: { main: '#0097a7' },
          tertiary: { main: '#f57c00' },
          quaternary: { main: '#d50000' },
          bases: {
            A: { main: '#98FB98' },
            C: { main: '#87CEEB' },
            G: { main: '#DAA520' },
            T: { main: '#DC143C' },
          },
        },
      },
    },
  })
  return state ? <JBrowseLinearGenomeView viewState={state} /> : null
}