/* MUTMKN light/dark theme Shared by all dashboard surfaces: - account/index.php (body.sb-auth-page / body.sb-account-page) - account/super.php (body.sb-super-page) - script/admin.php (body.sb-app-page) The four skins already share one token vocabulary; this file only swaps those tokens for the dark variant, plus the theme toggle button. Activated by: , set from the sb-theme cookie by a tiny inline head script (no FOUC). theme.js wires the toggle clicks. */ html[data-theme="dark"] body.sb-account-page, html[data-theme="dark"] body.sb-auth-page, html[data-theme="dark"] body.sb-super-page, html[data-theme="dark"] body.sb-app-page { --bg: #0B1220; --surface: #111A2E; --primary: #3B82F6; --primary-dark: #60A5FA; --primary-light: rgba(59, 130, 246, .16); --secondary: #22D3EE; --accent: #A78BFA; --text: #E6EDF7; --text-muted: #94A3B8; --border: #243049; --border-strong: #33415F; --bg-muted: #16203A; --bg-hover: #1C2A4D; --bubble: #1A2745; --topbar-bg: rgba(17, 26, 46, .85); --radius: 12px; --radius-sm: 8px; --shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .5), 0 2px 4px -2px rgba(0, 0, 0, .4); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .5), 0 4px 6px -4px rgba(0, 0, 0, .4); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .55), 0 8px 10px -6px rgba(0, 0, 0, .45); color-scheme: dark; } /* Smooth theme crossfade on surfaces (deliberate, short) */ html[data-theme] body.sb-account-page, html[data-theme] body.sb-auth-page, html[data-theme] body.sb-super-page, html[data-theme] body.sb-app-page { transition: background-color .25s ease, color .25s ease; } html[data-theme] body.sb-account-page .sb-top-bar, html[data-theme] body.sb-auth-page .sb-admin-box, html[data-theme] body.sb-super-page .sb-super-box .sb-admin .sb-top-bar, html[data-theme] body.sb-super-page .sb-super-login-box, html[data-theme] body.sb-app-page .sb-admin, html[data-theme] body.sb-app-page .sb-admin>main, html[data-theme] body.sb-app-page .sb-board>div, html[data-theme] body.sb-app-page .sb-conversation, html[data-theme] body.sb-app-page .sb-user-details { transition: background-color .25s ease, border-color .25s ease; } /* ------------------------------------------------------------------ * THEME TOGGLE BUTTON (shared across the three surfaces) * ------------------------------------------------------------------ */ .sb-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-muted); cursor: pointer; flex: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; } .sb-theme-toggle:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-light); transform: translateY(-1px); } .sb-theme-toggle svg { width: 17px; height: 17px; display: block; } .sb-theme-toggle .sb-icon-moon { display: none; } html[data-theme="dark"] .sb-theme-toggle .sb-icon-sun { display: none; } html[data-theme="dark"] .sb-theme-toggle .sb-icon-moon { display: block; } /* Account dashboard top bar button */ body.sb-account-page .sb-account-box .sb-top-bar .sb-theme-toggle { margin-right: 8px; vertical-align: middle; } html[data-theme="dark"] body.sb-account-page .sb-account-box .sb-top-bar .sb-theme-toggle { background: var(--bg-muted); } /* Super admin panel top bar button */ body.sb-super-page .sb-super-box .sb-admin .sb-top-bar .sb-theme-toggle { margin-right: 8px; height: 38px; line-height: 1; } html[data-theme="dark"] body.sb-super-page .sb-super-box .sb-admin .sb-top-bar .sb-theme-toggle { background: var(--bg-muted); } /* Admin app header button */ body.sb-app-page .sb-admin>.sb-header>.sb-admin-nav-right .sb-theme-toggle { width: 30px; height: 30px; margin: 14px 14px 0; border: none; background: transparent; border-radius: 8px; } body.sb-app-page .sb-admin>.sb-header>.sb-admin-nav-right .sb-theme-toggle svg { width: 15px; height: 15px; } body.sb-app-page .sb-admin>.sb-header>.sb-admin-nav-right .sb-theme-toggle:hover { background: var(--primary-light); color: var(--primary); transform: none; } /* Mobile menu toggle (sb-mobile block) */ @media (max-width: 720px) { body.sb-app-page .sb-admin>.sb-header>.sb-admin-nav-right .sb-mobile .sb-theme-toggle { width: 26px; height: 26px; margin: 6px 0 0 0; border: none; background: transparent; border-radius: 6px; } body.sb-app-page .sb-admin>.sb-header>.sb-admin-nav-right .sb-mobile .sb-theme-toggle svg { width: 15px; height: 15px; } body.sb-app-page .sb-admin>.sb-header>.sb-admin-nav-right .sb-mobile .sb-theme-toggle:hover { background: var(--primary-light); color: var(--primary); transform: none; } } /* ------------------------------------------------------------------ * DARK-ONLY OVERRIDES FOR BASE ADMIN.CSS HARDCODED COLORS * (surfaces admin-skin.css does not tokenize) * ------------------------------------------------------------------ */ html[data-theme="dark"] body.sb-app-page .sb-editor { background: var(--surface); border-top: 1px solid var(--border); } html[data-theme="dark"] body.sb-app-page .sb-editor textarea, html[data-theme="dark"] body.sb-app-page .sb-editor .sb-bar, html[data-theme="dark"] body.sb-app-page .sb-editor .sb-submit { color: var(--text-muted) !important; } html[data-theme="dark"] body.sb-app-page .sb-editor textarea { color: var(--text) !important; } /* Menus / dropdowns the skin does not cover */ html[data-theme="dark"] body.sb-app-page div ul.sb-menu, html[data-theme="dark"] body.sb-app-page .sb-select ul, html[data-theme="dark"] body.sb-app-page .sb-popup, html[data-theme="dark"] body.sb-app-page .sb-menu-mobile>ul, html[data-theme="dark"] body.sb-app-page .sb-menu-mobile .sb-mobile, html[data-theme="dark"] body.sb-app-page .sb-area-users .sb-filter-btn>div, html[data-theme="dark"] body.sb-app-page .sb-menu li ul { background: var(--surface); box-shadow: 0 4px 14px 0 rgba(0, 0, 0, .5), 0 0 0 1px var(--border); border-color: var(--border); } html[data-theme="dark"] body.sb-app-page div ul.sb-menu li, html[data-theme="dark"] body.sb-app-page div ul.sb-menu li a, html[data-theme="dark"] body.sb-app-page .sb-select ul li, html[data-theme="dark"] body.sb-app-page .sb-menu-mobile>ul li, html[data-theme="dark"] body.sb-app-page .sb-menu li ul li, html[data-theme="dark"] body.sb-app-page .sb-menu li ul li a { color: var(--text-muted); } html[data-theme="dark"] body.sb-app-page div ul.sb-menu li:hover, html[data-theme="dark"] body.sb-app-page div ul.sb-menu li:hover a, html[data-theme="dark"] body.sb-app-page .sb-select ul li:hover, html[data-theme="dark"] body.sb-app-page .sb-menu li ul li:hover, html[data-theme="dark"] body.sb-app-page .sb-menu li ul li:hover a { color: var(--primary); background: var(--primary-light); } /* Rich messages + base conversation text */ html[data-theme="dark"] body.sb-app-page .sb-rich-message .sb-text, html[data-theme="dark"] body.sb-app-page .sb-list>div .sb-message, html[data-theme="dark"] body.sb-app-page .sb-list>div .sb-message a, html[data-theme="dark"] body.sb-app-page .sb-list .sb-time, html[data-theme="dark"] body.sb-app-page .sb-user-conversations li span { color: var(--text-muted); } html[data-theme="dark"] body.sb-app-page .sb-list>div.sb-right .sb-message { color: #fff; } html[data-theme="dark"] body.sb-app-page .sb-conversation .sb-label-date span { background: var(--bg-muted); border-color: var(--border); color: var(--text-muted); } /* Editor / compose tooltips inside conversation */ html[data-theme="dark"] body.sb-app-page .sb-editor .sb-bar .sb-btn-icon { color: var(--text-muted); } html[data-theme="dark"] body.sb-app-page .sb-editor .sb-bar .sb-btn-icon:hover { color: var(--primary); background: var(--primary-light); } /* User details right panel inner text */ html[data-theme="dark"] body.sb-app-page .sb-user-details .sb-top, html[data-theme="dark"] body.sb-app-page .sb-profile-list>ul>li, html[data-theme="dark"] body.sb-app-page .sb-profile-list>ul>li label { color: var(--text-muted); } html[data-theme="dark"] body.sb-app-page .sb-profile-list .sb-icon { color: var(--text-muted); } /* Generic admin text fallbacks (base admin.css sets dark greys) */ html[data-theme="dark"] body.sb-app-page, html[data-theme="dark"] body.sb-app-page .sb-admin, html[data-theme="dark"] body.sb-app-page .sb-main, html[data-theme="dark"] body.sb-app-page .sb-admin h1, html[data-theme="dark"] body.sb-app-page .sb-admin h2, html[data-theme="dark"] body.sb-app-page .sb-admin h3, html[data-theme="dark"] body.sb-app-page .sb-admin h4, html[data-theme="dark"] body.sb-app-page .sb-admin p, html[data-theme="dark"] body.sb-app-page .sb-admin a, html[data-theme="dark"] body.sb-app-page .sb-admin span, html[data-theme="dark"] body.sb-app-page .sb-admin li, html[data-theme="dark"] body.sb-app-page .sb-setting h2, html[data-theme="dark"] body.sb-app-page .sb-setting p, html[data-theme="dark"] body.sb-app-page .sb-title { color: var(--text); } html[data-theme="dark"] body.sb-app-page .sb-admin a:hover { color: var(--primary-dark); } html[data-theme="dark"] body.sb-app-page .sb-text-muted, html[data-theme="dark"] body.sb-app-page .sb-admin .sb-text-muted { color: var(--text-muted); } html[data-theme="dark"] body.sb-app-page .sb-no-conversation-message { background: var(--surface) !important; color: var(--text-muted) !important; } html[data-theme="dark"] body.sb-app-page .sb-no-conversation-message b, html[data-theme="dark"] body.sb-app-page .sb-no-conversation-message span { color: var(--text); } /* Settings / general admin form controls */ html[data-theme="dark"] body.sb-app-page .sb-search-btn > input { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; } html[data-theme="dark"] body.sb-app-page .sb-setting > div input:not([type="checkbox"]):not([type="radio"]), html[data-theme="dark"] body.sb-app-page .sb-setting > div select, html[data-theme="dark"] body.sb-app-page .sb-setting > div textarea { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; } html[data-theme="dark"] body.sb-app-page .sb-setting > div input:not([type="checkbox"]):not([type="radio"])::placeholder, html[data-theme="dark"] body.sb-app-page .sb-setting > div textarea::placeholder { color: var(--text-muted) !important; } html[data-theme="dark"] body.sb-account-page .sb-input > input, html[data-theme="dark"] body.sb-account-page .sb-input > select, html[data-theme="dark"] body.sb-account-page .sb-input > textarea, html[data-theme="dark"] body.sb-account-page .sb-input > input:focus, html[data-theme="dark"] body.sb-account-page .sb-input > select:focus, html[data-theme="dark"] body.sb-account-page .sb-input > textarea:focus, html[data-theme="dark"] body.sb-app-page .sb-input > input, html[data-theme="dark"] body.sb-app-page .sb-input > select, html[data-theme="dark"] body.sb-app-page .sb-input > textarea, html[data-theme="dark"] body.sb-app-page .sb-input > input:focus, html[data-theme="dark"] body.sb-app-page .sb-input > select:focus, html[data-theme="dark"] body.sb-app-page .sb-input > textarea:focus { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; } html[data-theme="dark"] body.sb-app-page input::placeholder, html[data-theme="dark"] body.sb-app-page textarea::placeholder, html[data-theme="dark"] body.sb-app-page select::placeholder { color: var(--text-muted); } html[data-theme="dark"] body.sb-app-page input:focus, html[data-theme="dark"] body.sb-app-page textarea:focus, html[data-theme="dark"] body.sb-app-page select:focus { border-color: var(--primary); } /* Scrollbar tracks (base uses #f1f1f1) */ html[data-theme="dark"] body.sb-app-page .sb-scroll-area::-webkit-scrollbar-track, html[data-theme="dark"] body.sb-app-page .sb-conversation .sb-list::-webkit-scrollbar-track, html[data-theme="dark"] body.sb-app-page .sb-horizontal-scroll::-webkit-scrollbar-track { background: transparent; } html[data-theme="dark"] body.sb-app-page .sb-scroll-area::-webkit-scrollbar-thumb, html[data-theme="dark"] body.sb-app-page .sb-conversation .sb-list::-webkit-scrollbar-thumb { background: var(--border-strong); } /* Lightboxes & dialogs already tokenized, but ensure overlay area */ html[data-theme="dark"] body.sb-app-page .sb-lightbox-overlay { background: rgba(2, 6, 16, .6) !important; } /* ------------------------------------------------------------------ * DARK-ONLY TOUCHES FOR ACCOUNT / SUPER SURFACES * ------------------------------------------------------------------ */ html[data-theme="dark"] body.sb-account-page .sb-tab .sb-content .box-black, html[data-theme="dark"] body.sb-account-page .sb-tab .sb-content .plans-box>div { background: var(--surface); } html[data-theme="dark"] body.sb-account-page .sb-tab .sb-content .plans-box-menu>ul li.sb-active { background: var(--bg-muted); } html[data-theme="dark"] body.sb-account-page .sb-account-box .sb-top-bar .sb-btn-dashboard { background: var(--primary); } html[data-theme="dark"] body.sb-account-page .sb-account-box .sb-top-bar .sb-btn-dashboard:hover { background: var(--primary-dark); } /* Super admin panel top bar in dark */ html[data-theme="dark"] body.sb-super-page .sb-super-box .sb-admin .sb-top-bar .sb-btn { background: var(--primary); } html[data-theme="dark"] body.sb-super-page .sb-super-box .sb-admin .sb-top-bar .sb-btn:hover { background: var(--primary-dark); } /* Login / auth cards in dark */ html[data-theme="dark"] body.sb-super-page.sb-super-login { background: radial-gradient(circle at 20% 0%, rgba(59, 130, 246, .12) 0%, transparent 50%), radial-gradient(circle at 80% 100%, rgba(34, 211, 238, .1) 0%, transparent 50%), var(--bg); } html[data-theme="dark"] body.sb-auth-page { background: radial-gradient(circle at 20% 0%, rgba(59, 130, 246, .12) 0%, transparent 50%), radial-gradient(circle at 80% 100%, rgba(34, 211, 238, .1) 0%, transparent 50%), var(--bg); } html[data-theme="dark"] body.sb-super-page .sb-super-login-box .sb-info, html[data-theme="dark"] body.sb-auth-page .sb-admin-box .sb-info { background: rgba(127, 29, 29, .35); border-color: #7F1D1D; color: #FCA5A5; } html[data-theme="dark"] body.sb-super-page .sb-super-login-box .sb-errors-area, html[data-theme="dark"] body.sb-auth-page .sb-admin-box .sb-errors-area { color: #FCA5A5; }