[{"data":1,"prerenderedAt":719},["ShallowReactive",2],{"landing-copy":3,"\u002Fdocs\u002Fv1\u002Fcustomization\u002Fdark-mode":65,"nav:v1":575},{"id":4,"extension":5,"meta":6,"sections":7,"stem":62,"tagline":63,"__hash__":64},"landing\u002Flanding.yml","yml",{},[8,18,22,29,33,40,47,51,57],{"id":9,"headline":10,"body":11,"cta":12,"secondary":15},"hero","The bare minimum for elegant interfaces.","Three classes, no framework, {css.kB}. A CSS and JavaScript library with no reset, no font, no runtime dependencies and no rule outside a `pui-` class; the browser does the work.",{"label":13,"to":14},"Get started","\u002Fdocs",{"label":16,"to":17},"Migrating from 0.x","\u002Fdocs\u002Fgetting-started\u002Fmigrating-from-0-x",{"id":19,"headline":20,"body":21},"size","{css.kB}. Measured, not promised.","`perfectui.css` is {css.bytes} bytes gzip; the optional JavaScript loader is {js.bytes}. The bars below are the same measurement run on the published builds of the alternatives.",{"id":23,"headline":24,"body":25,"cta":26},"classes","A shape, a style, a colour.","Every element is up to three classes you can combine freely: what it is, how the colour is applied, which colour. Seven colours and four styles give 28 looks per shape, and adding a colour never multiplies your classes.",{"label":27,"to":28},"See the components","\u002Fdocs\u002Fcomponents\u002Fbutton",{"id":30,"headline":31,"body":32},"overlays","Overlays without a plugin.","Modals are `\u003Cdialog>`, menus are `popover`, tooltips are `interestfor`, accordions are `\u003Cdetails>`. The optional loader downloads a fallback only when a browser is missing one of them.",{"id":34,"headline":35,"body":36,"cta":37},"mode-theme","One attribute for dark mode. One variable for your colour.","With no attribute, perfectui follows the operating system. Set `data-pui-mode` to choose, and `--pui-theme` to make every component yours.",{"label":38,"to":39},"Dark mode docs","\u002Fdocs\u002Fcustomization\u002Fdark-mode",{"id":41,"headline":42,"body":43,"cta":44},"tailwind","Your utilities always win.","One `@layer` line keeps Tailwind's reset below perfectui and every utility above it.",{"label":45,"to":46},"Tailwind guide","\u002Fdocs\u002Fgetting-started\u002Ftailwind-css",{"id":48,"headline":49,"body":50},"nothing-to-undo","Nothing you have to undo.","No reset to override, no font to remove, no `!important` to beat, no initialiser to call after rendering, no guard for server rendering. ESM only, nothing on `window`.",{"id":52,"headline":53,"body":54,"cta":55},"migration","Coming from 0.x?","1.0 is a rewrite: every class is prefixed, styles and colours are separate classes, and the browser replaced the JavaScript. The guide lists every change.",{"label":56,"to":17},"Read the migration guide",{"id":58,"headline":59,"body":60,"cta":61},"install","Install it your way.","A package for npm, yarn, pnpm or bun, or two tags from a CDN. Import everything or only the components you use.",{"label":13,"to":14},"landing","Components the browser already knows how to run.","QsxvMnCQ8bgawTVgX6YLkvZoqMKaQbFt0j1urNnrKQw",{"id":66,"title":67,"body":68,"changed":565,"description":566,"extension":567,"from":565,"meta":568,"navigation":245,"path":569,"seo":570,"since":565,"stem":571,"tags":572,"to":565,"__hash__":574},"docs_v1\u002Fdocs\u002Fv1\u002F02.customization\u002F01.dark-mode.md","Dark Mode",{"type":69,"value":70,"toc":560},"minimark",[71,80,85,92,148,195,199,309,323,327,330,372,401,413,542,556],[72,73,74,75,79],"p",{},"Colors are declared with ",[76,77,78],"code",{},"light-dark()",", and the browser resolves them.",[81,82,84],"h2",{"id":83},"the-switch","The switch",[72,86,87,88,91],{},"An explicit choice is a single attribute on ",[76,89,90],{},"\u003Chtml>",":",[93,94,99],"pre",{"className":95,"code":96,"language":97,"meta":98,"style":98},"language-html shiki shiki-themes perfectui-site","\u003Chtml data-pui-mode=\"dark\">\n  \u003C!-- ... -->\n\u003C\u002Fhtml>\n","html","",[76,100,101,132,138],{"__ignoreMap":98},[102,103,106,110,113,117,120,123,127,129],"span",{"class":104,"line":105},"line",1,[102,107,109],{"class":108},"s8qk9","\u003C",[102,111,97],{"class":112},"sz5At",[102,114,116],{"class":115},"sz6eq"," data-pui-mode",[102,118,119],{"class":108},"=",[102,121,122],{"class":108},"\"",[102,124,126],{"class":125},"s8AH5","dark",[102,128,122],{"class":108},[102,130,131],{"class":108},">\n",[102,133,135],{"class":104,"line":134},2,[102,136,137],{"class":108},"  \u003C!-- ... -->\n",[102,139,141,144,146],{"class":104,"line":140},3,[102,142,143],{"class":108},"\u003C\u002F",[102,145,97],{"class":112},[102,147,131],{"class":108},[149,150,151,164],"table",{},[152,153,154],"thead",{},[155,156,157,161],"tr",{},[158,159,160],"th",{},"Value",[158,162,163],{},"Result",[165,166,167,178,187],"tbody",{},[155,168,169,175],{},[170,171,172],"td",{},[76,173,174],{},"light",[170,176,177],{},"always light",[155,179,180,184],{},[170,181,182],{},[76,183,126],{},[170,185,186],{},"always dark",[155,188,189,192],{},[170,190,191],{},"no attribute",[170,193,194],{},"follows the system",[81,196,198],{"id":197},"switching-from-javascript","Switching from JavaScript",[93,200,204],{"className":201,"code":202,"language":203,"meta":98,"style":98},"language-js shiki shiki-themes perfectui-site","import { setMode, getMode } from \"@chrissgon\u002Fperfectui\u002Fmode\";\n\nsetMode(\"dark\"); \u002F\u002F sets the attribute and remembers the choice\nsetMode(\"light\");\nsetMode(); \u002F\u002F clears both, back to the system preference\n\ngetMode(); \u002F\u002F \"system\" | \"light\" | \"dark\"\n","js",[76,205,206,241,247,267,282,293,298],{"__ignoreMap":98},[102,207,208,211,214,218,221,224,227,230,233,236,238],{"class":104,"line":105},[102,209,210],{"class":112},"import",[102,212,213],{"class":108}," {",[102,215,217],{"class":216},"stV6K"," setMode",[102,219,220],{"class":108},",",[102,222,223],{"class":216}," getMode ",[102,225,226],{"class":108},"}",[102,228,229],{"class":112}," from",[102,231,232],{"class":108}," \"",[102,234,235],{"class":125},"@chrissgon\u002Fperfectui\u002Fmode",[102,237,122],{"class":108},[102,239,240],{"class":108},";\n",[102,242,243],{"class":104,"line":134},[102,244,246],{"emptyLinePlaceholder":245},true,"\n",[102,248,249,252,254,256,258,261,264],{"class":104,"line":140},[102,250,251],{"class":216},"setMode(",[102,253,122],{"class":108},[102,255,126],{"class":125},[102,257,122],{"class":108},[102,259,260],{"class":216},")",[102,262,263],{"class":108},";",[102,265,266],{"class":108}," \u002F\u002F sets the attribute and remembers the choice\n",[102,268,270,272,274,276,278,280],{"class":104,"line":269},4,[102,271,251],{"class":216},[102,273,122],{"class":108},[102,275,174],{"class":125},[102,277,122],{"class":108},[102,279,260],{"class":216},[102,281,240],{"class":108},[102,283,285,288,290],{"class":104,"line":284},5,[102,286,287],{"class":216},"setMode()",[102,289,263],{"class":108},[102,291,292],{"class":108}," \u002F\u002F clears both, back to the system preference\n",[102,294,296],{"class":104,"line":295},6,[102,297,246],{"emptyLinePlaceholder":245},[102,299,301,304,306],{"class":104,"line":300},7,[102,302,303],{"class":216},"getMode()",[102,305,263],{"class":108},[102,307,308],{"class":108}," \u002F\u002F \"system\" | \"light\" | \"dark\"\n",[72,310,311,314,315,318,319,322],{},[76,312,313],{},"setMode"," persists the choice in a cookie named ",[76,316,317],{},"pui-mode",", not in ",[76,320,321],{},"localStorage",". A cookie travels with the request, which is what lets a server render the right mode on the first paint.",[81,324,326],{"id":325},"avoiding-the-flash","Avoiding the flash",[72,328,329],{},"If the page is rendered by a server, read the cookie and render the attribute:",[93,331,333],{"className":201,"code":332,"language":203,"meta":98,"style":98},"\u002F\u002F any server framework\nconst mode = cookies.get(\"pui-mode\"); \u002F\u002F \"light\" | \"dark\" | undefined\n",[76,334,335,340],{"__ignoreMap":98},[102,336,337],{"class":104,"line":105},[102,338,339],{"class":108},"\u002F\u002F any server framework\n",[102,341,342,345,348,350,353,356,359,361,363,365,367,369],{"class":104,"line":134},[102,343,344],{"class":112},"const",[102,346,347],{"class":216}," mode ",[102,349,119],{"class":112},[102,351,352],{"class":216}," cookies",[102,354,355],{"class":108},".",[102,357,358],{"class":216},"get(",[102,360,122],{"class":108},[102,362,317],{"class":125},[102,364,122],{"class":108},[102,366,260],{"class":216},[102,368,263],{"class":108},[102,370,371],{"class":108}," \u002F\u002F \"light\" | \"dark\" | undefined\n",[93,373,375],{"className":95,"code":374,"language":97,"meta":98,"style":98},"\u003Chtml data-pui-mode=\"{{ mode }}\">\u003C\u002Fhtml>\n",[76,376,377],{"__ignoreMap":98},[102,378,379,381,383,385,387,389,392,394,397,399],{"class":104,"line":105},[102,380,109],{"class":108},[102,382,97],{"class":112},[102,384,116],{"class":115},[102,386,119],{"class":108},[102,388,122],{"class":108},[102,390,391],{"class":125},"{{ mode }}",[102,393,122],{"class":108},[102,395,396],{"class":108},">\u003C\u002F",[102,398,97],{"class":112},[102,400,131],{"class":108},[72,402,403,404,407,408,412],{},"For a static site, put this in the ",[76,405,406],{},"\u003Chead>"," ",[409,410,411],"strong",{},"before"," the stylesheet:",[93,414,416],{"className":95,"code":415,"language":97,"meta":98,"style":98},"\u003Cscript>\n  (function (m) {\n    if (m) document.documentElement.setAttribute(\"data-pui-mode\", m[1]);\n  })(document.cookie.match(\u002F(?:^|; )pui-mode=(light|dark)\u002F));\n\u003C\u002Fscript>\n",[76,417,418,427,446,484,534],{"__ignoreMap":98},[102,419,420,422,425],{"class":104,"line":105},[102,421,109],{"class":108},[102,423,424],{"class":112},"script",[102,426,131],{"class":108},[102,428,429,432,435,438,441,443],{"class":104,"line":134},[102,430,431],{"class":216},"  (",[102,433,434],{"class":112},"function",[102,436,437],{"class":108}," (",[102,439,440],{"class":115},"m",[102,442,260],{"class":108},[102,444,445],{"class":108}," {\n",[102,447,448,451,454,456,459,461,464,466,469,471,473,476,479,482],{"class":104,"line":140},[102,449,450],{"class":112},"    if",[102,452,453],{"class":216}," (m) document",[102,455,355],{"class":108},[102,457,458],{"class":216},"documentElement",[102,460,355],{"class":108},[102,462,463],{"class":216},"setAttribute(",[102,465,122],{"class":108},[102,467,468],{"class":125},"data-pui-mode",[102,470,122],{"class":108},[102,472,220],{"class":108},[102,474,475],{"class":216}," m[",[102,477,478],{"class":125},"1",[102,480,481],{"class":216},"])",[102,483,240],{"class":108},[102,485,486,489,492,494,497,499,502,505,508,511,513,516,519,521,524,526,529,532],{"class":104,"line":269},[102,487,488],{"class":108},"  }",[102,490,491],{"class":216},")(document",[102,493,355],{"class":108},[102,495,496],{"class":216},"cookie",[102,498,355],{"class":108},[102,500,501],{"class":216},"match(",[102,503,504],{"class":108},"\u002F(?:",[102,506,507],{"class":112},"^|",[102,509,510],{"class":125},"; ",[102,512,260],{"class":108},[102,514,515],{"class":125},"pui-mode=",[102,517,518],{"class":108},"(",[102,520,174],{"class":125},[102,522,523],{"class":112},"|",[102,525,126],{"class":125},[102,527,528],{"class":108},")\u002F",[102,530,531],{"class":216},"))",[102,533,240],{"class":108},[102,535,536,538,540],{"class":104,"line":284},[102,537,143],{"class":108},[102,539,424],{"class":112},[102,541,131],{"class":108},[543,544,545],"warning",{},[72,546,547,548,551,552,555],{},"Importing Perfect UI's CSS declares ",[76,549,550],{},"color-scheme: light dark"," on the page, which is what makes the system mode work. If your app is not ready for dark mode yet, render ",[76,553,554],{},"\u003Chtml data-pui-mode=\"light\">"," and it will stay light.",[557,558,559],"style",{},"html pre.shiki code .s8qk9, html code.shiki .s8qk9{--shiki-default:var(--site-code-punct)}html pre.shiki code .sz5At, html code.shiki .sz5At{--shiki-default:var(--site-code-tag)}html pre.shiki code .sz6eq, html code.shiki .sz6eq{--shiki-default:var(--site-code-attr)}html pre.shiki code .s8AH5, html code.shiki .s8AH5{--shiki-default:var(--site-code-value)}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .stV6K, html code.shiki .stV6K{--shiki-default:var(--site-code-text)}",{"title":98,"searchDepth":134,"depth":134,"links":561},[562,563,564],{"id":83,"depth":134,"text":84},{"id":197,"depth":134,"text":198},{"id":325,"depth":134,"text":326},null,"Perfect UI follows the operating system by default. There is nothing to configure and nothing to import.","md",{},"\u002Fdocs\u002Fv1\u002Fcustomization\u002Fdark-mode",{"title":67,"description":566},"docs\u002Fv1\u002F02.customization\u002F01.dark-mode",[573],"guide","zKchJAcz6RVqQVb9ISDpq5j5VDI1XZnrJX6amrVjvCc",[576],{"title":577,"path":14,"stem":578,"children":579,"page":609},"Docs","docs",[580],{"title":581,"path":582,"stem":583,"children":584,"page":609},"V1","\u002Fdocs\u002Fv1","docs\u002Fv1",[585,610,620,633,682],{"title":586,"path":587,"stem":588,"children":589,"page":609},"Getting Started","\u002Fdocs\u002Fv1\u002Fgetting-started","docs\u002Fv1\u002F01.getting-started",[590,594,598,602,605],{"title":591,"path":592,"stem":593},"Installation","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Finstallation","docs\u002Fv1\u002F01.getting-started\u002F01.installation",{"title":595,"path":596,"stem":597},"TypeScript","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Ftypescript","docs\u002Fv1\u002F01.getting-started\u002F02.typescript",{"title":599,"path":600,"stem":601},"Tailwind CSS","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Ftailwind-css","docs\u002Fv1\u002F01.getting-started\u002F03.tailwind-css",{"title":16,"path":603,"stem":604},"\u002Fdocs\u002Fv1\u002Fgetting-started\u002Fmigrating-from-0-x","docs\u002Fv1\u002F01.getting-started\u002F04.migrating-from-0-x",{"title":606,"path":607,"stem":608},"License","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Flicense","docs\u002Fv1\u002F01.getting-started\u002F05.license",false,{"title":611,"path":612,"stem":613,"children":614,"page":609},"Customization","\u002Fdocs\u002Fv1\u002Fcustomization","docs\u002Fv1\u002F02.customization",[615,616],{"title":67,"path":569,"stem":571},{"title":617,"path":618,"stem":619},"Theme Color","\u002Fdocs\u002Fv1\u002Fcustomization\u002Ftheme-color","docs\u002Fv1\u002F02.customization\u002F02.theme-color",{"title":621,"path":622,"stem":623,"children":624,"page":609},"General","\u002Fdocs\u002Fv1\u002Fgeneral","docs\u002Fv1\u002F03.general",[625,629],{"title":626,"path":627,"stem":628},"Layout Group","\u002Fdocs\u002Fv1\u002Fgeneral\u002Flayout-group","docs\u002Fv1\u002F03.general\u002F01.layout-group",{"title":630,"path":631,"stem":632},"Float","\u002Fdocs\u002Fv1\u002Fgeneral\u002Ffloat","docs\u002Fv1\u002F03.general\u002F02.float",{"title":634,"path":635,"stem":636,"children":637,"page":609},"Components","\u002Fdocs\u002Fv1\u002Fcomponents","docs\u002Fv1\u002F04.components",[638,642,646,650,654,658,662,666,670,674,678],{"title":639,"path":640,"stem":641},"Accordion","\u002Fdocs\u002Fv1\u002Fcomponents\u002Faccordion","docs\u002Fv1\u002F04.components\u002F01.accordion",{"title":643,"path":644,"stem":645},"Badge","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fbadge","docs\u002Fv1\u002F04.components\u002F02.badge",{"title":647,"path":648,"stem":649},"Button","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fbutton","docs\u002Fv1\u002F04.components\u002F03.button",{"title":651,"path":652,"stem":653},"Card","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fcard","docs\u002Fv1\u002F04.components\u002F04.card",{"title":655,"path":656,"stem":657},"Chip","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fchip","docs\u002Fv1\u002F04.components\u002F05.chip",{"title":659,"path":660,"stem":661},"Dropdown","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fdropdown","docs\u002Fv1\u002F04.components\u002F06.dropdown",{"title":663,"path":664,"stem":665},"List","\u002Fdocs\u002Fv1\u002Fcomponents\u002Flist","docs\u002Fv1\u002F04.components\u002F07.list",{"title":667,"path":668,"stem":669},"Modal","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fmodal","docs\u002Fv1\u002F04.components\u002F08.modal",{"title":671,"path":672,"stem":673},"Table","\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftable","docs\u002Fv1\u002F04.components\u002F09.table",{"title":675,"path":676,"stem":677},"Timeline","\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftimeline","docs\u002Fv1\u002F04.components\u002F10.timeline",{"title":679,"path":680,"stem":681},"Tooltip","\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftooltip","docs\u002Fv1\u002F04.components\u002F11.tooltip",{"title":683,"path":684,"stem":685,"children":686,"page":609},"Forms","\u002Fdocs\u002Fv1\u002Fforms","docs\u002Fv1\u002F05.forms",[687,691,695,699,703,707,711,715],{"title":688,"path":689,"stem":690},"Field Group","\u002Fdocs\u002Fv1\u002Fforms\u002Ffield-group","docs\u002Fv1\u002F05.forms\u002F01.field-group",{"title":692,"path":693,"stem":694},"Input","\u002Fdocs\u002Fv1\u002Fforms\u002Finput","docs\u002Fv1\u002F05.forms\u002F02.input",{"title":696,"path":697,"stem":698},"Input Group","\u002Fdocs\u002Fv1\u002Fforms\u002Finput-group","docs\u002Fv1\u002F05.forms\u002F03.input-group",{"title":700,"path":701,"stem":702},"Textarea","\u002Fdocs\u002Fv1\u002Fforms\u002Ftextarea","docs\u002Fv1\u002F05.forms\u002F04.textarea",{"title":704,"path":705,"stem":706},"Select","\u002Fdocs\u002Fv1\u002Fforms\u002Fselect","docs\u002Fv1\u002F05.forms\u002F05.select",{"title":708,"path":709,"stem":710},"Checkbox","\u002Fdocs\u002Fv1\u002Fforms\u002Fcheckbox","docs\u002Fv1\u002F05.forms\u002F06.checkbox",{"title":712,"path":713,"stem":714},"Radio","\u002Fdocs\u002Fv1\u002Fforms\u002Fradio","docs\u002Fv1\u002F05.forms\u002F07.radio",{"title":716,"path":717,"stem":718},"Switch","\u002Fdocs\u002Fv1\u002Fforms\u002Fswitch","docs\u002Fv1\u002F05.forms\u002F08.switch",1790369303496]