Skip to main content

ThemeManagerSessionMixin

Auto-generated from the @jbrowse/mobx-state-tree model in the source — see the developer guide for concepts. Built into JBrowse core. View source.

Adds the UI theme to a session: the selected theme, light or dark mode or following the OS, and the themes an admin adds through extraThemes.

Volatiles

MemberDescription
systemPrefersDark
boolean
darkReaderDark
boolean

Getters

MemberDescription
themeName
string		Which palette is in effect. A stored name whose theme an admin has since dropped reads as default without the stored value being touched, so it comes back if the plugin supplying it loads again.
themeMode
ThemeModeSelection		Light, dark, or following the OS — the axis the palette is drawn along, and what the mode picker shows. effectiveThemeMode is the one to read for a color decision.
selectedThemeMode
PaletteMode		Light or dark as the reader chose it, system resolved against the OS or the toolbar's hold. What a file leaves the session in, since Dark Reader never touches the file.
effectiveThemeMode
PaletteMode		selectedThemeMode, but dark while Dark Reader darkens the page.
themeIsDark
boolean		Whether what is drawn right now is dark. Read off the resolved palette rather than the mode, so a palette pinned to one mode — an extraThemes entry declaring mode: 'dark' — answers for itself.
themeOptions
SerializableThemeArgs
palette
JBrowsePalette		Every color JBrowse renders, resolved to plain strings. This is what rendering reads: it needs no React context, it crosses the RPC worker boundary as itself, and it costs no UI toolkit. Prefer it over theme anywhere the answer wanted is a color rather than a Material UI component style.
styleTheme
JBrowseStyleTheme		The palette plus the sizing tokens makeStyles reads — spacing, corner radius, type scale. This is what a product mounts on StyleThemeProvider; it costs no UI toolkit, and it is derived from the same themeOptions as theme, so a config theme that sets spacing moves JBrowse's own styles and its Material components together.
theme
Theme		The Material UI theme, for the components that are Material UI. Its palette is spliced from the same resolvePalette call as palette above, so the two cannot disagree.

Methods

MemberDescription
allThemes
() => ThemeMap
getActiveThemeOptions
(name?: string | undefined) => ThemeOptions		Raw ThemeOptions for the active theme, or a named override (used by the SVG-export theme picker). Unlike theme (a built, non-serializable MUI theme), this is the plain options object every view's SVG export threads into each display's renderSvg, which rebuilds the theme via createJBrowseTheme outside React context.

The default entry is merged with the config theme slot, because the picker labels it "Default (from config)" and resolvePalette merges the preset with the slot for every other consumer. The bare preset would make view.exportSvg() drop a host's configured palette: a config setting primary.main would draw #123456 on screen and export the stock #0D233F, while the export dialog named the default theme. Every other named theme is a fixed preset that ignores config.

The mode is spliced in here, because a palette no longer carries one and this is the last point before the export leaves the session: every caller hands renderSvg these options and nothing else, so a figure exported from a dark session comes out dark. A palette pinned to its own mode, or a name from before the axis, states the mode itself and keeps it.

Actions

MemberDescription
setThemeName
(name: string) => void		Pick a palette. A name from before light and dark were an axis sets the mode it spelled as well, so an old share link, a saved figure spec and jbrowse-img --theme darkStock all still mean what they said. Either that or a palette pinned to its own mode drops a held mode, which would otherwise resurface on the next palette change.
noteDarkReader
() => void
setSystemPrefersDark
(dark: boolean) => void
setSystemThemeOverride
(mode?: PaletteMode | undefined) => void		Hold a session on the mode its setting is not asking for, or undefined to return to the setting. The toolbar's sun/moon writes this, so it stays in the toolbar after a click. The OS flipping clears it, since by then the OS has come round to the held mode. The palette is untouched: a reader on Minimal who does this keeps Minimal.
setThemeMode
(mode: ThemeModeSelection) => void		Draw the session light or dark, leaving the palette alone. system follows the OS preference. Satisfies ThemeModeSession, so useSessionPalette works against an app session and an embedded one alike, and a host that follows its own dark-mode state calls this.

themeOptions carries the mode to the RPC worker, so the labels baked into a rendered image follow it along with what React draws. That used to take a write into the config theme slot, because mode lived inside a palette and there was nowhere else to put it.