/* ========================================================================= JTPTECH Theme & Branding Dark mode is applied only when , so light mode is left completely untouched. Covers pretix storefront (Bootstrap 3) and the control panel. Variables first, then component overrides. ========================================================================= */ html[data-jtp-theme="dark"] { --jtp-bg: #1b1d21; /* page background */ --jtp-bg-2: #24272c; /* cards / panels */ --jtp-bg-3: #2d3137; /* raised: inputs, headers */ --jtp-bg-4: #353a41; /* hover / active */ --jtp-text: #e6e8eb; /* primary text */ --jtp-muted: #a8adb4; /* secondary text */ --jtp-border: #3a3f46; /* borders / dividers */ --jtp-border-2: #474d55; /* input borders */ --jtp-link: #5aa9ff; /* links */ --jtp-link-hov: #87c2ff; } /* ---- base ---------------------------------------------------------------- */ html[data-jtp-theme="dark"], html[data-jtp-theme="dark"] body { background-color: var(--jtp-bg) !important; color: var(--jtp-text); color-scheme: dark; } html[data-jtp-theme="dark"] body { background-image: none !important; } html[data-jtp-theme="dark"] h1, html[data-jtp-theme="dark"] h2, html[data-jtp-theme="dark"] h3, html[data-jtp-theme="dark"] h4, html[data-jtp-theme="dark"] h5, html[data-jtp-theme="dark"] h6, html[data-jtp-theme="dark"] label, html[data-jtp-theme="dark"] legend, html[data-jtp-theme="dark"] dt, html[data-jtp-theme="dark"] strong { color: var(--jtp-text); } html[data-jtp-theme="dark"] .text-muted, html[data-jtp-theme="dark"] small, html[data-jtp-theme="dark"] .help-block, html[data-jtp-theme="dark"] .text-gray, html[data-jtp-theme="dark"] .form-text { color: var(--jtp-muted) !important; } html[data-jtp-theme="dark"] a { color: var(--jtp-link); } html[data-jtp-theme="dark"] a:hover, html[data-jtp-theme="dark"] a:focus { color: var(--jtp-link-hov); } html[data-jtp-theme="dark"] hr { border-top-color: var(--jtp-border); } /* ---- containers / cards / panels ---------------------------------------- */ html[data-jtp-theme="dark"] .panel, html[data-jtp-theme="dark"] .well, html[data-jtp-theme="dark"] .card, html[data-jtp-theme="dark"] .thumbnail, html[data-jtp-theme="dark"] .list-group-item, html[data-jtp-theme="dark"] .jumbotron { background-color: var(--jtp-bg-2) !important; border-color: var(--jtp-border) !important; color: var(--jtp-text); } html[data-jtp-theme="dark"] .panel-default > .panel-heading, html[data-jtp-theme="dark"] .panel-heading, html[data-jtp-theme="dark"] .card-header, html[data-jtp-theme="dark"] .card-footer, html[data-jtp-theme="dark"] .panel-footer { background-color: var(--jtp-bg-3) !important; border-color: var(--jtp-border) !important; color: var(--jtp-text); } html[data-jtp-theme="dark"] .panel-group .panel, html[data-jtp-theme="dark"] .panel-body { background-color: var(--jtp-bg-2) !important; } /* ---- navbar / header ---------------------------------------------------- */ html[data-jtp-theme="dark"] .navbar-default, html[data-jtp-theme="dark"] .navbar, html[data-jtp-theme="dark"] header.navbar { background-color: var(--jtp-bg-2) !important; border-color: var(--jtp-border) !important; } html[data-jtp-theme="dark"] .navbar-default .navbar-nav > li > a, html[data-jtp-theme="dark"] .navbar-default .navbar-brand, html[data-jtp-theme="dark"] .navbar-nav > li > a, html[data-jtp-theme="dark"] .navbar-text { color: var(--jtp-text) !important; } html[data-jtp-theme="dark"] .navbar-default .navbar-nav > .active > a, html[data-jtp-theme="dark"] .navbar-default .navbar-nav > li > a:hover, html[data-jtp-theme="dark"] .navbar-default .navbar-nav > li > a:focus { background-color: var(--jtp-bg-4) !important; color: #fff !important; } /* ---- control-panel sidebar / layout ------------------------------------- */ html[data-jtp-theme="dark"] #page-wrapper, html[data-jtp-theme="dark"] .page-wrapper, html[data-jtp-theme="dark"] #wrapper, html[data-jtp-theme="dark"] main, html[data-jtp-theme="dark"] .container, html[data-jtp-theme="dark"] .container-fluid { background-color: transparent !important; color: var(--jtp-text); } html[data-jtp-theme="dark"] .sidebar, html[data-jtp-theme="dark"] #sidebar, html[data-jtp-theme="dark"] .navbar-side, html[data-jtp-theme="dark"] nav.sidebar { background-color: var(--jtp-bg-2) !important; border-color: var(--jtp-border) !important; } html[data-jtp-theme="dark"] .sidebar a, html[data-jtp-theme="dark"] .sidebar .nav > li > a { color: var(--jtp-text) !important; } html[data-jtp-theme="dark"] .sidebar .nav > li > a:hover, html[data-jtp-theme="dark"] .sidebar .nav > .active > a, html[data-jtp-theme="dark"] .sidebar a.active, html[data-jtp-theme="dark"] .navbar-side a.active, html[data-jtp-theme="dark"] nav a.active { background-color: var(--jtp-bg-4) !important; color: #fff !important; } /* Sidebar account avatar (.context-selector): pretix stacks a filled fa-circle behind a user glyph. Our dark theme makes icons light, so the circle turns a glaring white disc. Recolor just this stacked avatar: a dark disc with a muted figure on top, so it reads as a normal placeholder avatar. */ html[data-jtp-theme="dark"] .context-selector .fa-stack .fa-circle.fa-stack-2x { color: var(--jtp-bg-4) !important; } html[data-jtp-theme="dark"] .context-selector .fa-stack .fa-stack-1x { color: var(--jtp-muted) !important; } /* ---- control-panel dashboard widget tiles ------------------------------- */ html[data-jtp-theme="dark"] .widget-container, html[data-jtp-theme="dark"] .widget-container.widget-small, html[data-jtp-theme="dark"] .widget-container.widget-medium, html[data-jtp-theme="dark"] .widget-container.widget-large, html[data-jtp-theme="dark"] .dashboard .widget { background-color: var(--jtp-bg-2) !important; border-color: var(--jtp-border) !important; color: var(--jtp-text); } html[data-jtp-theme="dark"] .widget-container .value, html[data-jtp-theme="dark"] .widget-container .caption { color: var(--jtp-text); } html[data-jtp-theme="dark"] .widget-container a { color: var(--jtp-link); } /* ---- login / auth card -------------------------------------------------- */ html[data-jtp-theme="dark"] form.form-signin, html[data-jtp-theme="dark"] .form-signin, html[data-jtp-theme="dark"] .auth-panel, html[data-jtp-theme="dark"] .loginbox { background-color: var(--jtp-bg-2) !important; border: 1px solid var(--jtp-border) !important; border-radius: 8px; color: var(--jtp-text); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5) !important; } html[data-jtp-theme="dark"] form.form-signin label, html[data-jtp-theme="dark"] .form-signin label { color: var(--jtp-text) !important; } /* ---- tables ------------------------------------------------------------- */ html[data-jtp-theme="dark"] .table, html[data-jtp-theme="dark"] table { color: var(--jtp-text); } html[data-jtp-theme="dark"] .table > thead > tr > th, html[data-jtp-theme="dark"] .table > tbody > tr > td, html[data-jtp-theme="dark"] .table > tbody > tr > th, html[data-jtp-theme="dark"] .table > tfoot > tr > td, html[data-jtp-theme="dark"] .table > thead > tr > td { border-color: var(--jtp-border) !important; } html[data-jtp-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.03) !important; } html[data-jtp-theme="dark"] .table-hover > tbody > tr:hover { background-color: var(--jtp-bg-4) !important; } html[data-jtp-theme="dark"] .table > thead > tr > th { background-color: var(--jtp-bg-3) !important; } /* ---- forms / inputs ----------------------------------------------------- */ html[data-jtp-theme="dark"] .form-control, html[data-jtp-theme="dark"] input[type="text"], html[data-jtp-theme="dark"] input[type="email"], html[data-jtp-theme="dark"] input[type="password"], html[data-jtp-theme="dark"] input[type="number"], html[data-jtp-theme="dark"] input[type="search"], html[data-jtp-theme="dark"] input[type="tel"], html[data-jtp-theme="dark"] input[type="url"], html[data-jtp-theme="dark"] input[type="date"], html[data-jtp-theme="dark"] textarea, html[data-jtp-theme="dark"] select, html[data-jtp-theme="dark"] .select2-selection, html[data-jtp-theme="dark"] .select2-container--default .select2-selection--single { background-color: var(--jtp-bg-3) !important; border-color: var(--jtp-border-2) !important; color: var(--jtp-text) !important; } html[data-jtp-theme="dark"] .form-control:focus, html[data-jtp-theme="dark"] textarea:focus, html[data-jtp-theme="dark"] select:focus { border-color: var(--jtp-link) !important; box-shadow: 0 0 0 2px rgba(90, 169, 255, 0.25) !important; } html[data-jtp-theme="dark"] ::placeholder { color: #7d838b !important; } html[data-jtp-theme="dark"] .input-group-addon { background-color: var(--jtp-bg-4) !important; border-color: var(--jtp-border-2) !important; color: var(--jtp-text) !important; } /* select2 dropdowns */ html[data-jtp-theme="dark"] .select2-dropdown, html[data-jtp-theme="dark"] .select2-results__option { background-color: var(--jtp-bg-3) !important; color: var(--jtp-text) !important; } html[data-jtp-theme="dark"] .select2-results__option--highlighted { background-color: var(--jtp-link) !important; } /* ---- buttons ------------------------------------------------------------ */ html[data-jtp-theme="dark"] .btn-default { background-color: var(--jtp-bg-3) !important; border-color: var(--jtp-border-2) !important; color: var(--jtp-text) !important; } html[data-jtp-theme="dark"] .btn-default:hover, html[data-jtp-theme="dark"] .btn-default:focus { background-color: var(--jtp-bg-4) !important; } /* keep .btn-primary / success / danger as pretix sets them (good contrast) */ /* ---- dropdowns / menus -------------------------------------------------- */ html[data-jtp-theme="dark"] .dropdown-menu { background-color: var(--jtp-bg-3) !important; border-color: var(--jtp-border) !important; } html[data-jtp-theme="dark"] .dropdown-menu > li > a { color: var(--jtp-text) !important; } html[data-jtp-theme="dark"] .dropdown-menu > li > a:hover, html[data-jtp-theme="dark"] .dropdown-menu > li > a:focus { background-color: var(--jtp-bg-4) !important; color: #fff !important; } html[data-jtp-theme="dark"] .dropdown-header, html[data-jtp-theme="dark"] .dropdown-menu .divider { border-color: var(--jtp-border) !important; } /* ---- modals ------------------------------------------------------------- */ html[data-jtp-theme="dark"] .modal-content { background-color: var(--jtp-bg-2) !important; color: var(--jtp-text); border-color: var(--jtp-border) !important; } html[data-jtp-theme="dark"] .modal-header, html[data-jtp-theme="dark"] .modal-footer { border-color: var(--jtp-border) !important; } html[data-jtp-theme="dark"] .modal-backdrop.in { opacity: 0.7; } /* ---- alerts ------------------------------------------------------------- */ html[data-jtp-theme="dark"] .alert-info { background-color: #16323d !important; border-color: #1f4a5a !important; color: #bfe3f0 !important; } html[data-jtp-theme="dark"] .alert-success { background-color: #18331f !important; border-color: #265c34 !important; color: #c3eccd !important; } html[data-jtp-theme="dark"] .alert-warning { background-color: #3a3016 !important; border-color: #5e4d1f !important; color: #f0dfb2 !important; } html[data-jtp-theme="dark"] .alert-danger { background-color: #3a1c1c !important; border-color: #5e2a2a !important; color: #f0bfbf !important; } /* ---- misc components ---------------------------------------------------- */ html[data-jtp-theme="dark"] .breadcrumb, html[data-jtp-theme="dark"] .pager, html[data-jtp-theme="dark"] .pagination > li > a, html[data-jtp-theme="dark"] .pagination > li > span { background-color: var(--jtp-bg-2) !important; border-color: var(--jtp-border) !important; color: var(--jtp-text) !important; } html[data-jtp-theme="dark"] .nav-tabs { border-bottom-color: var(--jtp-border) !important; } html[data-jtp-theme="dark"] .nav-tabs > li > a:hover { background-color: var(--jtp-bg-3) !important; border-color: var(--jtp-border) !important; } html[data-jtp-theme="dark"] .nav-tabs > li.active > a, html[data-jtp-theme="dark"] .nav-tabs > li.active > a:hover, html[data-jtp-theme="dark"] .nav-tabs > li.active > a:focus { background-color: var(--jtp-bg-2) !important; border-color: var(--jtp-border) var(--jtp-border) transparent !important; color: var(--jtp-text) !important; } html[data-jtp-theme="dark"] .progress { background-color: var(--jtp-bg-4) !important; } html[data-jtp-theme="dark"] .badge { background-color: var(--jtp-bg-4) !important; color: var(--jtp-text); } html[data-jtp-theme="dark"] code, html[data-jtp-theme="dark"] pre { background-color: var(--jtp-bg-3) !important; border-color: var(--jtp-border) !important; color: #e6c07b; } html[data-jtp-theme="dark"] .close { color: var(--jtp-text); opacity: 0.8; text-shadow: none; } /* pretix event-list rows on the organizer page use
with a light zebra stripe (#f9f9f9) on alternating rows. Neutralize to dark: all rows transparent, even rows get a subtle dark stripe so the zebra survives. */ html[data-jtp-theme="dark"] article.row { background-color: transparent !important; } html[data-jtp-theme="dark"] article.row:nth-of-type(even) { background-color: rgba(255, 255, 255, 0.04) !important; } /* product list / cart on storefront */ html[data-jtp-theme="dark"] .product-row, html[data-jtp-theme="dark"] .cart, html[data-jtp-theme="dark"] .checkout-button-row, html[data-jtp-theme="dark"] .questions-form { background-color: transparent !important; border-color: var(--jtp-border) !important; } /* pretix "Save … in my customer account / customer profiles for future purchases" rows (customer-accounts feature) render as `.profile-save-container` with a hard-coded light #f5f5f5 background. In dark mode that leaves their text unreadable — darken the box and force readable text on the label + helper copy inside. */ html[data-jtp-theme="dark"] .profile-save-container { background-color: var(--jtp-bg-3) !important; border-color: var(--jtp-border) !important; color: var(--jtp-text) !important; } html[data-jtp-theme="dark"] .profile-save-container label, html[data-jtp-theme="dark"] .profile-save-container small, html[data-jtp-theme="dark"] .profile-save-container .text-muted, html[data-jtp-theme="dark"] .profile-save-container .help-block { color: var(--jtp-text) !important; } /* The attendee "saved profile" selector (.profile-select / .profile-scope) and its wrappers sit on the panel; keep them transparent so they inherit the dark panel background rather than any stray light default. */ html[data-jtp-theme="dark"] .profile-scope, html[data-jtp-theme="dark"] .profile-select-wrapper { background-color: transparent !important; color: var(--jtp-text); } /* pretix "modal-card" dialogs (native ) — e.g. the "We're now trying to reserve this for you!" cart-reserve overlay, voucher and seat pickers. They ship a hard white background; our dark-mode light text then vanishes on white. Darken the card + head/foot and force readable text. */ html[data-jtp-theme="dark"] .modal-card, html[data-jtp-theme="dark"] dialog.modal-card { background-color: var(--jtp-bg-2) !important; border-color: var(--jtp-border) !important; color: var(--jtp-text) !important; } html[data-jtp-theme="dark"] .modal-card-head, html[data-jtp-theme="dark"] .modal-card-foot { background-color: var(--jtp-bg-3) !important; border-color: var(--jtp-border) !important; } html[data-jtp-theme="dark"] .modal-card-title, html[data-jtp-theme="dark"] .modal-card-content, html[data-jtp-theme="dark"] .modal-card-body, html[data-jtp-theme="dark"] .modal-card-inner { color: var(--jtp-text) !important; } /* the native dimming backdrop */ html[data-jtp-theme="dark"] .modal-card::backdrop, html[data-jtp-theme="dark"] dialog::backdrop { background: rgba(0, 0, 0, 0.6); } /* ========================================================================= Floating theme toggle (always present, both themes) ========================================================================= */ .jtp-theme-toggle { position: fixed; right: 18px; bottom: 18px; z-index: 99999; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.15); background: #ffffff; color: #222; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25); cursor: pointer; font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; transition: background 0.15s ease, transform 0.1s ease; } .jtp-theme-toggle:hover { transform: translateY(-1px); } .jtp-theme-toggle:active { transform: translateY(0); } .jtp-theme-toggle__icon { pointer-events: none; } html[data-jtp-theme="dark"] .jtp-theme-toggle { background: var(--jtp-bg-3); color: #ffd479; border-color: var(--jtp-border-2); } @media (max-width: 640px) { .jtp-theme-toggle { right: 12px; bottom: 12px; width: 42px; height: 42px; font-size: 18px; } } /* ── Impersonation banner: keep it readable in dark mode ────────────────────── pretix's ".impersonate-warning" bar has a yellow background; the dark theme's global light text colour makes it illegible. Force dark text + a dark button. */ html[data-jtp-theme="dark"] .impersonate-warning, html[data-jtp-theme="dark"] .impersonate-warning * { color: #2a2200 !important; } html[data-jtp-theme="dark"] .impersonate-warning a { color: #5a3a00 !important; text-decoration: underline; } html[data-jtp-theme="dark"] .impersonate-warning .btn { background: #2a2200 !important; color: #ffe9a8 !important; border-color: #2a2200 !important; } /* ── Contextual table rows (Bootstrap .active/.success/.info/.warning/.danger) ─ These keep a LIGHT background in Bootstrap; combined with dark-mode's light text they become unreadable (e.g. the "On Sale" / "Not on Sale" separator rows on the statistics page). Give them dark-tinted backgrounds + readable text. Covers the class on either the or an individual /. */ html[data-jtp-theme="dark"] .table > tbody > tr.active > td, html[data-jtp-theme="dark"] .table > tbody > tr.active > th, html[data-jtp-theme="dark"] .table > tbody > tr > td.active, html[data-jtp-theme="dark"] .table > tbody > tr > th.active, html[data-jtp-theme="dark"] .table-hover > tbody > tr.active:hover > td { background-color: var(--jtp-bg-3) !important; color: var(--jtp-text) !important; } html[data-jtp-theme="dark"] .table > tbody > tr.success > td, html[data-jtp-theme="dark"] .table > tbody > tr.success > th, html[data-jtp-theme="dark"] .table > tbody > tr > td.success, html[data-jtp-theme="dark"] .table > tbody > tr > th.success { background-color: rgba(46, 160, 90, 0.20) !important; color: var(--jtp-text) !important; } html[data-jtp-theme="dark"] .table > tbody > tr.info > td, html[data-jtp-theme="dark"] .table > tbody > tr.info > th, html[data-jtp-theme="dark"] .table > tbody > tr > td.info, html[data-jtp-theme="dark"] .table > tbody > tr > th.info { background-color: rgba(70, 130, 220, 0.20) !important; color: var(--jtp-text) !important; } html[data-jtp-theme="dark"] .table > tbody > tr.warning > td, html[data-jtp-theme="dark"] .table > tbody > tr.warning > th, html[data-jtp-theme="dark"] .table > tbody > tr > td.warning, html[data-jtp-theme="dark"] .table > tbody > tr > th.warning { background-color: rgba(210, 160, 40, 0.20) !important; color: var(--jtp-text) !important; } html[data-jtp-theme="dark"] .table > tbody > tr.danger > td, html[data-jtp-theme="dark"] .table > tbody > tr.danger > th, html[data-jtp-theme="dark"] .table > tbody > tr > td.danger, html[data-jtp-theme="dark"] .table > tbody > tr > th.danger { background-color: rgba(210, 70, 70, 0.20) !important; color: var(--jtp-text) !important; }