Dark theme

Use the built-in dark theme via the config theme palette.

Theme the app via the configuration prop on <JBrowse>, following MUI theme palette conventions. Setting palette.mode to 'dark' switches the whole app to the built-in dark theme:

<JBrowse
  configuration={{
    theme: {
      palette: {
        mode: 'dark',
        primary: { main: '#4d9221' },
        secondary: { main: '#c51b7d' },
      },
    },
  }}
  // ...
/>

See the theming guide for the full set of options, including DNA base colors, and JBrowseConfiguration for the autogenerated config reference.

Live demo

View source

import { JBrowse } from '@jbrowse/react-app2'

import { volvoxConfig } from '../volvoxConfig.ts'

export default function DarkTheme() {
  return (
    <JBrowse
      assemblies={volvoxConfig.assemblies}
      tracks={volvoxConfig.tracks}
      configuration={{ theme: { palette: { mode: 'dark' } } }}
      views={[
        {
          type: 'LinearGenomeView',
          init: {
            assembly: 'volvox',
            loc: 'ctgA:1..50000',
            tracks: ['volvox_cram'],
          },
        },
      ]}
    />
  )
}