/* ========================================================================== TinkySpeak Board Builder — DARK THEME (2026-06-13, Luke) -------------------------------------------------------------------------- Additive override file. Loaded AFTER css/builder.css. Does NOT touch the monolithic builder.css — the dark theme is expressed purely as a scoped variable flip under html[data-theme="dark"] plus a small number of surgical re-pins. Activation: js/builder/theme-toggle.js sets . A FOUC guard inline in applies the saved/OS preference before first paint, so there is no light-flash for dark-mode users. DESIGN INTENT - We theme the BUILDER CHROME (topbar already dark; sidebars, props panel, AI rail, toolbars, modals, inputs) — virtually all of which is driven by CSS custom properties, so a variable flip carries it. - We deliberately KEEP THE DEVICE PREVIEW LIGHT. The tablet bezel, screen, board header and tiles are a true-to-output simulation of the deployed AAC board (which has its own Fitzgerald-key palette); darkening the simulated device would misrepresent what the end user actually sees. This mirrors how an IDE keeps a rendered preview faithful while the editor chrome follows the app theme. GOTCHA HANDLED: --ink is overloaded in builder.css. It is body text AND a dark-accent background in six spots. Flipping --ink to near-white for dark mode would turn those surfaces white. They are re-pinned to a literal dark value below so they stay dark in both themes. LABEL: PILOT-READY (visual feature; no data/security surface). ========================================================================== */ html[data-theme="dark"]{ /* Page + panel backgrounds (were warm cream) */ --bg:#14141f; --bg-warm:#1b1b27; --bg-cool:#191922; /* Text (were near-black) */ --ink:#ECEAF4; --ink-soft:#B6B3C6; --ink-muted:#85829A; /* Surfaces (were white/off-white) */ --surface:#1e1e2b; --surface-hover:#26263a; --surface-active:#2d2d44; /* Borders (were warm light grey) */ --border:#34344c; --border-light:#2a2a3e; /* Brand soft tint used for hover/focus rings on light bg */ --brand-bg-soft:#241a40; /* Elevated surface. Several files use var(--bg-elev,#fff) but --bg-elev is never defined, so they fall back to white. Defining it here (dark only) flips providers-rail / camera-vision / smart-hub / expansion-packs / business-profile etc. Light mode leaves it undefined → #fff fallback unchanged. */ --bg-elev:#24243a; /* Topbar: keep it dark but a touch deeper than the panels so the chrome reads as layered rather than flat. */ --nav-bg:#101019; /* Shadows need real opacity to register on a dark canvas */ --shadow-sm:0 1px 3px rgba(0,0,0,0.45); --shadow-md:0 4px 12px rgba(0,0,0,0.50); --shadow-lg:0 8px 30px rgba(0,0,0,0.55); --shadow-xl:0 16px 50px rgba(0,0,0,0.60); color-scheme: dark; /* native form controls / scrollbars go dark */ } /* ── Re-pin: surfaces that used var(--ink) as a DARK ACCENT background. With --ink now light, pin them to a literal dark so they stay dark. */ html[data-theme="dark"] .tablet-frame, html[data-theme="dark"] .image-picker-header, html[data-theme="dark"] .scan-btn, html[data-theme="dark"] .toast, html[data-theme="dark"] .sidebar-deploy-copy, html[data-theme="dark"] .props-search-btn{ background:#0f0f18; } html[data-theme="dark"] .props-search-btn{ border-color:#0f0f18; } /* ── Sidebar active item used a pale Fitzgerald tint (--fk-noun-bg) that reads as a bright smear on dark. Recolor the chrome usage only; the tile palette (preview) keeps its real tints. */ html[data-theme="dark"] .sidebar-item.active{ background:rgba(232,168,56,0.16); color:var(--amber-light); } html[data-theme="dark"] .sidebar-new-btn:hover{ background:rgba(232,168,56,0.12); } /* ── Community left-rail (NEW layout: Discover / Implement / Earn). Its item styles are JS-injected (community-nav-rail.js) using rgba(0,0,0,…) divider lines that vanish on a dark canvas. Lighten them. The items themselves are transparent + color:inherit, so text already rides the variable flip. */ html[data-theme="dark"] .community-nav-item{ border-bottom-color:rgba(255,255,255,0.10); } html[data-theme="dark"] .community-nav-item.community-nav-back{ border-top-color:rgba(255,255,255,0.10); } html[data-theme="dark"] .community-nav-item.community-nav-builder-return{ border-bottom-color:rgba(255,255,255,0.08); } html[data-theme="dark"] .community-nav-section-label{ color:var(--ink-muted); } /* ── Rail tabs: the INACTIVE base color is rgba(0,0,0,0.7) (black), which is nearly invisible on the dark rail — the "Assistant" tab next to Community was unreadable. Lighten inactive label + hover for dark. (Active tab and the blue .community tab are already handled / readable.) */ html[data-theme="dark"] .ai-rail-tab{ color:rgba(255,255,255,0.72); } html[data-theme="dark"] .ai-rail-tab:hover{ background:rgba(255,255,255,0.07); } /* ── "Build a board about" prompt dock (#quickBuildBox) is now theme-aware AT THE SOURCE — the shell (builder.html) and the input/label/hint (quick-build-template.js) use var(--surface)/var(--border)/var(--ink…) instead of hardcoded light values, so the input text can never go low-contrast in dark. No !important override needed here. (The colored CTA buttons — Build/Import/Game/Converse/Deploy — are intentionally left as-is; they read fine on dark.) */ /* ── Editor canvas dot-grid was dark dots on light. Flip to faint light dots so the texture survives on the dark canvas. */ html[data-theme="dark"] .editor{ background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,0.045) 1px, transparent 0); } /* ── Students panel (role-gated SLP/teacher modal) hardcodes light creams. Carry the main surfaces into dark so it isn't a blinding white sheet. Leaf accents (privacy/notes pills) inherit text color and stay legible. */ html[data-theme="dark"] .students-card, html[data-theme="dark"] .students-qr-card{ background:#1e1e2b; color:var(--ink); } html[data-theme="dark"] .students-header{ background:#181824; border-bottom-color:#2a2a3e; } html[data-theme="dark"] .students-active-bar{ background:#15151f; } html[data-theme="dark"] .students-roster{ border-right-color:#2a2a3e; } html[data-theme="dark"] .students-roster-head{ color:var(--ink-muted); } html[data-theme="dark"] .students-title, html[data-theme="dark"] .students-detail-name, html[data-theme="dark"] .students-list-name{ color:var(--ink); } html[data-theme="dark"] .students-detail-sub, html[data-theme="dark"] .students-list-meta, html[data-theme="dark"] .students-empty, html[data-theme="dark"] .students-active-label{ color:var(--ink-muted); } html[data-theme="dark"] .students-list-row:hover, html[data-theme="dark"] .students-action-btn:hover{ background:#2d2d44; } html[data-theme="dark"] .students-active-select, html[data-theme="dark"] .students-action-btn{ background:#15151f; color:var(--ink); border-color:#34344c; } html[data-theme="dark"] .students-detail-privacy, html[data-theme="dark"] .students-detail-notes{ background:#15151f; border-color:#2a2a3e; color:var(--ink-soft); } /* ── Tile-Color swatches (.fk-color-btn — Verb/Noun/Adjective/… in the Edit Tile panel). They have NO explicit text color, so they inherit var(--ink), which goes light in dark mode — but each swatch's background is a FIXED light Fitzgerald color in both themes, so light text becomes light-on-light and unreadable. Pin the label dark (matches the light-mode look exactly; the swatch palette is theme-independent). Same for the topbar Fill picker swatches if they share the class. */ html[data-theme="dark"] .fk-color-btn, html[data-theme="dark"] .fk-color-btn *{ color:#1A1A2E; } /* ── Theme-toggle button (mounted into .topbar-actions by theme-toggle.js). Shares the topbar-btn recipe; we only size the glyph and add a small rotate-on-press affordance. Visible in BOTH themes (topbar is dark in light mode too, so the outline pill reads fine either way). */ .theme-toggle-btn{ font-size:1rem; line-height:1; } .theme-toggle-btn .theme-toggle-glyph{ display:inline-block; transition:transform .35s cubic-bezier(.4,0,.2,1); } .theme-toggle-btn:active .theme-toggle-glyph{ transform:rotate(40deg) scale(.9); } @media (prefers-reduced-motion: reduce){ .theme-toggle-btn .theme-toggle-glyph{ transition:none; } }