/* Dark theme for Binance MCP. * * This Metronic build predates Bootstrap 5.3's `data-bs-theme` support and compiles most of its * colours to literal hex, so a dark mode has to be layered on top. Two mechanisms do the work: * * 1. Re-point the --bs-* custom properties the bundle *does* use. That alone flips everything * built on them (.text-dark, .bg-light, .bg-body, .text-white, .border, table variables). * 2. Override the shell surfaces and the gray text scale, which are hardcoded. * * Scoped to [data-bs-theme="dark"] on , set before first paint by the inline script in the * page head so there is no flash of the light theme. */ :root[data-bs-theme="dark"] { color-scheme: dark; --d-bg: #0f1218; /* page background */ --d-surface: #171b23; /* cards, header, aside */ --d-surface-2: #1e232c; /* inputs, hovers, "light" bg */ --d-surface-3: #262c37; /* borders, separators */ --d-text: #e4e6ef; /* primary text (was #181C32) */ --d-text-muted: #9aa1b2; --d-text-dim: #6d7280; /* 1. Bootstrap variables the bundle reads. */ --bs-body-bg: var(--d-bg); --bs-body-bg-rgb: 15, 18, 24; --bs-body-color: var(--d-text); --bs-dark: var(--d-text); --bs-dark-rgb: 228, 230, 239; /* .text-dark must read light on a dark ground */ --bs-light: var(--d-surface-2); --bs-light-rgb: 30, 35, 44; --bs-white: var(--d-surface); --bs-white-rgb: 23, 27, 35; --bs-border-color: var(--d-surface-3); --bs-secondary-bg: var(--d-surface-2); --bs-emphasis-color: var(--d-text); --bs-heading-color: var(--d-text); } /* 2. Shell surfaces --------------------------------------------------------------------------- */ :root[data-bs-theme="dark"] body, :root[data-bs-theme="dark"] .page, :root[data-bs-theme="dark"] .wrapper { background-color: var(--d-bg); color: var(--d-text); } :root[data-bs-theme="dark"] .card, :root[data-bs-theme="dark"] .card-flush, :root[data-bs-theme="dark"] .aside-secondary, :root[data-bs-theme="dark"] .aside.bg-white, :root[data-bs-theme="dark"] .bg-body { background-color: var(--d-surface) !important; color: var(--d-text); } :root[data-bs-theme="dark"] .card { box-shadow: 0 0 20px 0 rgba(0, 0, 0, .25); } :root[data-bs-theme="dark"] .aside { box-shadow: none; } /* Header and footer sit on the page background, exactly as in the light theme — a filled bar made the first and last rows of cards look glued to them. */ :root[data-bs-theme="dark"] .header, :root[data-bs-theme="dark"] .footer { background-color: transparent !important; } /* The narrow icon rail is already dark in the light theme — deepen it so it doesn't glow. */ :root[data-bs-theme="dark"] .aside-primary { background-color: #0b0e13 !important; } :root[data-bs-theme="dark"] .aside-secondary, :root[data-bs-theme="dark"] .header, :root[data-bs-theme="dark"] .footer { border-color: var(--d-surface-3) !important; } :root[data-bs-theme="dark"] .card-header { border-bottom-color: var(--d-surface-3); } /* 3. Text scale ------------------------------------------------------------------------------- */ :root[data-bs-theme="dark"] .text-gray-900, :root[data-bs-theme="dark"] .text-gray-800, :root[data-bs-theme="dark"] .text-dark { color: var(--d-text) !important; } :root[data-bs-theme="dark"] .text-gray-700 { color: #c3c7d4 !important; } :root[data-bs-theme="dark"] .text-gray-600, :root[data-bs-theme="dark"] .text-muted, :root[data-bs-theme="dark"] .text-gray-500 { color: var(--d-text-muted) !important; } :root[data-bs-theme="dark"] .text-gray-400 { color: var(--d-text-dim) !important; } :root[data-bs-theme="dark"] a { color: inherit; } :root[data-bs-theme="dark"] .breadcrumb-item, :root[data-bs-theme="dark"] .breadcrumb-item a { color: var(--d-text-muted) !important; } /* 4. Tables, separators, borders --------------------------------------------------------------- */ :root[data-bs-theme="dark"] .table { --bs-table-color: var(--d-text); --bs-table-bg: transparent; color: var(--d-text); } :root[data-bs-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; color: inherit; } :root[data-bs-theme="dark"] .table-row-dashed tr { border-bottom-color: var(--d-surface-3) !important; } :root[data-bs-theme="dark"] .table-row-bordered tr { border-bottom-color: var(--d-surface-3) !important; } :root[data-bs-theme="dark"] .separator, :root[data-bs-theme="dark"] .border-bottom { border-bottom-color: var(--d-surface-3) !important; } :root[data-bs-theme="dark"] .border { border-color: var(--d-surface-3) !important; } /* 5. Menu / dropdowns -------------------------------------------------------------------------- */ :root[data-bs-theme="dark"] .menu-title { color: var(--d-text-muted) !important; } :root[data-bs-theme="dark"] .menu-link { color: var(--d-text-muted); } :root[data-bs-theme="dark"] .menu-link:hover, :root[data-bs-theme="dark"] .menu-link.active { background-color: var(--d-surface-2); } :root[data-bs-theme="dark"] .menu-link.active .menu-title { color: #fff !important; } :root[data-bs-theme="dark"] .dropdown-menu, :root[data-bs-theme="dark"] .menu-sub-dropdown { background-color: var(--d-surface-2) !important; border: 1px solid var(--d-surface-3); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); } :root[data-bs-theme="dark"] .dropdown-item { color: var(--d-text); } :root[data-bs-theme="dark"] .dropdown-item:hover { background-color: var(--d-surface-3); } /* 6. Controls ---------------------------------------------------------------------------------- */ :root[data-bs-theme="dark"] .form-control, :root[data-bs-theme="dark"] .form-control-solid, :root[data-bs-theme="dark"] .form-select { background-color: var(--d-surface-2) !important; border-color: var(--d-surface-3); color: var(--d-text) !important; } :root[data-bs-theme="dark"] .form-control::placeholder { color: var(--d-text-dim) !important; } :root[data-bs-theme="dark"] .form-label { color: var(--d-text) !important; } :root[data-bs-theme="dark"] .btn-light, :root[data-bs-theme="dark"] .btn-icon.btn-light { background-color: var(--d-surface-2); border-color: var(--d-surface-3); color: var(--d-text); } :root[data-bs-theme="dark"] .btn-light:hover { background-color: var(--d-surface-3); color: #fff; } :root[data-bs-theme="dark"] .btn-icon { color: var(--d-text-muted); } :root[data-bs-theme="dark"] .progress, :root[data-bs-theme="dark"] .progress.bg-light { background-color: var(--d-surface-2) !important; } /* 7. Tinted badges / symbols keep their hue but need a dark ground ------------------------------ */ :root[data-bs-theme="dark"] .badge-light-primary, :root[data-bs-theme="dark"] .bg-light-primary { background-color: rgba(114, 57, 234, .18) !important; } :root[data-bs-theme="dark"] .badge-light-success, :root[data-bs-theme="dark"] .bg-light-success { background-color: rgba(80, 205, 137, .16) !important; } :root[data-bs-theme="dark"] .badge-light-danger, :root[data-bs-theme="dark"] .bg-light-danger { background-color: rgba(241, 65, 108, .16) !important; } :root[data-bs-theme="dark"] .badge-light-warning, :root[data-bs-theme="dark"] .bg-light-warning { background-color: rgba(255, 199, 0, .16) !important; } :root[data-bs-theme="dark"] .badge-light-info, :root[data-bs-theme="dark"] .bg-light-info { background-color: rgba(114, 57, 234, .16) !important; } :root[data-bs-theme="dark"] .badge-light-secondary,:root[data-bs-theme="dark"] .bg-light-secondary{ background-color: var(--d-surface-2) !important; color: var(--d-text-muted) !important; } :root[data-bs-theme="dark"] .badge-light { background-color: var(--d-surface-2) !important; color: var(--d-text-muted) !important; } /* 8. Alerts (login) ---------------------------------------------------------------------------- */ :root[data-bs-theme="dark"] .alert-danger { background-color: rgba(241, 65, 108, .14); color: #ff8fa8; border: 0; } :root[data-bs-theme="dark"] .alert-success { background-color: rgba(80, 205, 137, .14); color: #7ee2ab; border: 0; } /* 9. App chrome defined inline in the layout --------------------------------------------------- */ :root[data-bs-theme="dark"] .xp-tabbar { background: var(--d-surface); border-top-color: var(--d-surface-3); } /* 10. ApexCharts: the SVG text/grid colours are set in JS, but the tooltip is themed here. */ :root[data-bs-theme="dark"] .apexcharts-tooltip { background: var(--d-surface-2) !important; border: 1px solid var(--d-surface-3) !important; color: var(--d-text) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, .5) !important; } :root[data-bs-theme="dark"] .apexcharts-tooltip-title { background: var(--d-surface-3) !important; border-bottom-color: var(--d-surface-3) !important; } :root[data-bs-theme="dark"] .apexcharts-legend-text { color: var(--d-text-muted) !important; } /* 11. Headings and card titles. * The bundle hardcodes color:#181C32 in ~90 rules (it is --bs-dark compiled to a literal, so * re-pointing the variable does not reach them). These are the ones the panel's pages actually use. */ :root[data-bs-theme="dark"] h1, :root[data-bs-theme="dark"] .h1, :root[data-bs-theme="dark"] h2, :root[data-bs-theme="dark"] .h2, :root[data-bs-theme="dark"] h3, :root[data-bs-theme="dark"] .h3, :root[data-bs-theme="dark"] h4, :root[data-bs-theme="dark"] .h4, :root[data-bs-theme="dark"] h5, :root[data-bs-theme="dark"] .h5, :root[data-bs-theme="dark"] h6, :root[data-bs-theme="dark"] .h6 { color: var(--d-text); } :root[data-bs-theme="dark"] .card .card-header .card-title, :root[data-bs-theme="dark"] .card .card-header .card-title .card-label { color: var(--d-text); } :root[data-bs-theme="dark"] .card .card-header .card-title small { color: var(--d-text-muted); } :root[data-bs-theme="dark"] .input-group-text { background-color: var(--d-surface-2); border-color: var(--d-surface-3); color: var(--d-text); } /* 12. SweetAlert — the confirm dialog behind the service start/stop actions. */ :root[data-bs-theme="dark"] .swal2-popup { background: var(--d-surface) !important; color: var(--d-text) !important; } :root[data-bs-theme="dark"] .swal2-title, :root[data-bs-theme="dark"] .swal2-html-container { color: var(--d-text) !important; } :root[data-bs-theme="dark"] .swal2-input { background: var(--d-surface-2) !important; color: var(--d-text) !important; border-color: var(--d-surface-3) !important; } /* 13. Modals (the token form's area explainer). */ :root[data-bs-theme="dark"] .modal-content { background-color: var(--d-surface); color: var(--d-text); } :root[data-bs-theme="dark"] .modal-header, :root[data-bs-theme="dark"] .modal-footer { border-color: var(--d-surface-3); } :root[data-bs-theme="dark"] .border-gray-200 { border-color: var(--d-surface-3) !important; } :root[data-bs-theme="dark"] code { background-color: var(--d-surface-2); }