/* Slice 36 — Theme system foundation (light / dark). * * Apply dark mode by adding `theme-dark` class to . SbAlert/SbToast * read it at fire time and switch background/foreground. * * For broader UI dark-theming, this file overrides a small set of common * surfaces (boxes, sidebar, body bg, text). Component-specific dark rules * can land later as the theme rolls out. */ :root { --sb-bg: #f5f5f5; --sb-surface: #ffffff; --sb-text: #393a4f; --sb-text-muted: #888a99; --sb-border: #e6e6e6; --sb-accent: #00c0ef; --sb-success: #1ce589; --sb-danger: #c0392b; --sb-shadow: 0 1px 3px rgba(0,0,0,.06); } body.theme-dark { --sb-bg: #161922; --sb-surface: #1f2330; --sb-text: #e9ecf2; --sb-text-muted: #9aa0b3; --sb-border: #2c3142; --sb-accent: #20c8f0; --sb-success: #2cdf95; --sb-danger: #e25e4d; --sb-shadow: 0 1px 4px rgba(0,0,0,.5); } /* Apply theme to top-level surfaces. We override sparingly so existing * stylesheet specificity wins for component-internal styling. */ body.theme-dark { background-color: var(--sb-bg) !important; color: var(--sb-text); } body.theme-dark .box, body.theme-dark .panel, body.theme-dark .card { background-color: var(--sb-surface) !important; color: var(--sb-text); border-color: var(--sb-border); box-shadow: var(--sb-shadow); } body.theme-dark .box-header, body.theme-dark .box-footer { background-color: var(--sb-surface) !important; color: var(--sb-text); border-color: var(--sb-border); } body.theme-dark .text-muted, body.theme-dark small.text-muted { color: var(--sb-text-muted) !important; } body.theme-dark a:not(.btn) { color: var(--sb-accent); } body.theme-dark hr, body.theme-dark .divider { border-color: var(--sb-border) !important; } body.theme-dark .form-control, body.theme-dark input.input, body.theme-dark select.form-control, body.theme-dark textarea.form-control, body.theme-dark .field-group { background-color: #14171f !important; color: var(--sb-text); border-color: var(--sb-border) !important; } body.theme-dark .form-control::placeholder { color: var(--sb-text-muted); } body.theme-dark .navbar, body.theme-dark header.header, body.theme-dark #sidebar_online_users, body.theme-dark #sidebar_toggle_online_users { background-color: var(--sb-surface) !important; color: var(--sb-text); border-color: var(--sb-border); } body.theme-dark .modal-content { background-color: var(--sb-surface); color: var(--sb-text); } /* Light/dark image swap (legacy convention used in profile_settings etc). */ body.theme-dark .light-image { display: none !important; } body.theme-dark .dark-image { display: block !important; } body:not(.theme-dark) .light-image { display: block; } body:not(.theme-dark) .dark-image { display: none !important; } /* SweetAlert dark customClass — referenced by sb_dialog.js. */ .sb-swal-dark .swal2-title, .sb-swal-dark .swal2-html-container, .sb-swal-dark .swal2-content { color: #e9ecf2 !important; } .sb-swal-dark .swal2-close { color: #aab1c4; } .sb-swal-dark .swal2-actions .btn { margin: 0 4px; } /* Toast popup spacing tweaks for both themes. */ .swal2-toast .swal2-title { font-weight: 600; } .swal2-toast .swal2-content { font-size: 13px; } /* ---------------------------------------------------------------- * Hotfix (post-Slice 36): comprehensive dark-mode overrides. * * style.css and friends hardcode #fff / #000 on dozens of surfaces * and text containers, which means the theme switch was leaving * dropdowns, headers, and many text blocks unreadable in dark mode. * The rules below force the common surfaces + text into the dark * palette using high specificity / !important so they win against * the legacy stylesheet without touching it. * ---------------------------------------------------------------- */ body.theme-dark, body.theme-dark .main-content, body.theme-dark .wrapper, body.theme-dark .page-content, body.theme-dark #content, body.theme-dark .container, body.theme-dark .container-fluid { background-color: var(--sb-bg) !important; color: var(--sb-text) !important; } /* Generic text containers that inherit hardcoded dark colors. */ body.theme-dark p, body.theme-dark span, body.theme-dark li, body.theme-dark td, body.theme-dark th, body.theme-dark label, body.theme-dark dd, body.theme-dark dt, body.theme-dark blockquote, body.theme-dark figcaption, body.theme-dark h1, body.theme-dark h2, body.theme-dark h3, body.theme-dark h4, body.theme-dark h5, body.theme-dark h6, body.theme-dark .text-default, body.theme-dark .text-dark, body.theme-dark .text-black { color: var(--sb-text); } /* Don't fight icons / badges / utility colors — those use Bootstrap's * text-primary/success/danger/etc. and stay vivid against either bg. */ /* Surfaces commonly used by Slydap layout. */ body.theme-dark .box, body.theme-dark .box-content, body.theme-dark .box-body, body.theme-dark .panel-body, body.theme-dark .well, body.theme-dark .media, body.theme-dark .feed-box, body.theme-dark .trace-box, body.theme-dark .list-group, body.theme-dark .list-group-item, body.theme-dark table, body.theme-dark table.table, body.theme-dark .table > tbody > tr > td, body.theme-dark .table > thead > tr > th { background-color: var(--sb-surface) !important; color: var(--sb-text); border-color: var(--sb-border) !important; } /* Dropdowns — the user dropdown, notification dropdowns, message * dropdowns, and any bootstrap dropdown all inherit from the same * .dropdown-menu base. style.css forces #fff backgrounds and #000 * text on .dropdown-menu.extended li p, etc. */ body.theme-dark .dropdown-menu, body.theme-dark .dropdown-menu.extended, body.theme-dark .dropdown-menu.extended.short, body.theme-dark .dropdown-menu.extended.logout { background-color: var(--sb-surface) !important; color: var(--sb-text) !important; border: 1px solid var(--sb-border) !important; box-shadow: var(--sb-shadow) !important; } body.theme-dark .dropdown-menu > li > a, body.theme-dark .dropdown-menu.extended li a, body.theme-dark .dropdown-menu.extended li p, body.theme-dark .dropdown-menu.extended li p.green, body.theme-dark .dropdown-menu.extended li .step, body.theme-dark .dropdown-menu.extended li .subject, body.theme-dark .dropdown-menu.extended li .subject .from, body.theme-dark .dropdown-menu.extended li .subject .time, body.theme-dark .dropdown-menu.extended li .message, body.theme-dark .dropdown-menu.extended.logout > li > a { color: var(--sb-text) !important; background-color: transparent !important; } body.theme-dark .dropdown-menu > li > a:hover, body.theme-dark .dropdown-menu > li > a:focus, body.theme-dark .dropdown-menu.extended li a:hover, body.theme-dark .dropdown-menu.extended.logout > li > a:hover { background-color: #2a2f3e !important; color: #ffffff !important; } body.theme-dark .dropdown-menu .divider, body.theme-dark .dropdown-menu li.divider { background-color: var(--sb-border) !important; border-color: var(--sb-border) !important; } /* Notify-arrow tip on extended dropdowns — match surface so it * doesn't show as a white triangle pointing into a dark panel. */ body.theme-dark .notify-arrow, body.theme-dark .shortnote.notify-arrow { border-bottom-color: var(--sb-surface) !important; } /* Modal bodies + headers + footers. Bootstrap defaults to white. */ body.theme-dark .modal-content, body.theme-dark .modal-header, body.theme-dark .modal-body, body.theme-dark .modal-footer { background-color: var(--sb-surface) !important; color: var(--sb-text) !important; border-color: var(--sb-border) !important; } body.theme-dark .modal-header, body.theme-dark .modal-footer { border-color: var(--sb-border) !important; } body.theme-dark .modal-title { color: var(--sb-text) !important; } body.theme-dark .close { color: var(--sb-text); opacity: .85; } /* Form inputs already covered above; reinforce a few extras. */ body.theme-dark select, body.theme-dark textarea, body.theme-dark input[type="text"], body.theme-dark input[type="email"], body.theme-dark input[type="password"], body.theme-dark input[type="search"], body.theme-dark input[type="number"], body.theme-dark input[type="url"] { background-color: #14171f !important; color: var(--sb-text) !important; border-color: var(--sb-border) !important; } body.theme-dark .input-group-addon { background-color: #14171f !important; color: var(--sb-text-muted); border-color: var(--sb-border); } /* Buttons — keep brand colors but tame the default/secondary * variants that style.css paints white. */ body.theme-dark .btn-default, body.theme-dark .btn-white, body.theme-dark .like_white { background-color: #2a2f3e !important; color: var(--sb-text) !important; border-color: var(--sb-border) !important; } body.theme-dark .btn-default:hover, body.theme-dark .btn-white:hover, body.theme-dark .like_white:hover { background-color: #353a4d !important; color: #ffffff !important; } /* Tooltips / popovers — Bootstrap defaults to dark-on-white; flip. */ body.theme-dark .popover { background-color: var(--sb-surface) !important; border-color: var(--sb-border) !important; color: var(--sb-text); } body.theme-dark .popover-content, body.theme-dark .popover-title { color: var(--sb-text) !important; } /* Inline-styled white backgrounds (rare but they exist). */ body.theme-dark [style*="background:#fff"], body.theme-dark [style*="background: #fff"], body.theme-dark [style*="background-color:#fff"], body.theme-dark [style*="background-color: #fff"], body.theme-dark [style*="background:#ffffff"], body.theme-dark [style*="background-color:#ffffff"] { background-color: var(--sb-surface) !important; } body.theme-dark [style*="color:#000"], body.theme-dark [style*="color: #000"], body.theme-dark [style*="color:#333"], body.theme-dark [style*="color: #333"] { color: var(--sb-text) !important; }