{ "$schema": "https://mian.ro/schema/v2/registry.json", "schemaVersion": "2.0.0", "generatedAt": "2026-10-02T13:14:06.957Z", "id": "theme-controller", "name": "Theme controller", "category": "Layout & utilities", "description": "Switch noodle and light/dark mode for a page, or scope a noodle to any element.", "tags": [ "theme", "dark mode", "light mode", "noodle switcher", "color scheme" ], "requiresJs": true, "license": "LicenseRef-MIAN-1.0", "composition": { "role": null, "intents": [ "theme switcher", "dark mode toggle", "change noodle", "appearance setting" ], "prominence": null, "density": null, "worksAfter": [], "worksBefore": [], "alternatives": [], "avoid": null }, "url": "https://mian.ro/components/theme-controller", "markdownUrl": "https://mian.ro/ai/components/theme-controller.md", "classes": [ { "name": "data-noodle=\"…\" · data-mode=\"light | dark\"", "description": "On for the page, or on any element to scope it." }, { "name": "select[data-mn-noodle-select]", "description": "A select that switches the page noodle." }, { "name": "data-mn-target=\"#id\"", "description": "On any control: act on that element only, without persisting." }, { "name": "[data-mn-set-noodle] · [data-mn-set-mode] · [data-mn-toggle-mode]", "description": "Buttons." }, { "name": "Mian.setNoodle(id) · Mian.setMode(mode)", "description": "Script API; persisted in localStorage." }, { "name": "mn-swatch", "description": "A 4-colour preview of the current noodle." } ], "accessibility": [ "Buttons report aria-pressed. Without data-mode the page follows the operating system." ], "examples": [ { "title": "Scoped controls", "description": "data-mn-target points the controls at one element, so only it changes. Leave data-mn-target out to switch the whole page (and remember the choice).", "html": "
\n \n
\n \n \n \n
\n
\n
\n
New
\n
" }, { "title": "Scoped noodles", "description": "Any element can carry its own noodle and mode.", "html": "
\n
\n udon\n
\n
\n fensi\n
\n
\n yinzhen\n
\n
\n mee\n
\n
" } ], "css": ".mn-swatch {\n display: inline-grid; grid-template-columns: repeat(2, .55rem); gap: 2px; padding: 3px;\n border-radius: 5px; background: var(--mn-bg); box-shadow: 0 0 0 1px var(--mn-border);\n}\n.mn-swatch > i { width: .55rem; height: .55rem; border-radius: 2px; }\n.mn-swatch > i:nth-child(1) { background: var(--mn-primary); }\n.mn-swatch > i:nth-child(2) { background: var(--mn-accent); }\n.mn-swatch > i:nth-child(3) { background: var(--mn-fg); }\n.mn-swatch > i:nth-child(4) { background: var(--mn-surface-2); }", "js": "/* Mian.setNoodle('udon'), Mian.setMode('dark' | 'light' | 'auto'). Persisted.\n Any control can instead act on one element: add data-mn-target=\"#id\" and\n the noodle or mode is set on that element only (not persisted). */\nconst KEY_N = 'mian:noodle', KEY_M = 'mian:mode';\nconst store = (k, v) => { try { v == null ? localStorage.removeItem(k) : localStorage.setItem(k, v); } catch (_) {} };\nconst targetOf = (el) => { const sel = el.getAttribute('data-mn-target'); return sel ? document.querySelector(sel) : null; };\nconst modeOf = (el) => el.getAttribute('data-mode') || (el === document.documentElement ? null : el.closest('[data-mode]')?.getAttribute('data-mode')) || (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');\nMian.setNoodle = (n, target) => {\n const el = target || document.documentElement;\n if (!target) store(KEY_N, n);\n // The change cross-fades (see Mian.transition) instead of snapping.\n const run = () => { el.setAttribute('data-noodle', n); syncTheme(); emit(el, 'theme', { noodle: n, scoped: Boolean(target) }); };\n Mian.transition ? Mian.transition(run) : run();\n};\nMian.setMode = (m, target) => {\n const el = target || document.documentElement;\n if (!target) store(KEY_M, m === 'auto' ? null : m);\n const run = () => { if (m === 'auto') el.removeAttribute('data-mode'); else el.setAttribute('data-mode', m); syncTheme(); emit(el, 'theme', { mode: m, scoped: Boolean(target) }); };\n Mian.transition ? Mian.transition(run) : run();\n};\nMian.resolvedMode = (target) => modeOf(target || document.documentElement);\nfunction syncTheme() {\n const root = document.documentElement;\n const noodleOf = (c) => (targetOf(c) || root).getAttribute('data-noodle') || 'mian';\n const setModeOf = (c) => (targetOf(c) || root).getAttribute('data-mode') || 'auto';\n document.querySelectorAll('[data-mn-noodle-select]').forEach((s) => { s.value = noodleOf(s); });\n document.querySelectorAll('[data-mn-set-noodle]').forEach((b) => b.setAttribute('aria-pressed', String(b.dataset.mnSetNoodle === noodleOf(b))));\n document.querySelectorAll('[data-mn-set-mode]').forEach((b) => b.setAttribute('aria-pressed', String(b.dataset.mnSetMode === setModeOf(b))));\n document.querySelectorAll('[data-mn-toggle-mode]').forEach((b) => b.setAttribute('aria-pressed', String(Mian.resolvedMode(targetOf(b)) === 'dark')));\n}\ndocument.addEventListener('click', (e) => {\n const n = e.target.closest('[data-mn-set-noodle]'); if (n) Mian.setNoodle(n.dataset.mnSetNoodle, targetOf(n));\n const m = e.target.closest('[data-mn-set-mode]'); if (m) Mian.setMode(m.dataset.mnSetMode, targetOf(m));\n const t = e.target.closest('[data-mn-toggle-mode]'); if (t) Mian.setMode(Mian.resolvedMode(targetOf(t)) === 'dark' ? 'light' : 'dark', targetOf(t));\n});\ndocument.addEventListener('change', (e) => { if (e.target.matches('[data-mn-noodle-select]')) Mian.setNoodle(e.target.value, targetOf(e.target)); });\nregister('theme', () => syncTheme());", "install": { "css": "https://mian.ro/dist/mian.css", "js": "https://mian.ro/dist/mian.js", "registryItem": "https://mian.ro/r/theme-controller.json" } }