[{"data":1,"prerenderedAt":408},["ShallowReactive",2],{"$fCakGHKSf8D_1hBaeJMyEXFyf54hcTDLa3jtfXwH8bao":3},{"newThing":4,"project":5,"cycle":8,"sections":21,"threads":401,"otherDocs":402,"images":405,"archiveItems":406,"links":407},null,{"id":6,"label":7,"liveBase":4},"design","Design",{"id":9,"num":10,"dir":11,"name":12,"title":13,"focus":14,"status":15,"statusNote":4,"created":16,"completed":4,"mode":4,"recordless":17,"thumbnail":4,"imageCount":18,"artifactCount":19,"lastActivity":20,"hasPickup":17,"hasInitialPrompt":17},"c52",52,"c52.dark-mode-subtle","dark-mode-subtle","Dark Mode (Subtle) — Iteration & Theming","Build a dark-mode color system for the qcontrol app consolidation (qdash, qglass, Nuxt UI), with a design-app-based color picker and theme-file persistence for rapid iteration.","archived","2026-07-16",false,0,2,"2026-09-11",[22,36,129,199,296],{"key":23,"title":24,"empty":17,"ast":25},"why","Why",{"type":26,"children":27},"root",[28],{"type":29,"tag":30,"props":31,"children":32},"element","p",{},[33],{"type":34,"value":35},"text","The c51 consolidation names \"subtle dark mode — human-driven\" as an objective but doesn't have the tooling to explore it. Designing in the browser with live pickers is faster than Figma comps; saving themes as files (JSON\u002FYAML\u002FTypeScript) lets us try variants without losing previous attempts. A shared theme format also grounds the conversation with engineering about token implementation.",{"key":37,"title":38,"empty":17,"ast":39},"objective","Objective",{"type":26,"children":40},[41,46],{"type":29,"tag":30,"props":42,"children":43},{},[44],{"type":34,"value":45},"Three deliverables:",{"type":29,"tag":47,"props":48,"children":49},"ol",{},[50,79,89],{"type":29,"tag":51,"props":52,"children":53},"li",{},[54,60,62,69,71,77],{"type":29,"tag":55,"props":56,"children":57},"strong",{},[58],{"type":34,"value":59},"Color picker UI",{"type":34,"value":61}," in the design app — add an interactive tool to the ",{"type":29,"tag":63,"props":64,"children":66},"code",{"className":65},[],[67],{"type":34,"value":68},"\u002Fbrand",{"type":34,"value":70}," pages that lets you pick and preview a third theme (",{"type":29,"tag":63,"props":72,"children":74},{"className":73},[],[75],{"type":34,"value":76},"dark-subtle",{"type":34,"value":78},") live, alongside light and the legacy dark (zinc\u002Femerald).",{"type":29,"tag":51,"props":80,"children":81},{},[82,87],{"type":29,"tag":55,"props":83,"children":84},{},[85],{"type":34,"value":86},"Theme file format",{"type":34,"value":88}," — define a text-based schema (JSON recommended) that captures a full theme: semantic token values (surface, content, stroke, signal colors), tailwind color scale overrides, opacity rules.",{"type":29,"tag":51,"props":90,"children":91},{},[92,97,99,104,106,112,114,120,121,127],{"type":29,"tag":55,"props":93,"children":94},{},[95],{"type":34,"value":96},"Theme persistence",{"type":34,"value":98}," — save\u002Fload\u002Flist theme files so iterations don't evaporate; allow trying multiple ",{"type":29,"tag":63,"props":100,"children":102},{"className":101},[],[103],{"type":34,"value":76},{"type":34,"value":105}," variants in parallel (e.g., ",{"type":29,"tag":63,"props":107,"children":109},{"className":108},[],[110],{"type":34,"value":111},"dark-subtle-v1.json",{"type":34,"value":113},", ",{"type":29,"tag":63,"props":115,"children":117},{"className":116},[],[118],{"type":34,"value":119},"dark-subtle-v2.json",{"type":34,"value":113},{"type":29,"tag":63,"props":122,"children":124},{"className":123},[],[125],{"type":34,"value":126},"dark-subtle-experimental.json",{"type":34,"value":128},").",{"key":130,"title":131,"empty":17,"ast":132},"scope","Scope",{"type":26,"children":133},[134,142,173,181],{"type":29,"tag":30,"props":135,"children":136},{},[137],{"type":29,"tag":55,"props":138,"children":139},{},[140],{"type":34,"value":141},"In:",{"type":29,"tag":143,"props":144,"children":145},"ul",{},[146,151,156,161],{"type":29,"tag":51,"props":147,"children":148},{},[149],{"type":34,"value":150},"Color picker component(s) added to design app",{"type":29,"tag":51,"props":152,"children":153},{},[154],{"type":34,"value":155},"Theme file format (schema + examples)",{"type":29,"tag":51,"props":157,"children":158},{},[159],{"type":34,"value":160},"Save\u002Fload UI + file browser",{"type":29,"tag":51,"props":162,"children":163},{},[164,166,171],{"type":34,"value":165},"A baseline ",{"type":29,"tag":63,"props":167,"children":169},{"className":168},[],[170],{"type":34,"value":76},{"type":34,"value":172}," theme as proof of concept (not final)",{"type":29,"tag":30,"props":174,"children":175},{},[176],{"type":29,"tag":55,"props":177,"children":178},{},[179],{"type":34,"value":180},"Out:",{"type":29,"tag":143,"props":182,"children":183},{},[184,189,194],{"type":29,"tag":51,"props":185,"children":186},{},[187],{"type":34,"value":188},"Implementation in the Nuxt qdash\u002Fqglass UI (that's c51's follow-on work)",{"type":29,"tag":51,"props":190,"children":191},{},[192],{"type":34,"value":193},"Figma sync or cross-project theming",{"type":29,"tag":51,"props":195,"children":196},{},[197],{"type":34,"value":198},"Accessibility audit (save that as a separate decision)",{"key":200,"title":201,"empty":17,"ast":202},"key-changes","Key Changes",{"type":26,"children":203},[204],{"type":29,"tag":143,"props":205,"children":206},{},[207,218,229,255,274,285],{"type":29,"tag":51,"props":208,"children":209},{},[210,216],{"type":29,"tag":63,"props":211,"children":213},{"className":212},[],[214],{"type":34,"value":215},"app\u002Fcomposables\u002FuseThemeEditor.ts",{"type":34,"value":217}," — extended to support three-column themes (light\u002Fdark\u002Fsubtle), live Dark\u002FSubtle preview toggle, save\u002Fload via API",{"type":29,"tag":51,"props":219,"children":220},{},[221,227],{"type":29,"tag":63,"props":222,"children":224},{"className":223},[],[225],{"type":34,"value":226},"app\u002Fcomponents\u002FThemeEditor.vue",{"type":34,"value":228}," — added subtle column, Dark\u002FSubtle preview toggle in header, saved themes selector in footer",{"type":29,"tag":51,"props":230,"children":231},{},[232,238,240,246,247,253],{"type":29,"tag":63,"props":233,"children":235},{"className":234},[],[236],{"type":34,"value":237},"public\u002Fthemes\u002F",{"type":34,"value":239}," — baseline theme files (",{"type":29,"tag":63,"props":241,"children":243},{"className":242},[],[244],{"type":34,"value":245},"dark-subtle-baseline.ts",{"type":34,"value":113},{"type":29,"tag":63,"props":248,"children":250},{"className":249},[],[251],{"type":34,"value":252},"light-default.ts",{"type":34,"value":254},")",{"type":29,"tag":51,"props":256,"children":257},{},[258,264,266,272],{"type":29,"tag":63,"props":259,"children":261},{"className":260},[],[262],{"type":34,"value":263},"server\u002Froutes\u002Fapi\u002Fthemes.ts",{"type":34,"value":265}," + ",{"type":29,"tag":63,"props":267,"children":269},{"className":268},[],[270],{"type":34,"value":271},"[id].ts",{"type":34,"value":273}," — existing file-backed theme API (reused for save\u002Fload)",{"type":29,"tag":51,"props":275,"children":276},{},[277,283],{"type":29,"tag":63,"props":278,"children":280},{"className":279},[],[281],{"type":34,"value":282},"cycles\u002Fc52.dark-mode-subtle\u002Ftheme-format.md",{"type":34,"value":284}," — documented hex format for themes",{"type":29,"tag":51,"props":286,"children":287},{},[288,294],{"type":29,"tag":63,"props":289,"children":291},{"className":290},[],[292],{"type":34,"value":293},"cycles\u002Fc52.dark-mode-subtle\u002FIMPLEMENTATION.md",{"type":34,"value":295}," — implementation details",{"key":297,"title":298,"empty":17,"ast":299},"outcome","Outcome",{"type":26,"children":300},[301,306],{"type":29,"tag":30,"props":302,"children":303},{},[304],{"type":34,"value":305},"✅ Complete.",{"type":29,"tag":143,"props":307,"children":308},{},[309,327,345,370,396],{"type":29,"tag":51,"props":310,"children":311},{},[312,317,319,325],{"type":29,"tag":55,"props":313,"children":314},{},[315],{"type":34,"value":316},"Three-column theme editor drawer",{"type":34,"value":318}," — added subtle column alongside light\u002Fdark in the existing ",{"type":29,"tag":63,"props":320,"children":322},{"className":321},[],[323],{"type":34,"value":324},"ThemeEditor.vue",{"type":34,"value":326}," component (floating trigger, bottom-right on every page)",{"type":29,"tag":51,"props":328,"children":329},{},[330,335,337,343],{"type":29,"tag":55,"props":331,"children":332},{},[333],{"type":34,"value":334},"Live Dark\u002FSubtle preview toggle",{"type":34,"value":336}," — swap which theme values render on the page's ",{"type":29,"tag":63,"props":338,"children":340},{"className":339},[],[341],{"type":34,"value":342},".dark",{"type":34,"value":344}," class to compare visually",{"type":29,"tag":51,"props":346,"children":347},{},[348,353,355,360,362,368],{"type":29,"tag":55,"props":349,"children":350},{},[351],{"type":34,"value":352},"Save\u002Fload mechanism",{"type":34,"value":354}," — themes persisted as JSON files in ",{"type":29,"tag":63,"props":356,"children":358},{"className":357},[],[359],{"type":34,"value":237},{"type":34,"value":361},", loaded via existing ",{"type":29,"tag":63,"props":363,"children":365},{"className":364},[],[366],{"type":34,"value":367},"\u002Fapi\u002Fthemes",{"type":34,"value":369}," endpoints",{"type":29,"tag":51,"props":371,"children":372},{},[373,378,380,386,388,394],{"type":29,"tag":55,"props":374,"children":375},{},[376],{"type":34,"value":377},"Baseline themes",{"type":34,"value":379}," — ",{"type":29,"tag":63,"props":381,"children":383},{"className":382},[],[384],{"type":34,"value":385},"dark-subtle-baseline",{"type":34,"value":387}," and ",{"type":29,"tag":63,"props":389,"children":391},{"className":390},[],[392],{"type":34,"value":393},"light-default",{"type":34,"value":395}," saved and ready to iterate on",{"type":29,"tag":51,"props":397,"children":398},{},[399],{"type":34,"value":400},"Ready for rapid browser-based iteration: edit swatches, toggle Dark\u002FSubtle, save variants, reload to re-load",[],[403,404],"IMPLEMENTATION.md","theme-format.md",[],[],[],1789151084269]