Dark theme

A Material UI palette, through configuration.theme.

The primary and secondary colors also paint the track selector drawer and the menus, which this view opens from its toolbar. Every palette option is in the theming guide.

View source — 29 lines

import { CircularGenomeView } from '@jbrowse/react-circular-genome-view2'

export default function DarkTheme() {
  return (
    <CircularGenomeView
      assembly={{
        name: 'volvox',
        uri: 'https://jbrowse.org/genomes/volvox/volvox.2bit',
      }}
      tracks={[
        {
          trackId: 'volvox_sv',
          name: 'Volvox duplications',
          uri: 'https://jbrowse.org/code/jb2/main/test_data/volvox/volvox.dup.vcf.gz',
        },
      ]}
      view={{ tracks: ['volvox_sv'] }}
      configuration={{
        theme: {
          palette: {
            mode: 'dark',
            primary: { main: '#333' },
            secondary: { main: '#444' },
          },
        },
      }}
    />
  )
}