/* ometa-theme.css — theme control + dark overrides for the widgets Bootstrap * does not own. * * Bootstrap 5.3 themes itself from `data-bs-theme` on , so cards, tables, * modals, forms, dropdowns, alerts and the navbar need nothing here. What is * left is the third-party widgets with hardcoded light palettes, and the theme * control itself. * * Everything below is written against Bootstrap's own CSS variables where it * can be, so a single rule covers both themes. */ /* ------------------------------------------------------------------ control */ /* The Mantine dashboards host this control but never load Bootstrap, so the * --bs-* lookups below fall through to these, which track data-ometa-theme. */ :root { --ometa-control-border: #dee2e6; --ometa-control-bg: #f8f9fa; --ometa-control-fg: #6c757d; --ometa-control-fg-strong: #000; --ometa-control-bg-hover: #e9ecef; --ometa-control-bg-active: #fff; --ometa-control-accent: #0d6efd; } [data-ometa-theme="dark"] { --ometa-control-border: #495057; --ometa-control-bg: #2b3035; --ometa-control-fg: #adb5bd; --ometa-control-fg-strong: #fff; --ometa-control-bg-hover: #343a40; --ometa-control-bg-active: #212529; --ometa-control-accent: #6ea8fe; } .ometa-theme-control { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--bs-border-color, var(--ometa-control-border)); border-radius: 999px; background: var(--bs-tertiary-bg, var(--ometa-control-bg)); line-height: 0; } .ometa-theme-control__btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 24px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--bs-secondary-color, var(--ometa-control-fg)); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .ometa-theme-control__btn:hover { color: var(--bs-emphasis-color, var(--ometa-control-fg-strong)); background: var(--bs-secondary-bg, var(--ometa-control-bg-hover)); } .ometa-theme-control__btn:focus-visible { outline: 2px solid var(--bs-primary, var(--ometa-control-accent)); outline-offset: 1px; } .ometa-theme-control__btn[aria-pressed="true"] { color: var(--bs-emphasis-color, var(--ometa-control-fg-strong)); background: var(--bs-body-bg, var(--ometa-control-bg-active)); box-shadow: 0 1px 2px rgb(0 0 0 / 0.15); } /* Injected into the legacy dbc dashboards, which have no header to host it. */ .ometa-theme-control--floating { position: fixed; right: 12px; bottom: 12px; z-index: 1080; box-shadow: 0 2px 8px rgb(0 0 0 / 0.2); } /* Navbar placement: the navbar is a flex row of
  • , so centre it. */ .navbar .ometa-theme-control { margin: 0 0.5rem; vertical-align: middle; } /* Plotly writes its chart titles in #2a3f5f, and a couple of panels set that * same colour by hand so their heading lines up with the chart below it. On a * dark body that colour is all but invisible, so hand it out as a token the * Python side can name. The light value is Plotly's own, unchanged; the dark * value is the font colour ometa-theme.js gives the figures. */ :root { --ometa-plot-title-color: #2a3f5f; } [data-ometa-theme="dark"] { --ometa-plot-title-color: #dee2e6; } /* --------------------------------------------------------------- app chrome */ /* The logo is drawn for a light bar; lift it so it reads on a dark one. */ [data-ometa-theme="dark"] .navbar-brand img { filter: brightness(0) invert(1); opacity: 0.92; } /* Dropzone (declared inline in layout.html, kept here so it follows the theme) */ [data-ometa-theme="dark"] .dropzone { background: var(--bs-tertiary-bg, #2b3035); border-color: var(--bs-primary, #0d6efd); } /* The dashboard iframe wrapper must not flash white behind a dark dashboard. */ [data-ometa-theme="dark"] #content iframe { background: var(--bs-body-bg, #212529); } /* Workflow-authored HTML result files are sandboxed on an opaque origin and * cannot be themed — give the frame a themed border so it does not look broken. */ [data-ometa-theme="dark"] #result-htmlfile { border-color: var(--bs-border-color, #495057) !important; } /* ------------------------------------------------------------ jstree (host) */ /* The page always loads themes/default/style.min.css, and the tree always * carries the `.jstree-default` / `.jstree-default-small` classes jstree writes * for its default theme name. Dark mode is layered on top here rather than by * swapping in themes/default-dark/style.min.css: that file scopes every rule to * `.jstree-default-dark`, which nothing on the page ever sets, so loading it * left the tree with no theme at all — the expand lever and checkboxes have no * unscoped size and collapsed to 0x0. * * The two vendored themes share identical geometry and sprite layout; the dark * one differs only in the colours below and in its recoloured 32px.png. Row * text is left to inherit the Bootstrap body colour instead of the vendored * #999, which was tuned for the theme's own #333 background. */ [data-ometa-theme="dark"] #jstreecontainer { background: var(--bs-tertiary-bg, #2b3035); border-color: var(--bs-border-color, #495057); } [data-ometa-theme="dark"] .jstree-default .jstree-node, [data-ometa-theme="dark"] .jstree-default .jstree-icon { background-image: url("/static/jstree/themes/default-dark/32px.png"); } [data-ometa-theme="dark"] .jstree-default-responsive .jstree-node, [data-ometa-theme="dark"] .jstree-default-responsive .jstree-icon { background-image: url("/static/jstree/themes/default-dark/40px.png"); } [data-ometa-theme="dark"] .jstree-default .jstree-hovered, [data-ometa-theme="dark"] .jstree-default .jstree-context { background: #555; box-shadow: inset 0 0 1px #555; } [data-ometa-theme="dark"] .jstree-default .jstree-clicked { background: #5fa2db; box-shadow: inset 0 0 1px #666; } [data-ometa-theme="dark"] .jstree-default .jstree-hovered, [data-ometa-theme="dark"] .jstree-default .jstree-clicked, [data-ometa-theme="dark"] .jstree-default .jstree-checked, [data-ometa-theme="dark"] .jstree-default .jstree-search { color: #fff; } /* wholerow plugin: the row highlight lives on a sibling div, not the anchor */ [data-ometa-theme="dark"] .jstree-default .jstree-wholerow-hovered, [data-ometa-theme="dark"] .jstree-default.jstree-checkbox-no-clicked .jstree-clicked.jstree-hovered, [data-ometa-theme="dark"] .jstree-default.jstree-checkbox-no-clicked > .jstree-wholerow-ul .jstree-wholerow-clicked.jstree-wholerow-hovered { background: #555; } [data-ometa-theme="dark"] .jstree-default .jstree-wholerow-clicked { background: #5fa2db; } [data-ometa-theme="dark"] .jstree-default .jstree-anchor > .jstree-icon { opacity: 0.75; } [data-ometa-theme="dark"] .jstree-default .jstree-clicked > .jstree-icon, [data-ometa-theme="dark"] .jstree-default .jstree-hovered > .jstree-icon, [data-ometa-theme="dark"] .jstree-default .jstree-checked > .jstree-icon { opacity: 1; } [data-ometa-theme="dark"] #jstree-marker.jstree-default { border-left-color: #999; background: transparent; } /* ------------------------------------------------------------ filepond */ [data-ometa-theme="dark"] .filepond--root { --filepond-panel-bg: var(--bs-tertiary-bg, #2b3035); } [data-ometa-theme="dark"] .filepond--panel-root { background-color: var(--bs-tertiary-bg, #2b3035); border: 1px solid var(--bs-border-color, #495057); } [data-ometa-theme="dark"] .filepond--drop-label { color: var(--bs-body-color, #dee2e6); } [data-ometa-theme="dark"] .filepond--label-action { text-decoration-color: var(--bs-body-color, #dee2e6); } [data-ometa-theme="dark"] .filepond--credits { display: none; } /* -------------------------------------------------------- vue-multiselect */ /* vue-multiselect 2.1.6 hardcodes #fff / #35495e throughout and ships no dark * variant, so every visible surface needs restating. */ [data-ometa-theme="dark"] .multiselect { color: var(--bs-body-color, #dee2e6); } [data-ometa-theme="dark"] .multiselect__tags, [data-ometa-theme="dark"] .multiselect__input, [data-ometa-theme="dark"] .multiselect__single { background: var(--bs-body-bg, #212529); border-color: var(--bs-border-color, #495057); color: var(--bs-body-color, #dee2e6); } [data-ometa-theme="dark"] .multiselect__input::placeholder { color: var(--bs-secondary-color, #adb5bd); } [data-ometa-theme="dark"] .multiselect__content-wrapper { background: var(--bs-body-bg, #212529); border-color: var(--bs-border-color, #495057); color: var(--bs-body-color, #dee2e6); } [data-ometa-theme="dark"] .multiselect__option { color: var(--bs-body-color, #dee2e6); } [data-ometa-theme="dark"] .multiselect__option--highlight { background: var(--bs-primary, #0d6efd); color: #fff; } [data-ometa-theme="dark"] .multiselect__option--selected { background: var(--bs-secondary-bg, #343a40); color: var(--bs-emphasis-color, #fff); } [data-ometa-theme="dark"] .multiselect__option--selected.multiselect__option--highlight { background: var(--bs-danger, #dc3545); color: #fff; } [data-ometa-theme="dark"] .multiselect__spinner { background: var(--bs-body-bg, #212529); } [data-ometa-theme="dark"] .multiselect--disabled, [data-ometa-theme="dark"] .multiselect--disabled .multiselect__current, [data-ometa-theme="dark"] .multiselect--disabled .multiselect__select { background: var(--bs-secondary-bg, #343a40); color: var(--bs-secondary-color, #adb5bd); } /* ------------------------------------------------------------- datatables */ /* The bs5 DataTables build draws its sort arrows with `content: "▲"` glyphs * that inherit currentColor, so it needs almost nothing — only the row-expand * control hardcodes white. */ [data-ometa-theme="dark"] table.dataTable td.dt-control:before { color: var(--bs-body-color, #dee2e6); border-color: var(--bs-body-color, #dee2e6); } /* DataTables switches off Bootstrap's own .table-striped rule and re-does the * banding itself against its `.odd` row class — with a hardcoded black wash, * which is invisible on a dark row. Put the banding back on Bootstrap's * emphasis colour, which is black in light mode and white in dark, so the * rows read as separated in both. The [data-ometa-theme] prefix is only there * to out-specify the DataTables rule, which loads after this file. */ [data-ometa-theme] table.dataTable.table-striped > tbody > tr.odd > * { box-shadow: inset 0 0 0 9999px rgba(var(--bs-emphasis-color-rgb, 0, 0, 0), 0.06); } [data-ometa-theme] table.dataTable.table-hover > tbody > tr:hover > * { box-shadow: inset 0 0 0 9999px rgba(var(--bs-emphasis-color-rgb, 0, 0, 0), 0.11); } /* --------------------------------------------------------------- buttons */ /* Bootstrap 5.3 does not restate the solid button colours for dark mode, so a * row of .btn-primary / .btn-warning links glares against a dark card. Step * each one down to the shade Bootstrap itself uses for the hover state in * light mode, and take the hover/active states down with it. * * Only the solid variants need this. The outline variants already draw from * the theme, and .btn-link follows --bs-link-color. */ [data-bs-theme="dark"] .btn-primary { --bs-btn-bg: #0a58ca; --bs-btn-border-color: #0a58ca; --bs-btn-hover-bg: #084298; --bs-btn-hover-border-color: #084298; --bs-btn-active-bg: #06357a; --bs-btn-active-border-color: #06357a; --bs-btn-disabled-bg: #0a58ca; --bs-btn-disabled-border-color: #0a58ca; } [data-bs-theme="dark"] .btn-secondary { --bs-btn-bg: #565e64; --bs-btn-border-color: #565e64; --bs-btn-hover-bg: #41464b; --bs-btn-hover-border-color: #41464b; --bs-btn-active-bg: #363a3e; --bs-btn-active-border-color: #363a3e; --bs-btn-disabled-bg: #565e64; --bs-btn-disabled-border-color: #565e64; } [data-bs-theme="dark"] .btn-success { --bs-btn-bg: #146c43; --bs-btn-border-color: #146c43; --bs-btn-hover-bg: #0f5132; --bs-btn-hover-border-color: #0f5132; --bs-btn-active-bg: #0c3f27; --bs-btn-active-border-color: #0c3f27; --bs-btn-disabled-bg: #146c43; --bs-btn-disabled-border-color: #146c43; } [data-bs-theme="dark"] .btn-danger { --bs-btn-bg: #b02a37; --bs-btn-border-color: #b02a37; --bs-btn-hover-bg: #842029; --bs-btn-hover-border-color: #842029; --bs-btn-active-bg: #6a1a21; --bs-btn-active-border-color: #6a1a21; --bs-btn-disabled-bg: #b02a37; --bs-btn-disabled-border-color: #b02a37; } /* Warning and info keep black text: black on these shades still clears the * 4.5:1 contrast ratio, and white on them does not. */ [data-bs-theme="dark"] .btn-warning { --bs-btn-bg: #cc9a06; --bs-btn-border-color: #cc9a06; --bs-btn-hover-bg: #b28705; --bs-btn-hover-border-color: #b28705; --bs-btn-active-bg: #997404; --bs-btn-active-border-color: #997404; --bs-btn-disabled-bg: #cc9a06; --bs-btn-disabled-border-color: #cc9a06; } [data-bs-theme="dark"] .btn-info { --bs-btn-bg: #0aa2c0; --bs-btn-border-color: #0aa2c0; --bs-btn-hover-bg: #098da8; --bs-btn-hover-border-color: #098da8; --bs-btn-active-bg: #087990; --bs-btn-active-border-color: #087990; --bs-btn-disabled-bg: #0aa2c0; --bs-btn-disabled-border-color: #0aa2c0; } /* .btn-light and .btn-dark are fixed shades in Bootstrap, so in dark mode * .btn-light stays a white block. Swap the two round. */ [data-bs-theme="dark"] .btn-light { --bs-btn-color: var(--bs-body-color); --bs-btn-bg: var(--bs-secondary-bg); --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-color: var(--bs-emphasis-color); --bs-btn-hover-bg: var(--bs-tertiary-bg); --bs-btn-hover-border-color: var(--bs-border-color); --bs-btn-active-color: var(--bs-emphasis-color); --bs-btn-active-bg: var(--bs-tertiary-bg); --bs-btn-active-border-color: var(--bs-border-color); } /* .bg-light is a fixed near-white in Bootstrap, and 5.3 dropped .navbar-light, * so a `dbc.Navbar(color="light")` in dark mode is a light bar with the dark * theme's white link text on it — unreadable. Bootstrap sets .bg-light with * !important, so the remap needs one too. */ [data-bs-theme="dark"] .bg-light { background-color: var(--bs-tertiary-bg) !important; } /* The same applies to the other solids Bootstrap derives from --bs-primary: * the selected page in a pager and the active row of a list group. */ [data-bs-theme="dark"] .page-item.active .page-link { --bs-pagination-active-bg: #0a58ca; --bs-pagination-active-border-color: #0a58ca; } [data-bs-theme="dark"] .list-group-item.active { --bs-list-group-active-bg: #0a58ca; --bs-list-group-active-border-color: #0a58ca; } /* ----------------------------------------------------------- dcc.Dropdown */ /* dcc.Dropdown is react-select v1, whose stylesheet hardcodes #fff surfaces * and #333 text. Every dbc dashboard uses it, so this is the difference * between a themed page and a page of white boxes. */ [data-ometa-theme="dark"] .Select-control, [data-ometa-theme="dark"] .Select.is-focused:not(.is-open) > .Select-control, [data-ometa-theme="dark"] .Select-menu-outer, [data-ometa-theme="dark"] .Select-noresults { background-color: var(--bs-body-bg, #212529); border-color: var(--bs-border-color, #495057); color: var(--bs-body-color, #dee2e6); } [data-ometa-theme="dark"] .Select-placeholder, [data-ometa-theme="dark"] .Select--single > .Select-control .Select-value, [data-ometa-theme="dark"] .Select-input > input { color: var(--bs-body-color, #dee2e6); } /* The selected label is the one place react-select really digs in. It ships * the same declaration twice, at two different specificities, the heavier * being six classes deep: * * .Select.has-value.Select--single > .Select-control .Select-value * .Select-value-label { color: #333 } * * Out-specifying that means restating the whole chain and hoping react-select * never adds a seventh class. !important is the honest fix: the text colour of * a themed control is not something the widget should be pinning. */ [data-ometa-theme="dark"] .Select-value-label { color: var(--bs-body-color, #dee2e6) !important; } /* Dash renders the open menu through react-virtualized-select, so the rows are * .VirtualizedSelectOption rather than the .Select-option above. */ [data-ometa-theme="dark"] .Select-menu, [data-ometa-theme="dark"] .VirtualSelectGrid { background-color: var(--bs-body-bg, #212529); } [data-ometa-theme="dark"] .VirtualizedSelectOption { background-color: transparent; color: var(--bs-body-color, #dee2e6); } [data-ometa-theme="dark"] .VirtualizedSelectFocusedOption { background-color: var(--bs-secondary-bg, #343a40); } [data-ometa-theme="dark"] .VirtualizedSelectDisabledOption { color: var(--bs-secondary-color, #adb5bd); } [data-ometa-theme="dark"] .Select.is-disabled > .Select-control { background-color: var(--bs-secondary-bg, #343a40); } [data-ometa-theme="dark"] .Select-option { background-color: var(--bs-body-bg, #212529); color: var(--bs-body-color, #dee2e6); } [data-ometa-theme="dark"] .Select-option.is-focused { background-color: var(--bs-secondary-bg, #343a40); color: var(--bs-emphasis-color, #fff); } [data-ometa-theme="dark"] .Select-option.is-selected { background-color: var(--bs-tertiary-bg, #2b3035); color: var(--bs-emphasis-color, #fff); } [data-ometa-theme="dark"] .Select-option.is-disabled { color: var(--bs-secondary-color, #adb5bd); } /* Multi-select chips */ [data-ometa-theme="dark"] .Select--multi .Select-value { background-color: var(--bs-secondary-bg, #343a40); border-color: var(--bs-border-color, #495057); color: var(--bs-emphasis-color, #fff); } [data-ometa-theme="dark"] .Select--multi .Select-value-icon { border-right-color: var(--bs-border-color, #495057); } [data-ometa-theme="dark"] .Select--multi .Select-value-icon:hover { background-color: var(--bs-danger, #dc3545); color: #fff; } [data-ometa-theme="dark"] .Select-arrow { border-top-color: var(--bs-secondary-color, #adb5bd); } [data-ometa-theme="dark"] .Select-clear { color: var(--bs-secondary-color, #adb5bd); } /* ------------------------------------------------------ dash DataTable */ /* dash-table paints its own surfaces from a set of CSS variables plus two * hardcoded rules for td and th. Restate the variables, then beat those two * rules on specificity — no !important needed, and any style_data the app * sets itself still wins, as it should. */ [data-ometa-theme="dark"] .dash-table-container, [data-ometa-theme="dark"] .dash-spreadsheet-container { --text-color: var(--bs-body-color, #dee2e6); --hover: var(--bs-secondary-bg, #343a40); --border: var(--bs-border-color, #495057); --muted: var(--bs-border-color, #495057); --faded-text: var(--bs-secondary-color, #adb5bd); --faded-text-header: var(--bs-secondary-color, #adb5bd); --faded-dropdown: var(--bs-tertiary-bg, #2b3035); --background-color-ellipses: var(--bs-tertiary-bg, #2b3035); color: var(--bs-body-color, #dee2e6); } [data-ometa-theme="dark"] .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td { background-color: var(--bs-body-bg, #212529); color: var(--bs-body-color, #dee2e6); border-color: var(--bs-border-color, #495057); } /* Alternating rows, to match the Bootstrap tables elsewhere on the site. */ [data-ometa-theme="dark"] .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tr:nth-of-type(odd) td { background-color: var(--bs-tertiary-bg, #2b3035); } [data-ometa-theme="dark"] .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th { background-color: var(--bs-secondary-bg, #343a40); color: var(--bs-emphasis-color, #fff); border-color: var(--bs-border-color, #495057); } [data-ometa-theme="dark"] .dash-spreadsheet-container .dash-filter input { background-color: var(--bs-body-bg, #212529); color: var(--bs-body-color, #dee2e6); } [data-ometa-theme="dark"] .dash-spreadsheet-menu, [data-ometa-theme="dark"] .dash-spreadsheet-menu-item, [data-ometa-theme="dark"] .dash-table-container .previous-next-container { color: var(--bs-body-color, #dee2e6); } /* The export button sits in an unclassed wrapper, so hook the menu itself. */ [data-ometa-theme="dark"] .dash-spreadsheet-menu button, [data-ometa-theme="dark"] .dash-table-container .previous-next-container button, [data-ometa-theme="dark"] .dash-table-container .previous-next-container input { background-color: var(--bs-secondary-bg, #343a40); border: 1px solid var(--bs-border-color, #495057); border-radius: 0.25rem; color: var(--bs-body-color, #dee2e6); } /* -------------------------------------------------------------- rc-slider */ /* dcc.Slider / dcc.RangeSlider ship rc-slider, whose rail and marks are fixed * light greys. */ [data-ometa-theme="dark"] .rc-slider-rail { background-color: var(--bs-secondary-bg, #343a40); } [data-ometa-theme="dark"] .rc-slider-dot { background-color: var(--bs-tertiary-bg, #2b3035); border-color: var(--bs-border-color, #495057); } [data-ometa-theme="dark"] .rc-slider-mark-text { color: var(--bs-secondary-color, #adb5bd); } [data-ometa-theme="dark"] .rc-slider-mark-text-active { color: var(--bs-body-color, #dee2e6); } [data-ometa-theme="dark"] .rc-slider-handle { background-color: var(--bs-body-bg, #212529); } [data-ometa-theme="dark"] .rc-slider-tooltip-inner { background-color: var(--bs-secondary-bg, #343a40); color: var(--bs-body-color, #dee2e6); } /* ------------------------------------------------- dash-daq ColorPicker */ /* dash-daq renders react-color, which writes its colours as inline styles. * The wrapper classes are the only hooks, and beating an inline style needs * !important. Nothing here touches the saturation or hue gradients — those * are the control, not chrome. */ [data-ometa-theme="dark"] .daq-colorpicker--light__chromepicker { background: var(--bs-tertiary-bg, #2b3035) !important; box-shadow: 0 0 0 1px var(--bs-border-color, #495057) !important; } [data-ometa-theme="dark"] .daq-colorpicker--light label, [data-ometa-theme="dark"] .daq-colorpicker--light span, [data-ometa-theme="dark"] .daq-colorpicker--light__label { color: var(--bs-body-color, #dee2e6) !important; } [data-ometa-theme="dark"] .daq-colorpicker--light input { background: var(--bs-body-bg, #212529) !important; color: var(--bs-body-color, #dee2e6) !important; box-shadow: inset 0 0 0 1px var(--bs-border-color, #495057) !important; }