Skip to content

Theme controller

Switch noodle and light/dark mode for a page, or scope a noodle to any element.

CSS + mian.js JSON Markdown Registry item

Scoped controls

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).

New

Scoped noodles

Any element can carry its own noodle and mode.

udon
fensi
yinzhen
mee

Installation

Everything ships in one stylesheet and one small script. There is nothing to import per component.

<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>

Prefer to own the files? /r/theme-controller.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.

Class reference

Class / attributeDescription
data-noodle="…" · data-mode="light | dark"On <html> for the page, or on any element to scope it.
select[data-mn-noodle-select]A select that switches the page noodle.
data-mn-target="#id"On any control: act on that element only, without persisting.
[data-mn-set-noodle] · [data-mn-set-mode] · [data-mn-toggle-mode]Buttons.
Mian.setNoodle(id) · Mian.setMode(mode)Script API; persisted in localStorage.
mn-swatchA 4-colour preview of the current noodle.

Accessibility

  • Buttons report aria-pressed. Without data-mode the page follows the operating system.
Pages
Introduction Installation Theming & noodles Frameworks Accessibility Designing websites AI agents, API & MCP All components All noodles All templates
Templates
Ledger Pipeline Quanta Beacon Relay Forma Tessera Noir Villa Orsola Nido Casa Hana Kiln Nove Circle Field Notes Lumen Pace Aldini Studio Ito Orto Dot One Mist Signal 26
Actions
Button Button group Toggle group Dropdown menu Copy button Swap Hold to confirm
Forms
Field Input Textarea Select Checkbox Radio Switch Slider File input Input group Number input OTP input Rating Combobox Calendar Tag input Password field Swatch picker Time slots Seat map Option cards Date range Task list Duration picker
Data display
Typography Avatar Badge Chip Card Table List Kbd Code Stat Chart Timeline Accordion Description list Divider Skeleton Empty state Indicator Chat Tree view Kanban board Usage meter Notification list Invoice Funnel Leaderboard Product gallery Review summary Social post Profile header Comment thread Filter bar Bulk actions Curriculum Listing card KPI card Heatmap Gauge Breakdown Uptime Voice note
Feedback
Alert Toast Progress Radial progress Spinner Banner Onboarding checklist Loader Cookie consent
Overlays
Modal Drawer Popover Tooltip Command palette Hover card Context menu
Navigation
Navbar Tabs Breadcrumbs Pagination Steps Sidebar Dock Stories bar Page header
Layout & utilities
Collapse Carousel Theme controller Scroll area Mockup Dashboard grid Gradient backdrop Motion
Sections
Slides Jobs list Work grid Comparison table Changelog Integrations Contact section Page layout Site header Hero Logo cloud Feature grid Bento grid Media Testimonial Pricing Call to action Site footer Article App shell Docs layout Sign-in page Price list Team Product card Story card Agenda FAQ section Figures Process
Noodles
Mian Yangchun Linguine Penne Chitarra Shio Spaghetti Bucatini Hofun Hiyamugi Ramyeon Fettuccine Lasagne Pappardelle Paccheri Farfalle Yinzhen Quadretti Acini di pepe Kalguksu Sanuki Hakata Ditalini Juksing Kishimen LaMian Somen Capellini Longxu Misua Bún Kuzukiri Sotanghon Harusame Fensi Tokoroten Nagashi Liangfen Dangmyeon Woonsen Shirataki Cha Soba Daoxiao Pici Naengmyeon Hōtō Ramen Biangbiang Maccheroni Rigatoni Fusilli Jjajang Laksa Soba Tagliatelle Tajarin Mafaldine Corzetti Inaniwa Yifu Udon Gnocchi Cavatelli Orecchiette Mee Mixian Pho
↑↓navigate↵openescclose
Choose a noodle

Minimal

Flat

Pixel

Linear

Thin

Glass

Textured

Bold

Elegant

Rounded
On this page