# ThemeManagerSessionMixin

Auto-generated from the @jbrowse/mobx-state-tree model in the source — see the [developer guide](https://jbrowse.org/jb2/docs/developer_guide/) for concepts. Built into JBrowse core. [View source](https://github.com/GMOD/jbrowse-components/blob/main/packages/product-core/src/Session/Themes.ts).

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

| Member | Description |
| --- | --- |
| **systemPrefersDark**<br><code>boolean</code> |  |
| **darkReaderDark**<br><code>boolean</code> |  |

## Getters

| Member | Description |
| --- | --- |
| **themeName**<br><code>string</code> | 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**<br><code>ThemeModeSelection</code> | 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**<br><code>PaletteMode</code> | 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**<br><code>PaletteMode</code> | `selectedThemeMode`, but dark while Dark Reader darkens the page. |
| **themeIsDark**<br><code>boolean</code> | 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**<br><code>SerializableThemeArgs</code> |  |
| **palette**<br><code>JBrowsePalette</code> | 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**<br><code>JBrowseStyleTheme</code> | 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**<br><code>Theme</code> | 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

| Member | Description |
| --- | --- |
| **allThemes**<br><code>() =&gt; ThemeMap</code> |  |
| **getActiveThemeOptions**<br><code>(name?: string &#124; undefined) =&gt; ThemeOptions</code> | 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.<br><br>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.<br><br>**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

| Member | Description |
| --- | --- |
| **setThemeName**<br><code>(name: string) =&gt; void</code> | 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**<br><code>() =&gt; void</code> |  |
| **setSystemPrefersDark**<br><code>(dark: boolean) =&gt; void</code> |  |
| **setSystemThemeOverride**<br><code>(mode?: PaletteMode &#124; undefined) =&gt; void</code> | 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**<br><code>(mode: ThemeModeSelection) =&gt; void</code> | 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.<br><br>`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. |