[{"data":1,"prerenderedAt":255},["ShallowReactive",2],{"doc-page:adr\u002F0006-separate-hc-from-casual-theme-toggle":3},{"data":4,"body":7,"toc":249},{"title":5,"description":6},"ADR 0006 — Separate high-contrast mode from the casual theme toggle","",{"type":8,"children":9},"root",[10,18,63,70,76,81,93,107,112,118,123,206,212],{"type":11,"tag":12,"props":13,"children":15},"element","h1",{"id":14},"adr-0006-separate-high-contrast-mode-from-the-casual-theme-toggle",[16],{"type":17,"value":5},"text",{"type":11,"tag":19,"props":20,"children":21},"ul",{},[22,34,44],{"type":11,"tag":23,"props":24,"children":25},"li",{},[26,32],{"type":11,"tag":27,"props":28,"children":29},"strong",{},[30],{"type":17,"value":31},"Date",{"type":17,"value":33},": 2026-04-24",{"type":11,"tag":23,"props":35,"children":36},{},[37,42],{"type":11,"tag":27,"props":38,"children":39},{},[40],{"type":17,"value":41},"Status",{"type":17,"value":43},": Accepted",{"type":11,"tag":23,"props":45,"children":46},{},[47,52,54,61],{"type":11,"tag":27,"props":48,"children":49},{},[50],{"type":17,"value":51},"Supersedes (in part)",{"type":17,"value":53},": ",{"type":11,"tag":55,"props":56,"children":58},"a",{"href":57},"\u002Fdocs\u002Fadr\u002F0005-three-theme-palette",[59],{"type":17,"value":60},"ADR 0005",{"type":17,"value":62}," — the\nthree-way cycle decision. The three-theme palette itself stays; the\nsingle-toggle-cycles-all-three UX is what changes.",{"type":11,"tag":64,"props":65,"children":67},"h2",{"id":66},"context",[68],{"type":17,"value":69},"Context",{"type":11,"tag":71,"props":72,"children":73},"p",{},[74],{"type":17,"value":75},"ADR 0005 picked a three-way cycle for the header theme toggle: tti →\ntti-dark → tti-hc → tti. Rationale was a single control covering all\nthree named themes.",{"type":11,"tag":71,"props":77,"children":78},{},[79],{"type":17,"value":80},"In practice, that design pushes every casual theme-switcher through\ntti-hc — and because tti-hc uses WCAG AAA line weights (near-black text,\ndark borders), it reads visually unpolished next to tti's lighter,\neditorial feel. Users who just wanted to toggle dark mode now see a\n\"phase\" of their theme cycle that looks broken even though it's\nintentional.",{"type":11,"tag":71,"props":82,"children":83},{},[84,86,91],{"type":17,"value":85},"The underlying tension: ",{"type":11,"tag":27,"props":87,"children":88},{},[89],{"type":17,"value":90},"dark mode is a preference, high-contrast is an\naccessibility accommodation.",{"type":17,"value":92}," Conflating them in one cycle means we\neither:",{"type":11,"tag":94,"props":95,"children":96},"ol",{},[97,102],{"type":11,"tag":23,"props":98,"children":99},{},[100],{"type":17,"value":101},"Compromise on HC's contrast to make it look like a normal theme\n(degrading accessibility), or",{"type":11,"tag":23,"props":103,"children":104},{},[105],{"type":17,"value":106},"Keep HC strong and accept that most users stumble through it thinking\nsomething's broken.",{"type":11,"tag":71,"props":108,"children":109},{},[110],{"type":17,"value":111},"Neither is good.",{"type":11,"tag":64,"props":113,"children":115},{"id":114},"decision",[116],{"type":17,"value":117},"Decision",{"type":11,"tag":71,"props":119,"children":120},{},[121],{"type":17,"value":122},"Split the controls by purpose:",{"type":11,"tag":19,"props":124,"children":125},{},[126,153,187],{"type":11,"tag":23,"props":127,"children":128},{},[129,134,136,143,145,151],{"type":11,"tag":27,"props":130,"children":131},{},[132],{"type":17,"value":133},"Header toggle",{"type":17,"value":135}," — light ↔ dark only. Cycles between ",{"type":11,"tag":137,"props":138,"children":140},"code",{"className":139},[],[141],{"type":17,"value":142},"tti",{"type":17,"value":144}," and\n",{"type":11,"tag":137,"props":146,"children":148},{"className":147},[],[149],{"type":17,"value":150},"tti-dark",{"type":17,"value":152},". Icon shows the next state (moon when light, sun when dark),\nmirroring OS-level theme toggles.",{"type":11,"tag":23,"props":154,"children":155},{},[156,161,163,169,171,177,179,185],{"type":11,"tag":27,"props":157,"children":158},{},[159],{"type":17,"value":160},"Footer link",{"type":17,"value":162}," — \"High-contrast mode\" button with an ",{"type":11,"tag":137,"props":164,"children":166},{"className":165},[],[167],{"type":17,"value":168},"aria-pressed",{"type":17,"value":170},"\nstate. Toggles ",{"type":11,"tag":137,"props":172,"children":174},{"className":173},[],[175],{"type":17,"value":176},"tti-hc",{"type":17,"value":178}," on\u002Foff independently. Uses\n",{"type":11,"tag":137,"props":180,"children":182},{"className":181},[],[183],{"type":17,"value":184},"lucide:accessibility",{"type":17,"value":186}," icon so it signals \"accessibility option,\" not\n\"aesthetic preference.\"",{"type":11,"tag":23,"props":188,"children":189},{},[190,192,197,199,204],{"type":17,"value":191},"From ",{"type":11,"tag":137,"props":193,"children":195},{"className":194},[],[196],{"type":17,"value":176},{"type":17,"value":198},", the header toggle exits to ",{"type":11,"tag":137,"props":200,"children":202},{"className":201},[],[203],{"type":17,"value":142},{"type":17,"value":205}," (light) — the most\nconservative default. Users who want dark from HC can click the header\ntoggle a second time.",{"type":11,"tag":64,"props":207,"children":209},{"id":208},"consequences",[210],{"type":17,"value":211},"Consequences",{"type":11,"tag":19,"props":213,"children":214},{},[215,227,232,244],{"type":11,"tag":23,"props":216,"children":217},{},[218,220,225],{"type":17,"value":219},"Users on ",{"type":11,"tag":137,"props":221,"children":223},{"className":222},[],[224],{"type":17,"value":176},{"type":17,"value":226}," who haven't clicked the footer button are invisible\nto the header toggle's state — the moon icon still shows regardless.\nThat's acceptable because HC users who deliberately enabled it from\nthe footer already know where the exit is.",{"type":11,"tag":23,"props":228,"children":229},{},[230],{"type":17,"value":231},"The footer is now a place where small utilities live (HC toggle is the\nfirst). Future accessibility affordances — reduced motion, font-size\nbump, keyboard-nav hints — would land there too.",{"type":11,"tag":23,"props":233,"children":234},{},[235,237,242],{"type":17,"value":236},"The three-theme palette from ADR 0005 is unchanged. ",{"type":11,"tag":137,"props":238,"children":240},{"className":239},[],[241],{"type":17,"value":176},{"type":17,"value":243}," still\nexists as a first-class theme with full token coverage; it's just not\nin the casual cycle.",{"type":11,"tag":23,"props":245,"children":246},{},[247],{"type":17,"value":248},"ADR 0005's \"three blocks in tokens.css, each a full override\" decision\nstands. Adding a new token still requires adding it to all three\nblocks.",{"title":6,"searchDepth":250,"depth":250,"links":251},2,[252,253,254],{"id":66,"depth":250,"text":69},{"id":114,"depth":250,"text":117},{"id":208,"depth":250,"text":211},1793377937759]