@jbrowse/core 5.0.0-beta.1 → 5.0.0-beta.11

package/esm/ui/palette.js

@@ -231,43 +231,21 @@ const darkNeutrals = {
 export const colorFwdStrand = '#EC8B8B';
 /** #color alignments-strand | Reverse strand | Read maps to the reverse strand */
 export const colorRevStrand = '#8F8FD8';
-/** #color alignments-pair-orientation | LR (→ ←, normal proper pair) | Concordant */
+/** #color alignments-pair-orientation | LR (→ ←) | Normal proper pair */
 export const colorPairLR = '#d3d3d3';
-// Dimmer grey for dark mode: the light #d3d3d3 reads as near-white glaring
-// blocks against a dark track background. Wired into the dark alignmentFill.
-export const colorPairLRDark = '#8a8a8a';
-/** #color alignments-pair-orientation | RL (← →, mates point away from each other) | Abnormal orientation */
+// Below #d3d3d3, which glares on a dark track, and light enough that
+// insertions, soft clips and deletions stay darker than the read, the order the
+// light theme draws them in.
+export const colorPairLRDark = '#b0b0b0';
+/** #color alignments-pair-orientation | RL (← →) | Mates point away from each other */
 export const colorPairRL = '#0099bb';
-/** #color alignments-pair-orientation | LL (→ →, both mates forward strand) | Abnormal orientation */
+/** #color alignments-pair-orientation | LL (→ →) | Both mates on the forward strand */
 export const colorPairLL = '#4d9a4d';
-/** #color alignments-pair-orientation | RR (← ←, both mates reverse strand) | Abnormal orientation */
+/** #color alignments-pair-orientation | RR (← ←) | Both mates on the reverse strand */
 export const colorPairRR = '#5555bb';
-// Was `colorNostrand`, which named the one thing it essentially never paints. A
-// SAM record's strand is DEFINED from the reverse flag inside the adapter's
-// feature class (`SamRecordFeature.strand`), so it is always +1 or -1, and a
-// PAF/synteny block carries a real strand too — `strandCategory`'s `noStrand`
-// branch is the defensive third case of a `-1 | 0 | 1` return, not a category
-// an alignments track produces. The name survived because the two places that
-// DO reach 0 are strand questions of a different kind: a sashimi junction whose
-// spliced reads carry no XS/TS/ts tag (ordinary unstranded RNA-seq), and a
-// strand-valued read tag that a read simply lacks.
-//
-// What it actually paints, in volume, is neither — `nonSplit` ("Unsplit read",
-// the majority of a pileup under the split-read scheme) and `mapqUnavailable`
-// (MAPQ 255). What unites all five is that the scheme's question has no
-// informative answer for this read, so the value is the neutral it falls back
-// to rather than a statement about strand.
-//
-// It is NOT the only such neutral: `colorPairLR` #d3d3d3 is the baseline for
-// `normalInsert`, `noTagValue` and `plain`, and the two sit dE 3.95 apart —
-// close enough that `readTagColors.ts` moved its untagged-read case off this one
-// and onto that one, because only that one darkens under the dark theme. Whether
-// two neutrals are wanted at all is the open question here; this rename does not
-// settle it, and the dark-mode half is `agent-docs/TODO.md`.
-export const colorNeutralRead = '#c8c8c8';
 /**
- * #color alignments-pair-orientation | Inter-chromosomal | Mate maps to a different chromosome; colored distinctly rather than by orientation
- * #color alignments-insert-size | Mate on a different chromosome | Suggests an inter-chromosomal event
+ * #color alignments-pair-orientation | Inter-chromosomal | Mate on another chromosome
+ * #color alignments-insert-size | Inter-chromosomal | Mate on another chromosome
  */
 // THIS SLOT AND `colorUnmappedMate` WERE CHOSEN TOGETHER, and reading either one
 // alone is how the previous pair got stuck. Both are warm, both belong to all
@@ -299,9 +277,9 @@ export const colorNeutralRead = '#c8c8c8';
 // neighbour that must not be confusable: red means "insert too long", and a
 // second red would read as a second statement about insert size.
 export const colorInterchrom = '#af4d19';
-/** #color alignments-insert-size | Insert larger than expected | Suggests a deletion spanning the pair */
+/** #color alignments-insert-size | Insert larger than expected | Deletion between the mates */
 export const colorLongInsert = '#ff0000';
-/** #color alignments-insert-size | Insert smaller than expected | Suggests an insertion between the pair */
+/** #color alignments-insert-size | Insert smaller than expected | Insertion between the mates */
 // This slot has TWO neighbours it must stay clear of, and every past value has
 // solved one by walking into the other. They sit at opposite ends of the
 // lightness axis, which is what makes it a balance rather than a direction:
@@ -349,8 +327,8 @@ export const colorLongInsert = '#ff0000';
 // them.
 export const colorShortInsert = '#f582c0';
 /**
- * #color alignments-pair-orientation | Mate unmapped | The other end of the pair aligned nowhere, so orientation and insert size say nothing
- * #color alignments-insert-size | Mate unmapped | The other end of the pair aligned nowhere, so insert size says nothing
+ * #color alignments-pair-orientation | Mate unmapped | Mate aligned nowhere
+ * #color alignments-insert-size | Mate unmapped | Mate aligned nowhere
  */
 // A NON-COLOUR, at the dark end of the neutral scale on BOTH themes. It takes
 // the first half of the `readOverlap` pattern and not the second, and that split
@@ -392,11 +370,6 @@ export const colorShortInsert = '#f582c0';
 // gaps between rows and cannot be found. A few px of row is what a value here
 // has to survive, not a 40 px square.
 //
-// The nearest dark-mode neighbour is the coverage histogram's grey[700] #616161
-// at dE 9.7, which is not a collision in the sense the numbers above are about:
-// coverage is a bar in a different subtrack, never a fill a read can take, so
-// nothing is ever read against it.
-//
 // White was the previous dark value, and it reads as the loudest thing in a dark
 // pileup — louder than the coloured categories it is meant to be quieter than —
 // which is the "glaring near-white blocks" failure `colorPairLRDark` already
@@ -421,7 +394,7 @@ export const colorUnmappedMate = '#000000';
 // the least that still reads as a read rather than as a hole.
 export const colorUnmappedMateDark = '#4a4a4a';
 export const colorLongreadInv = '#7755bb';
-/** #color alignments-pair-orientation | Split paired-end read (inverted) | A paired read's supplementary segment maps opposite-strand to its primary, so the junction is inverted — an inversion or an inverted duplication */
+/** #color alignments-pair-orientation | Split read (inverted) | Supplementary segment on the opposite strand to its primary */
 export const colorSplitReadInversion = '#9b30b0';
 export const colorSupplementary = '#f0b878';
 // Qualitative palette for coloring reads by an arbitrary tag value (e.g. the HP
@@ -473,7 +446,7 @@ const startCodon = '#3e3';
 const codonNonsynonymous = '#e8930c';
 /** #color maf | Synonymous codon | MAF codon view: the codon differs from the reference but the amino acid is unchanged (silent) */
 const codonSynonymous = '#3a7bd5';
-/** #color maf | Codon stop | MAF codon view: a stop codon */
+/** #color maf | Stop gained | MAF codon view: a stop the reference codon is not */
 const codonStop = '#cc2222';
 /** #color alignments-indicators | Insertion | Reads carry an insertion relative to the reference */
 const insertion = '#800080';
@@ -496,9 +469,9 @@ const skip = '#009a8a';
  * which is the same lie louder — on a foldback the arms are opposite-strand
  * red and blue, and darkening whichever drew last reads as extra-inverted.
  *
- * So the value has one job: read as NEITHER segment. Every categorized grey in
- * the alignments vocabulary is light (`colorPairLR` #d3d3d3, `colorNeutralRead`
- * #c8c8c8, and `colorPairLRDark` #8a8a8a on the dark theme), so this sits past
+ * So the value has one job: read as NEITHER segment. The alignments vocabulary's
+ * one neutral grey is light (`colorPairLR` #d3d3d3, and `colorPairLRDark`
+ * #b0b0b0 on the dark theme), so this sits past
  * the dark end of them in light mode and past the light end in dark mode,
  * which is also why it inverts rather than dimming: on a dark track background
  * a charcoal span is the background showing through, i.e. a gap where the mark
@@ -522,6 +495,7 @@ const lightStringColors = {
     coverage: grey[400],
     insertion,
     deletion,
+    mafGap: deletion,
     readOverlap,
     softclip,
     hardclip,
@@ -539,6 +513,8 @@ const lightStringColors = {
     plotGridlineMinor: 'rgba(0,0,0,0.06)',
     plotGridlineMajor: 'rgba(0,0,0,0.13)',
     regionBoundary: 'rgba(0,0,0,0.42)',
+    regionSeparator: grey[600],
+    tableBorder: grey[300],
     // hover shading over a feature
     featureHover: 'rgba(0,0,0,0.15)',
     // stronger shade for a hovered group (e.g. a linked-read chain), so the group
@@ -548,29 +524,39 @@ const lightStringColors = {
     featureSelected: 'rgba(0,100,255,0.8)',
     // blue accent for feature description labels (e.g. gene descriptions)
     featureDescription: 'blue',
+    featureConnector: 'rgba(0, 0, 0, 0.6)',
 };
 // Dark overrides. White-on-dark reads far stronger than dark-on-white at the
 // same alpha, so the gridlines and hover shades are gentler and inverted rather
 // than reused, and the colors that would otherwise vanish are lightened.
 const darkStringColors = {
-    coverage: grey[700],
+    // above the L* 55-72 band the base colors occupy, so the SNP ticks drawn on
+    // it keep a lightness step; a mid grey inside that band hides them
+    coverage: '#cccccc',
     gridlineMinor: 'rgba(255,255,255,0.06)',
     gridlineMajor: 'rgba(255,255,255,0.15)',
     plotGridlineMinor: 'rgba(255,255,255,0.05)',
     plotGridlineMajor: 'rgba(255,255,255,0.1)',
     regionBoundary: 'rgba(255,255,255,0.3)',
+    regionSeparator: grey[500],
+    tableBorder: '#515151',
     featureHover: 'rgba(255,255,255,0.25)',
     featureHoverStrong: 'rgba(255,255,255,0.4)',
     featureSelected: 'rgba(120,180,255,0.9)',
     // plain CSS 'blue' reads as near-black against a dark track
     featureDescription: blue[300],
-    // the deletion rect replaces the read on the dark track background, where the
-    // mid-grey #808080 reads as a muddy block, so lighten it
-    deletion: '#c8c8c8',
+    // a 1px light line on a dark ground reads thinner than the same line dark on
+    // white, so this runs at more ink than the light value's 0.6
+    featureConnector: 'rgba(255, 255, 255, 0.9)',
+    // drawn over a read, so it keeps the light theme's step below the read fill:
+    // #d3d3d3 to #808080 is 31 L*, #b0b0b0 to this is 33
+    deletion: '#5c5c5c',
+    // MAF gap cells sit beside match cells painted `action.disabledBackground`,
+    // which is dark here, so the gap is the lighter of the two
+    mafGap: '#c8c8c8',
     // inverted rather than dimmed, for the reason on the light value: the mark
     // has to be the one neutral no read category paints, and on a dark track that
-    // is the light end. Clear of the dark theme's own `colorPairLRDark` #8a8a8a
-    // and of `colorNostrand` #c8c8c8, the two lightest fills it can land beside.
+    // is the light end, clear of `colorPairLRDark` #b0b0b0
     readOverlap: '#e4e4e4',
 };
 const lightAlignmentFill = {
@@ -624,13 +610,23 @@ const defaultFrames = [
     { main: '#adadad' },
     { main: '#8f8f8f' },
 ];
+// The same order as the light greys, with the outer frames nearest the ground
+const defaultFramesDark = [
+    null,
+    { main: '#6e6e6e' },
+    { main: '#525252' },
+    { main: '#303030' },
+    { main: '#303030' },
+    { main: '#525252' },
+    { main: '#6e6e6e' },
+];
 /**
  * The palette half of the built-in themes. `theme.ts` composes these with the
  * display names and MUI component overrides that make up `defaultThemes`, so
  * the preset colors are stated once.
  */
 // The JBrowse-branded colors every built-in preset starts from. Deliberately
-// does NOT carry the string colors or alignmentFill: those have light and dark
+// does NOT carry the string colors, alignmentFill or frames: those have light and dark
 // variants that `resolvePalette` picks off `mode`, and baking the light ones in
 // here would shadow the dark set for any theme built on top.
 const brandDefaults = {
@@ -641,32 +637,61 @@ const brandDefaults = {
     highlight: { main: mandarin },
     textHighlight: { main: textHighlightYellow },
     bases: defaultBases,
-    frames: defaultFrames,
     framesCDS: defaultFramesCDS,
 };
+// Each palette states its colors once and, where a brand cannot survive the
+// flip, the `dark` delta. Stock needs none: measured, its dark half is the
+// light one with `mode: 'dark'` and nothing else, because the neutrals,
+// semantics and string colors already follow the mode. Minimal needs one
+// shade, grey[900] being too near the dark background to read as chrome.
 export const palettePresets = {
     default: { ...brandDefaults },
-    lightStock: { ...brandDefaults },
-    lightMinimal: {
+    stock: { ...brandDefaults },
+    minimal: {
         ...brandDefaults,
         primary: { main: grey[900] },
         secondary: { main: grey[800] },
         tertiary: { main: grey[900] },
-    },
-    // the dark presets change only `mode` on top of the brand colors, and the
-    // dark-tuned gridlines, hover, coverage and alignmentFill follow from it
-    darkMinimal: {
-        ...brandDefaults,
-        mode: 'dark',
-        primary: { main: grey[700] },
-        secondary: { main: grey[800] },
-        tertiary: { main: grey[900] },
-    },
-    darkStock: {
-        ...brandDefaults,
-        mode: 'dark',
+        dark: { primary: { main: grey[700] } },
     },
 };
+/**
+ * The theme names from before light and dark were an axis, as the palette and
+ * mode each one meant. A stored selection, a share link, an admin's
+ * `configuration.theme`, `jbrowse-img --theme` and a saved figure spec all
+ * carry these, so they keep resolving rather than falling back to the default.
+ */
+export const legacyThemeNames = {
+    lightStock: { themeName: 'stock', mode: 'light' },
+    darkStock: { themeName: 'stock', mode: 'dark' },
+    lightMinimal: { themeName: 'minimal', mode: 'light' },
+    darkMinimal: { themeName: 'minimal', mode: 'dark' },
+};
+// indexed through hasOwn so the miss is a value rather than a lie the key cast
+// tells the checker
+function legacyEntry(name) {
+    return name !== undefined && Object.hasOwn(legacyThemeNames, name)
+        ? legacyThemeNames[name]
+        : undefined;
+}
+/**
+ * What a name and a mode mean together, with a name that predates the axis
+ * resolved to the pair it stood for. An explicit `mode` still wins — a user
+ * picking Dark over a stored `lightStock` gets dark stock, not light.
+ *
+ * `themes` is whatever map the caller looks names up in, so an admin's
+ * `extraThemes` entry taking one of the retired names wins over the alias it
+ * would otherwise shadow.
+ */
+export function resolveThemeSelection(themeName, mode, themes) {
+    if (themeName !== undefined && themes?.[themeName]) {
+        return { themeName, mode };
+    }
+    const legacy = legacyEntry(themeName);
+    return legacy
+        ? { themeName: legacy.themeName, mode: mode ?? legacy.mode }
+        : { themeName: themeName ?? 'default', mode };
+}
 /**
  * Resolve a frame tuple. A theme's tuple replaces the default wholesale rather
  * than splicing entry by entry onto stale shades, so slots it leaves out are
@@ -691,15 +716,26 @@ function resolveFrames(entry, fallback) {
  * "Default (from config)" means. Do not "fix" that.
  */
 export function resolvePalette(args = {}) {
-    const { configTheme, themeName = 'default', extraThemes } = args;
+    const { configTheme, extraThemes } = args;
     const presets = {
         ...palettePresets,
         ...Object.fromEntries(Object.entries(extraThemes ?? {}).map(([k, v]) => [k, v.palette ?? {}])),
     };
+    const selection = resolveThemeSelection(args.themeName, args.mode, presets);
+    const themeName = selection.themeName;
     const preset = presets[themeName] ?? presets.default ?? {};
-    const input = themeName === 'default' ? { ...preset, ...configTheme?.palette } : preset;
-    const mode = input.mode ?? 'light';
+    const declared = themeName === 'default' ? { ...preset, ...configTheme?.palette } : preset;
+    // A palette that declares a `mode` is pinned to it: an admin who registers a
+    // dark `extraThemes` entry picked its colours for dark, and the light half
+    // they never wrote is not JBrowse's to invent. A `mode` in the config `theme`
+    // slot is the opposite — the site's starting point for the one palette that
+    // merges it — so a reader's own pick wins over that.
+    const mode = preset.mode ?? selection.mode ?? configTheme?.palette?.mode ?? 'light';
     const isDark = mode === 'dark';
+    // the palette's own dark half, over the light one it is a delta against
+    const input = isDark
+        ? { ...declared, ...declared.dark }
+        : declared;
     const neutrals = isDark ? darkNeutrals : lightNeutrals;
     const brandFallback = isDark ? darkBrandFallback : lightBrandFallback;
     const semantics = isDark ? darkSemantics : lightSemantics;
@@ -713,16 +749,19 @@ export function resolvePalette(args = {}) {
             strings[key] = override;
         }
     }
+    const text = { ...neutrals.text, ...input.text };
+    const primary = augmentColor(input.primary ?? brandFallback.primary);
     return {
         ...strings,
         mode,
-        text: { ...neutrals.text, ...input.text },
+        text,
         background: { ...neutrals.background, ...input.background },
         divider: input.divider ?? neutrals.divider,
         common: { ...neutrals.common, ...input.common },
         grey: { ...neutrals.grey, ...input.grey },
         action: { ...neutrals.action, ...input.action },
-        primary: augmentColor(input.primary ?? brandFallback.primary),
+        primary,
+        accent: input.accent ?? (isDark ? text.secondary : primary.main),
         secondary: augmentColor(input.secondary ?? brandFallback.secondary),
         error: augmentColor(input.error ?? semantics.error),
         warning: augmentColor(input.warning ?? semantics.warning),
@@ -736,7 +775,7 @@ export function resolvePalette(args = {}) {
             key,
             augmentColor(input.bases?.[key] ?? defaultBases[key]),
         ])),
-        frames: resolveFrames(input.frames, defaultFrames),
+        frames: resolveFrames(input.frames, isDark ? defaultFramesDark : defaultFrames),
         framesCDS: resolveFrames(input.framesCDS, defaultFramesCDS),
         alignmentFill: {
             ...(isDark ? darkAlignmentFill : lightAlignmentFill),

package/esm/ui/replaceViewAction.d.ts

@@ -6,7 +6,7 @@ import type { SubmitFormProps } from './SubmitForm.tsx';
  * the launching view occupies.
  *
  * Every launcher anchored on what a view is already showing — the synteny
- * launches, "read vs ref", the derivative reconstruction — wants exactly this
+ * launches, "read vs ref" — wants exactly this
  * pair, and each had written the same four lines around
  * {@link ReplaceCurrentViewButton}: the guard, the button, its disabled state,
  * and the renaming of Submit that only makes sense once there are two buttons.

package/esm/ui/replaceViewAction.js

@@ -7,7 +7,7 @@ import ReplaceCurrentViewButton from './ReplaceCurrentViewButton.js';
  * the launching view occupies.
  *
  * Every launcher anchored on what a view is already showing — the synteny
- * launches, "read vs ref", the derivative reconstruction — wants exactly this
+ * launches, "read vs ref" — wants exactly this
  * pair, and each had written the same four lines around
  * {@link ReplaceCurrentViewButton}: the guard, the button, its disabled state,
  * and the renaming of Submit that only makes sense once there are two buttons.

package/esm/ui/theme.d.ts

@@ -1,4 +1,4 @@
-import type { AlignmentFill, StringColors } from './palette.ts';
+import type { AlignmentFill, PaletteMode, StringColors, legacyThemeNames } from './palette.ts';
 import type { PaletteColor, PaletteColorOptions, Theme, ThemeOptions } from '@mui/material/styles';
 type FrameTuple<T> = [
     null,
@@ -13,6 +13,13 @@ type Frames = FrameTuple<PaletteColor>;
 type FramesOptions = FrameTuple<PaletteColorOptions>;
 declare module '@mui/material/styles' {
     interface Palette extends StringColors {
+        /**
+         * The primary colour where it marks something on the page's own ground,
+         * such as a checked box or a selected row. `primary.main` in light mode,
+         * and the secondary text colour in dark mode, where a midnight primary
+         * vanishes
+         */
+        accent: string;
         /** Accordion headers and some toolbar chrome */
         tertiary: PaletteColor;
         /** Secondary floating-action-button background */
@@ -42,6 +49,7 @@ declare module '@mui/material/styles' {
         alignmentFill: AlignmentFill;
     }
     interface PaletteOptions extends Partial<StringColors> {
+        accent?: string;
         tertiary?: PaletteColorOptions;
         quaternary?: PaletteColorOptions;
         highlight?: PaletteColorOptions;
@@ -58,7 +66,7 @@ declare module '@mui/material/styles' {
         alignmentFill?: Partial<AlignmentFill>;
     }
 }
-export { colorFwdStrand, colorInterchrom, colorLongInsert, colorLongreadInv, colorNeutralRead, colorPairLL, colorPairLR, colorPairLRDark, colorPairRL, colorPairRR, colorRevStrand, colorShortInsert, colorSplitReadInversion, colorSupplementary, colorUnmappedMate, colorUnmappedMateDark, methylated5hmC, methylated5mC, tagColorPalette, unmethylated5mC, } from './palette.ts';
+export { colorFwdStrand, colorInterchrom, colorLongInsert, colorLongreadInv, colorPairLL, colorPairLR, colorPairLRDark, colorPairRL, colorPairRR, colorRevStrand, colorShortInsert, colorSplitReadInversion, colorSupplementary, colorUnmappedMate, colorUnmappedMateDark, methylated5hmC, methylated5mC, tagColorPalette, unmethylated5mC, } from './palette.ts';
 export type { JBrowsePalette } from './palette.ts';
 /**
  * The structurally-serializable inputs that fully describe a session's active
@@ -72,6 +80,8 @@ export interface SerializableThemeArgs {
     configTheme?: ThemeOptions;
     themeName?: string;
     extraThemes?: ThemeMap;
+    /** light or dark, whichever the named palette declares; see `PaletteArgs` */
+    mode?: PaletteMode;
 }
 export declare const defaultThemes: {
     default: {
@@ -87,6 +97,7 @@ export declare const defaultThemes: {
             skip?: string | undefined;
             hardclip?: string | undefined;
             deletion?: string | undefined;
+            mafGap?: string | undefined;
             readOverlap?: string | undefined;
             modificationFwd?: string | undefined;
             modificationRev?: string | undefined;
@@ -97,12 +108,17 @@ export declare const defaultThemes: {
             plotGridlineMinor?: string | undefined;
             plotGridlineMajor?: string | undefined;
             regionBoundary?: string | undefined;
+            regionSeparator?: string | undefined;
+            tableBorder?: string | undefined;
             featureHover?: string | undefined;
             featureHoverStrong?: string | undefined;
             featureSelected?: string | undefined;
             featureDescription?: string | undefined;
+            featureConnector?: string | undefined;
             mode?: 'light' | 'dark';
+            dark?: import("./palette.ts").DarkPaletteInput;
             primary?: import("./palette.ts").ShadeInput;
+            accent?: string;
             secondary?: import("./palette.ts").ShadeInput;
             tertiary?: import("./palette.ts").ShadeInput;
             quaternary?: import("./palette.ts").ShadeInput;
@@ -125,7 +141,8 @@ export declare const defaultThemes: {
         };
         name: string;
     };
-    lightStock: {
+    stock: {
+        name: string;
         palette: {
             stopCodon?: string | undefined;
             startCodon?: string | undefined;
@@ -138,6 +155,7 @@ export declare const defaultThemes: {
             skip?: string | undefined;
             hardclip?: string | undefined;
             deletion?: string | undefined;
+            mafGap?: string | undefined;
             readOverlap?: string | undefined;
             modificationFwd?: string | undefined;
             modificationRev?: string | undefined;
@@ -148,12 +166,17 @@ export declare const defaultThemes: {
             plotGridlineMinor?: string | undefined;
             plotGridlineMajor?: string | undefined;
             regionBoundary?: string | undefined;
+            regionSeparator?: string | undefined;
+            tableBorder?: string | undefined;
             featureHover?: string | undefined;
             featureHoverStrong?: string | undefined;
             featureSelected?: string | undefined;
             featureDescription?: string | undefined;
+            featureConnector?: string | undefined;
             mode?: 'light' | 'dark';
+            dark?: import("./palette.ts").DarkPaletteInput;
             primary?: import("./palette.ts").ShadeInput;
+            accent?: string;
             secondary?: import("./palette.ts").ShadeInput;
             tertiary?: import("./palette.ts").ShadeInput;
             quaternary?: import("./palette.ts").ShadeInput;
@@ -174,9 +197,8 @@ export declare const defaultThemes: {
             grey?: Partial<import("./palette.ts").NeutralTokens['grey']>;
             action?: Partial<import("./palette.ts").NeutralTokens['action']>;
         };
-        name: string;
     };
-    lightMinimal: {
+    minimal: {
         name: string;
         palette: {
             stopCodon?: string | undefined;
@@ -190,6 +212,7 @@ export declare const defaultThemes: {
             skip?: string | undefined;
             hardclip?: string | undefined;
             deletion?: string | undefined;
+            mafGap?: string | undefined;
             readOverlap?: string | undefined;
             modificationFwd?: string | undefined;
             modificationRev?: string | undefined;
@@ -200,11 +223,15 @@ export declare const defaultThemes: {
             plotGridlineMinor?: string | undefined;
             plotGridlineMajor?: string | undefined;
             regionBoundary?: string | undefined;
+            regionSeparator?: string | undefined;
+            tableBorder?: string | undefined;
             featureHover?: string | undefined;
             featureHoverStrong?: string | undefined;
             featureSelected?: string | undefined;
             featureDescription?: string | undefined;
+            featureConnector?: string | undefined;
             mode?: 'light' | 'dark';
+            accent?: string;
             quaternary?: import("./palette.ts").ShadeInput;
             highlight?: import("./palette.ts").ShadeInput;
             textHighlight?: import("./palette.ts").ShadeInput;
@@ -231,124 +258,21 @@ export declare const defaultThemes: {
             tertiary: {
                 main: string;
             };
-        };
-    };
-    darkMinimal: {
-        name: string;
-        palette: {
-            stopCodon?: string | undefined;
-            startCodon?: string | undefined;
-            codonNonsynonymous?: string | undefined;
-            codonSynonymous?: string | undefined;
-            codonStop?: string | undefined;
-            coverage?: string | undefined;
-            insertion?: string | undefined;
-            softclip?: string | undefined;
-            skip?: string | undefined;
-            hardclip?: string | undefined;
-            deletion?: string | undefined;
-            readOverlap?: string | undefined;
-            modificationFwd?: string | undefined;
-            modificationRev?: string | undefined;
-            mutedSnpBase?: string | undefined;
-            missingData?: string | undefined;
-            gridlineMinor?: string | undefined;
-            gridlineMajor?: string | undefined;
-            plotGridlineMinor?: string | undefined;
-            plotGridlineMajor?: string | undefined;
-            regionBoundary?: string | undefined;
-            featureHover?: string | undefined;
-            featureHoverStrong?: string | undefined;
-            featureSelected?: string | undefined;
-            featureDescription?: string | undefined;
-            quaternary?: import("./palette.ts").ShadeInput;
-            highlight?: import("./palette.ts").ShadeInput;
-            textHighlight?: import("./palette.ts").ShadeInput;
-            error?: import("./palette.ts").ShadeInput;
-            warning?: import("./palette.ts").ShadeInput;
-            info?: import("./palette.ts").ShadeInput;
-            success?: import("./palette.ts").ShadeInput;
-            bases?: Partial<Record<import("./palette.ts").BaseKey, import("./palette.ts").ShadeInput>>;
-            frames?: import("./palette.ts").FrameTuple<import("./palette.ts").ShadeInput>;
-            framesCDS?: import("./palette.ts").FrameTuple<import("./palette.ts").ShadeInput>;
-            alignmentFill?: Partial<AlignmentFill>;
-            text?: Partial<import("./palette.ts").NeutralTokens['text']>;
-            background?: Partial<import("./palette.ts").NeutralTokens['background']>;
-            divider?: string;
-            common?: Partial<import("./palette.ts").NeutralTokens['common']>;
-            grey?: Partial<import("./palette.ts").NeutralTokens['grey']>;
-            action?: Partial<import("./palette.ts").NeutralTokens['action']>;
-            mode: "dark";
-            primary: {
-                main: string;
-            };
-            secondary: {
-                main: string;
-            };
-            tertiary: {
-                main: string;
-            };
-        };
-    };
-    darkStock: {
-        name: string;
-        palette: {
-            stopCodon?: string | undefined;
-            startCodon?: string | undefined;
-            codonNonsynonymous?: string | undefined;
-            codonSynonymous?: string | undefined;
-            codonStop?: string | undefined;
-            coverage?: string | undefined;
-            insertion?: string | undefined;
-            softclip?: string | undefined;
-            skip?: string | undefined;
-            hardclip?: string | undefined;
-            deletion?: string | undefined;
-            readOverlap?: string | undefined;
-            modificationFwd?: string | undefined;
-            modificationRev?: string | undefined;
-            mutedSnpBase?: string | undefined;
-            missingData?: string | undefined;
-            gridlineMinor?: string | undefined;
-            gridlineMajor?: string | undefined;
-            plotGridlineMinor?: string | undefined;
-            plotGridlineMajor?: string | undefined;
-            regionBoundary?: string | undefined;
-            featureHover?: string | undefined;
-            featureHoverStrong?: string | undefined;
-            featureSelected?: string | undefined;
-            featureDescription?: string | undefined;
-            primary?: import("./palette.ts").ShadeInput;
-            secondary?: import("./palette.ts").ShadeInput;
-            tertiary?: import("./palette.ts").ShadeInput;
-            quaternary?: import("./palette.ts").ShadeInput;
-            highlight?: import("./palette.ts").ShadeInput;
-            textHighlight?: import("./palette.ts").ShadeInput;
-            error?: import("./palette.ts").ShadeInput;
-            warning?: import("./palette.ts").ShadeInput;
-            info?: import("./palette.ts").ShadeInput;
-            success?: import("./palette.ts").ShadeInput;
-            bases?: Partial<Record<import("./palette.ts").BaseKey, import("./palette.ts").ShadeInput>>;
-            frames?: import("./palette.ts").FrameTuple<import("./palette.ts").ShadeInput>;
-            framesCDS?: import("./palette.ts").FrameTuple<import("./palette.ts").ShadeInput>;
-            alignmentFill?: Partial<AlignmentFill>;
-            text?: Partial<import("./palette.ts").NeutralTokens['text']>;
-            background?: Partial<import("./palette.ts").NeutralTokens['background']>;
-            divider?: string;
-            common?: Partial<import("./palette.ts").NeutralTokens['common']>;
-            grey?: Partial<import("./palette.ts").NeutralTokens['grey']>;
-            action?: Partial<import("./palette.ts").NeutralTokens['action']>;
-            mode: "dark";
-        };
-        components: {
-            MuiAppBar: {
-                defaultProps: {
-                    enableColorOnDark: true;
+            dark: {
+                primary: {
+                    main: string;
                 };
             };
         };
     };
 };
+/**
+ * Every theme name JBrowse answers to: the palettes above, plus the names from
+ * before light and dark were an axis. `jbrowse-img --theme` and the SVG export
+ * picker enumerate this, so a palette added or renamed fails their builds
+ * rather than leaving a name that silently resolves to the default.
+ */
+export type ThemeSelectionName = keyof typeof defaultThemes | keyof typeof legacyThemeNames;
 export declare function createJBrowseBaseTheme(theme?: ThemeOptions): ThemeOptions;
 export type ThemeMap = Record<string, ThemeOptions & {
     name?: string;
@@ -368,5 +292,5 @@ export declare function createJBrowseThemeFromArgs(args?: SerializableThemeArgs)
  * component defaults and style overrides in `baseThemeOptions`, plus whatever
  * non-palette options the selected theme or the config theme declares.
  */
-export declare function createJBrowseTheme(configTheme?: ThemeOptions, themes?: ThemeMap, themeName?: string): Theme;
+export declare function createJBrowseTheme(configTheme?: ThemeOptions, themes?: ThemeMap, requestedName?: string, requestedMode?: PaletteMode): Theme;
 export type JBrowseTheme = Theme;