{ "name": "WorkspaceThemeToggle", "package": "@magicblocksai/ui", "file": "packages/ui/src/components/WorkspaceThemeToggle.tsx", "chapterTag": "15 App Shell", "chapter": "15-app-shell.html", "sectionId": "workspace-theme-toggle", "elName": "WorkspaceThemeToggle", "demoUrl": "https://brand.magicblocks.ai/components/15-app-shell#workspace-theme-toggle", "hasLiveDemo": false, "description": "The in-rail light/dark control for a `` bottom cluster — what\nlets a sidebar-first app drop the top bar entirely. Toggles `data-theme=\"dark\"`\non `` and persists the choice to `localStorage`. Renders as a standard\n`.ws-nav-icon` rail item so it sits flush with the nav.", "useClient": true, "interactivity": "interactive", "namedExports": [ { "name": "WorkspaceThemeToggle", "isPrincipal": true, "isType": false }, { "name": "WorkspaceThemeToggleProps", "isPrincipal": false, "isType": true } ], "importStatement": "import { WorkspaceThemeToggle } from \"@magicblocksai/ui\";", "props": [ { "name": "label", "optional": true, "type": "string", "doc": "Label (tooltip in collapsed mode + visible label expanded). Default \"Theme\"." }, { "name": "storageKey", "optional": true, "type": "string", "doc": "Storage key for the persisted preference. Default \"mb_theme\"." } ], "classesUsed": [ "switch", "ws-nav-icon", "ws-nav-icon-label" ], "examples": { "react": "", "html": "", "css": ".switch {\n display: inline-flex; align-items: center; gap: var(--s-3);\n cursor: pointer;\n font: 500 14.5px/1.3 var(--f-body);\n color: var(--fg);\n user-select: none;\n position: relative;\n}\n\n.ws-nav-icon {\n position: relative;\n width: 36px; height: 36px; border-radius: 8px;\n display: inline-flex; align-items: center; justify-content: center;\n gap: var(--s-3);\n background: transparent; border: 0; cursor: pointer;\n color: var(--fg-soft); text-align: left; text-decoration: none;\n flex-shrink: 0;\n transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), width var(--dur-3) var(--ease);\n}\n\n.ws-nav-icon-label { display: none; font: 500 13px/1 var(--f-body); white-space: nowrap; flex: 1; }" } }