[{"data":1,"prerenderedAt":1062},["ShallowReactive",2],{"post-\u002Fposts\u002Fcac47918":3,"post-nav-\u002Fposts\u002Fcac47918":1023,"post-related-\u002Fposts\u002Fcac47918":1042},{"id":4,"title":5,"abbrlink":6,"aisummary":7,"body":8,"category":1009,"cover":1010,"date":1011,"description":1012,"draft":1013,"extension":1014,"featured":1013,"meta":1015,"navigation":267,"path":1016,"pinned":1013,"seo":1017,"stem":1018,"tags":1019,"updated":1010,"__hash__":1022},"posts\u002Fposts\u002Fdark-mode-design.md","暗色模式不是把颜色反过来","cac47918","暗色模式并非简单地将亮色模式颜色反转，而是需要独立设计。纯黑配纯白对比度过高，易导致视觉疲劳；阴影在暗色背景下失效，需改用边框或亮度差区分层级；强调色也需重新调整，以确保在不同背景下保持可读性。此外，三态切换可避免与系统主题冲突，同时通过同步脚本防止页面闪烁，提升用户体验。",{"type":9,"value":10,"toc":998},"minimark",[11,15,88,91,132,135,139,144,147,150,153,199,202,206,209,218,224,232,317,321,324,327,389,399,405,410,413,579,586,602,609,618,621,624,627,660,670,756,759,763,766,777,934,937,982,985,991,994],[12,13,14],"p",{},"我见过太多暗色模式是这样的：",[16,17,22],"pre",{"className":18,"code":19,"language":20,"meta":21,"style":21},"language-css shiki shiki-themes github-light github-dark","\u002F* 这就是全部实现 *\u002F\n.dark {\n  filter: invert(1) hue-rotate(180deg);\n}\n","css","",[23,24,25,34,45,82],"code",{"__ignoreMap":21},[26,27,30],"span",{"class":28,"line":29},"line",1,[26,31,33],{"class":32},"sJ8bj","\u002F* 这就是全部实现 *\u002F\n",[26,35,37,41],{"class":28,"line":36},2,[26,38,40],{"class":39},"sScJk",".dark",[26,42,44],{"class":43},"sVt8B"," {\n",[26,46,48,52,55,58,61,64,67,70,72,75,79],{"class":28,"line":47},3,[26,49,51],{"class":50},"sj4cs","  filter",[26,53,54],{"class":43},": ",[26,56,57],{"class":50},"invert",[26,59,60],{"class":43},"(",[26,62,63],{"class":50},"1",[26,65,66],{"class":43},") ",[26,68,69],{"class":50},"hue-rotate",[26,71,60],{"class":43},[26,73,74],{"class":50},"180",[26,76,78],{"class":77},"szBVR","deg",[26,80,81],{"class":43},");\n",[26,83,85],{"class":28,"line":84},4,[26,86,87],{"class":43},"}\n",[12,89,90],{},"或者稍微认真一点的：",[16,92,94],{"className":18,"code":93,"language":20,"meta":21,"style":21},".dark {\n  --bg: #000;\n  --text: #fff;\n}\n",[23,95,96,102,116,128],{"__ignoreMap":21},[26,97,98,100],{"class":28,"line":29},[26,99,40],{"class":39},[26,101,44],{"class":43},[26,103,104,108,110,113],{"class":28,"line":36},[26,105,107],{"class":106},"s4XuR","  --bg",[26,109,54],{"class":43},[26,111,112],{"class":50},"#000",[26,114,115],{"class":43},";\n",[26,117,118,121,123,126],{"class":28,"line":47},[26,119,120],{"class":106},"  --text",[26,122,54],{"class":43},[26,124,125],{"class":50},"#fff",[26,127,115],{"class":43},[26,129,130],{"class":28,"line":84},[26,131,87],{"class":43},[12,133,134],{},"两种都错。",[136,137,138],"h2",{"id":138},"为什么不能简单反转",[140,141,143],"h3",{"id":142},"一纯黑配纯白太刺眼","一、纯黑配纯白太刺眼",[12,145,146],{},"白底黑字的对比度是 21:1，这是物理极限。",[12,148,149],{},"在亮环境下这没问题——瞳孔小，进光量少。但在暗环境下，你的瞳孔放大了，屏幕成了唯一光源，21:1 的对比度会让眼睛很快疲劳。",[12,151,152],{},"所以暗色模式的标准做法是：",[16,154,156],{"className":18,"code":155,"language":20,"meta":21,"style":21},".dark {\n  --background: #09090b;  \u002F* 不是 #000 *\u002F\n  --foreground: #fafafa;  \u002F* 不是 #fff *\u002F\n}\n",[23,157,158,164,180,195],{"__ignoreMap":21},[26,159,160,162],{"class":28,"line":29},[26,161,40],{"class":39},[26,163,44],{"class":43},[26,165,166,169,171,174,177],{"class":28,"line":36},[26,167,168],{"class":106},"  --background",[26,170,54],{"class":43},[26,172,173],{"class":50},"#09090b",[26,175,176],{"class":43},";  ",[26,178,179],{"class":32},"\u002F* 不是 #000 *\u002F\n",[26,181,182,185,187,190,192],{"class":28,"line":47},[26,183,184],{"class":106},"  --foreground",[26,186,54],{"class":43},[26,188,189],{"class":50},"#fafafa",[26,191,176],{"class":43},[26,193,194],{"class":32},"\u002F* 不是 #fff *\u002F\n",[26,196,197],{"class":28,"line":84},[26,198,87],{"class":43},[12,200,201],{},"对比度降到约 19:1。差别不大，但长时间阅读舒服很多。",[140,203,205],{"id":204},"二纯黑背景会让阴影失效","二、纯黑背景会让阴影失效",[12,207,208],{},"亮色模式下阴影是黑色半透明：",[16,210,212],{"className":18,"code":211,"language":20,"meta":21,"style":21},"box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n",[23,213,214],{"__ignoreMap":21},[26,215,216],{"class":28,"line":29},[26,217,211],{"class":43},[12,219,220,221,223],{},"暗色模式下把同一个阴影放在 ",[23,222,173],{}," 上——你什么都看不见。黑色叠黑色。",[12,225,226,227,231],{},"这就是为什么",[228,229,230],"strong",{},"暗色模式通常完全禁用阴影","，改用边框或者亮度差来区分层级：",[16,233,235],{"className":18,"code":234,"language":20,"meta":21,"style":21},".dark * {\n  box-shadow: none;\n}\n\n\u002F* 用亮一点的面表达\"浮起来\" *\u002F\n.dark {\n  --surface: #18181b;      \u002F* 页面底 #09090b，卡片 #18181b *\u002F\n  --surface-hover: #27272a;\n}\n",[23,236,237,247,259,263,269,275,282,299,312],{"__ignoreMap":21},[26,238,239,241,245],{"class":28,"line":29},[26,240,40],{"class":39},[26,242,244],{"class":243},"s9eBZ"," *",[26,246,44],{"class":43},[26,248,249,252,254,257],{"class":28,"line":36},[26,250,251],{"class":50},"  box-shadow",[26,253,54],{"class":43},[26,255,256],{"class":50},"none",[26,258,115],{"class":43},[26,260,261],{"class":28,"line":47},[26,262,87],{"class":43},[26,264,265],{"class":28,"line":84},[26,266,268],{"emptyLinePlaceholder":267},true,"\n",[26,270,272],{"class":28,"line":271},5,[26,273,274],{"class":32},"\u002F* 用亮一点的面表达\"浮起来\" *\u002F\n",[26,276,278,280],{"class":28,"line":277},6,[26,279,40],{"class":39},[26,281,44],{"class":43},[26,283,285,288,290,293,296],{"class":28,"line":284},7,[26,286,287],{"class":106},"  --surface",[26,289,54],{"class":43},[26,291,292],{"class":50},"#18181b",[26,294,295],{"class":43},";      ",[26,297,298],{"class":32},"\u002F* 页面底 #09090b，卡片 #18181b *\u002F\n",[26,300,302,305,307,310],{"class":28,"line":301},8,[26,303,304],{"class":106},"  --surface-hover",[26,306,54],{"class":43},[26,308,309],{"class":50},"#27272a",[26,311,115],{"class":43},[26,313,315],{"class":28,"line":314},9,[26,316,87],{"class":43},[140,318,320],{"id":319},"三强调色必须重新调","三、强调色必须重新调",[12,322,323],{},"同一个颜色在亮底和暗底上的感知完全不同。",[12,325,326],{},"我的强调色：",[328,329,330,349],"table",{},[331,332,333],"thead",{},[334,335,336,340,343,346],"tr",{},[337,338,339],"th",{},"模式",[337,341,342],{},"值",[337,344,345],{},"对比度",[337,347,348],{},"说明",[350,351,352,371],"tbody",{},[334,353,354,358,363,368],{},[355,356,357],"td",{},"亮色",[355,359,360],{},[23,361,362],{},"#a94f33",[355,364,365,366],{},"5.45 on ",[23,367,125],{},[355,369,370],{},"深陶土，压得住白底",[334,372,373,376,381,386],{},[355,374,375],{},"暗色",[355,377,378],{},[23,379,380],{},"#cc785c",[355,382,383,384],{},"6.07 on ",[23,385,173],{},[355,387,388],{},"提亮 + 降饱和，不刺眼",[12,390,391,392,394,395,398],{},"如果暗色模式还用 ",[23,393,362],{},"，它在深色底上会显得",[228,396,397],{},"脏","——像褪色的油漆。因为深色底会让低亮度颜色失去光泽。",[12,400,401,402,404],{},"反过来，如果亮色模式用 ",[23,403,380],{},"，在白色上对比度只有 3.1:1，达不到 WCAG AA 的 4.5:1。",[12,406,407],{},[228,408,409],{},"所以强调色必须有两套值，这不是可选项。",[136,411,412],{"id":412},"完整的变量对照",[16,414,416],{"className":18,"code":415,"language":20,"meta":21,"style":21},":root {\n  --background: #ffffff;\n  --foreground: #18181b;\n  --muted: #fafafa;\n  --muted-foreground: #71717a;\n  --border: #e4e4e7;\n  --accent: #a94f33;\n}\n\n.dark {\n  --background: #09090b;\n  --foreground: #fafafa;\n  --muted: #18181b;\n  --muted-foreground: #a1a1aa;\n  --border: #27272a;\n  --accent: #cc785c;\n}\n",[23,417,418,425,436,446,457,469,481,492,496,500,507,518,529,540,552,563,574],{"__ignoreMap":21},[26,419,420,423],{"class":28,"line":29},[26,421,422],{"class":39},":root",[26,424,44],{"class":43},[26,426,427,429,431,434],{"class":28,"line":36},[26,428,168],{"class":106},[26,430,54],{"class":43},[26,432,433],{"class":50},"#ffffff",[26,435,115],{"class":43},[26,437,438,440,442,444],{"class":28,"line":47},[26,439,184],{"class":106},[26,441,54],{"class":43},[26,443,292],{"class":50},[26,445,115],{"class":43},[26,447,448,451,453,455],{"class":28,"line":84},[26,449,450],{"class":106},"  --muted",[26,452,54],{"class":43},[26,454,189],{"class":50},[26,456,115],{"class":43},[26,458,459,462,464,467],{"class":28,"line":271},[26,460,461],{"class":106},"  --muted-foreground",[26,463,54],{"class":43},[26,465,466],{"class":50},"#71717a",[26,468,115],{"class":43},[26,470,471,474,476,479],{"class":28,"line":277},[26,472,473],{"class":106},"  --border",[26,475,54],{"class":43},[26,477,478],{"class":50},"#e4e4e7",[26,480,115],{"class":43},[26,482,483,486,488,490],{"class":28,"line":284},[26,484,485],{"class":106},"  --accent",[26,487,54],{"class":43},[26,489,362],{"class":50},[26,491,115],{"class":43},[26,493,494],{"class":28,"line":301},[26,495,87],{"class":43},[26,497,498],{"class":28,"line":314},[26,499,268],{"emptyLinePlaceholder":267},[26,501,503,505],{"class":28,"line":502},10,[26,504,40],{"class":39},[26,506,44],{"class":43},[26,508,510,512,514,516],{"class":28,"line":509},11,[26,511,168],{"class":106},[26,513,54],{"class":43},[26,515,173],{"class":50},[26,517,115],{"class":43},[26,519,521,523,525,527],{"class":28,"line":520},12,[26,522,184],{"class":106},[26,524,54],{"class":43},[26,526,189],{"class":50},[26,528,115],{"class":43},[26,530,532,534,536,538],{"class":28,"line":531},13,[26,533,450],{"class":106},[26,535,54],{"class":43},[26,537,292],{"class":50},[26,539,115],{"class":43},[26,541,543,545,547,550],{"class":28,"line":542},14,[26,544,461],{"class":106},[26,546,54],{"class":43},[26,548,549],{"class":50},"#a1a1aa",[26,551,115],{"class":43},[26,553,555,557,559,561],{"class":28,"line":554},15,[26,556,473],{"class":106},[26,558,54],{"class":43},[26,560,309],{"class":50},[26,562,115],{"class":43},[26,564,566,568,570,572],{"class":28,"line":565},16,[26,567,485],{"class":106},[26,569,54],{"class":43},[26,571,380],{"class":50},[26,573,115],{"class":43},[26,575,577],{"class":28,"line":576},17,[26,578,87],{"class":43},[12,580,581,582,585],{},"注意 ",[23,583,584],{},"--muted-foreground"," 的变化：",[587,588,589,596],"ul",{},[590,591,592,593,595],"li",{},"亮色：",[23,594,466],{},"，比正文浅，但仍能读",[590,597,598,599,601],{},"暗色：",[23,600,549],{},"，比正文暗，但仍能读",[12,603,604,605,608],{},"方向是反的，但",[228,606,607],{},"目的相同：比正文低一级，但保持可读","。",[12,610,611,612,614,615,617],{},"如果暗色模式直接用亮色模式的 ",[23,613,466],{},"，它在 ",[23,616,173],{}," 上的对比度只有 4.3:1——刚好在 AA 线下面。",[136,619,620],{"id":620},"三态切换而不是两态",[12,622,623],{},"只用两态（亮\u002F暗）有个问题：用户系统里设了「跟随时间自动切换」，但网站不认。",[12,625,626],{},"所以我的实现是三态：",[16,628,632],{"className":629,"code":630,"language":631,"meta":21,"style":21},"language-ts shiki shiki-themes github-light github-dark","type ThemeMode = 'light' | 'dark' | 'system'\n","ts",[23,633,634],{"__ignoreMap":21},[26,635,636,639,642,645,649,652,655,657],{"class":28,"line":29},[26,637,638],{"class":77},"type",[26,640,641],{"class":39}," ThemeMode",[26,643,644],{"class":77}," =",[26,646,648],{"class":647},"sZZnC"," 'light'",[26,650,651],{"class":77}," |",[26,653,654],{"class":647}," 'dark'",[26,656,651],{"class":77},[26,658,659],{"class":647}," 'system'\n",[12,661,662,665,666,669],{},[23,663,664],{},"system"," 模式下监听 ",[23,667,668],{},"prefers-color-scheme","：",[16,671,673],{"className":629,"code":672,"language":631,"meta":21,"style":21},"const mq = matchMedia('(prefers-color-scheme: dark)')\n\nmq.addEventListener('change', () => {\n  if (mode.value === 'system') {\n    applyTheme(mq.matches)\n  }\n})\n",[23,674,675,696,700,721,738,746,751],{"__ignoreMap":21},[26,676,677,680,683,685,688,690,693],{"class":28,"line":29},[26,678,679],{"class":77},"const",[26,681,682],{"class":50}," mq",[26,684,644],{"class":77},[26,686,687],{"class":39}," matchMedia",[26,689,60],{"class":43},[26,691,692],{"class":647},"'(prefers-color-scheme: dark)'",[26,694,695],{"class":43},")\n",[26,697,698],{"class":28,"line":36},[26,699,268],{"emptyLinePlaceholder":267},[26,701,702,705,708,710,713,716,719],{"class":28,"line":47},[26,703,704],{"class":43},"mq.",[26,706,707],{"class":39},"addEventListener",[26,709,60],{"class":43},[26,711,712],{"class":647},"'change'",[26,714,715],{"class":43},", () ",[26,717,718],{"class":77},"=>",[26,720,44],{"class":43},[26,722,723,726,729,732,735],{"class":28,"line":84},[26,724,725],{"class":77},"  if",[26,727,728],{"class":43}," (mode.value ",[26,730,731],{"class":77},"===",[26,733,734],{"class":647}," 'system'",[26,736,737],{"class":43},") {\n",[26,739,740,743],{"class":28,"line":271},[26,741,742],{"class":39},"    applyTheme",[26,744,745],{"class":43},"(mq.matches)\n",[26,747,748],{"class":28,"line":277},[26,749,750],{"class":43},"  }\n",[26,752,753],{"class":28,"line":284},[26,754,755],{"class":43},"})\n",[12,757,758],{},"这样用户在系统里切了主题，网站立刻跟上，不需要手动点。",[136,760,762],{"id":761},"防止闪烁fouc","防止闪烁（FOUC）",[12,764,765],{},"最烦人的 bug：页面先渲染成亮色，200ms 后闪成暗色。",[12,767,768,769,772,773,776],{},"原因是 CSS 变量在 JS 执行后才生效。解法是在 ",[23,770,771],{},"\u003Chead>"," 里插一段",[228,774,775],{},"同步执行","的脚本：",[16,778,782],{"className":779,"code":780,"language":781,"meta":21,"style":21},"language-html shiki shiki-themes github-light github-dark","\u003Cscript>\n  (function () {\n    try {\n      var m = localStorage.getItem('theme-mode')\n      var d = m === 'dark' || ((!m || m === 'system') &&\n        window.matchMedia('(prefers-color-scheme: dark)').matches)\n      document.documentElement.classList.toggle('dark', d)\n    } catch (e) {}\n  })()\n\u003C\u002Fscript>\n","html",[23,783,784,795,806,813,837,878,893,909,920,925],{"__ignoreMap":21},[26,785,786,789,792],{"class":28,"line":29},[26,787,788],{"class":43},"\u003C",[26,790,791],{"class":243},"script",[26,793,794],{"class":43},">\n",[26,796,797,800,803],{"class":28,"line":36},[26,798,799],{"class":43},"  (",[26,801,802],{"class":77},"function",[26,804,805],{"class":43}," () {\n",[26,807,808,811],{"class":28,"line":47},[26,809,810],{"class":77},"    try",[26,812,44],{"class":43},[26,814,815,818,821,824,827,830,832,835],{"class":28,"line":84},[26,816,817],{"class":77},"      var",[26,819,820],{"class":43}," m ",[26,822,823],{"class":77},"=",[26,825,826],{"class":43}," localStorage.",[26,828,829],{"class":39},"getItem",[26,831,60],{"class":43},[26,833,834],{"class":647},"'theme-mode'",[26,836,695],{"class":43},[26,838,839,841,844,846,848,850,852,855,858,861,864,867,869,871,873,875],{"class":28,"line":271},[26,840,817],{"class":77},[26,842,843],{"class":43}," d ",[26,845,823],{"class":77},[26,847,820],{"class":43},[26,849,731],{"class":77},[26,851,654],{"class":647},[26,853,854],{"class":77}," ||",[26,856,857],{"class":43}," ((",[26,859,860],{"class":77},"!",[26,862,863],{"class":43},"m ",[26,865,866],{"class":77},"||",[26,868,820],{"class":43},[26,870,731],{"class":77},[26,872,734],{"class":647},[26,874,66],{"class":43},[26,876,877],{"class":77},"&&\n",[26,879,880,883,886,888,890],{"class":28,"line":277},[26,881,882],{"class":43},"        window.",[26,884,885],{"class":39},"matchMedia",[26,887,60],{"class":43},[26,889,692],{"class":647},[26,891,892],{"class":43},").matches)\n",[26,894,895,898,901,903,906],{"class":28,"line":284},[26,896,897],{"class":43},"      document.documentElement.classList.",[26,899,900],{"class":39},"toggle",[26,902,60],{"class":43},[26,904,905],{"class":647},"'dark'",[26,907,908],{"class":43},", d)\n",[26,910,911,914,917],{"class":28,"line":301},[26,912,913],{"class":43},"    } ",[26,915,916],{"class":77},"catch",[26,918,919],{"class":43}," (e) {}\n",[26,921,922],{"class":28,"line":314},[26,923,924],{"class":43},"  })()\n",[26,926,927,930,932],{"class":28,"line":502},[26,928,929],{"class":43},"\u003C\u002F",[26,931,791],{"class":243},[26,933,794],{"class":43},[12,935,936],{},"关键点：",[587,938,939,946,961,971],{},[590,940,941,942,945],{},"必须是",[228,943,944],{},"内联","的（外部脚本要等网络）",[590,947,948,949,952,953,956,957,960],{},"必须",[228,950,951],{},"同步","（",[23,954,955],{},"defer","\u002F",[23,958,959],{},"async"," 都会晚）",[590,962,963,964,966,967,970],{},"必须在 ",[23,965,771],{}," 里（",[23,968,969],{},"\u003Cbody>"," 末尾太晚）",[590,972,973,974,977,978,981],{},"必须包 ",[23,975,976],{},"try\u002Fcatch","（隐私模式下 ",[23,979,980],{},"localStorage"," 会抛异常）",[136,983,984],{"id":984},"一句话",[986,987,988],"blockquote",{},[12,989,990],{},"暗色模式是第二套设计，不是第一套的滤镜。",[12,992,993],{},"它需要独立的对比度核算、独立的阴影策略、独立的强调色。省掉这些步骤，出来的东西就是\"能看但难受\"。",[995,996,997],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#57606A;--shiki-dark:#9AA4B0}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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 .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":21,"searchDepth":36,"depth":36,"links":999},[1000,1005,1006,1007,1008],{"id":138,"depth":36,"text":138,"children":1001},[1002,1003,1004],{"id":142,"depth":47,"text":143},{"id":204,"depth":47,"text":205},{"id":319,"depth":47,"text":320},{"id":412,"depth":36,"text":412},{"id":620,"depth":36,"text":620},{"id":761,"depth":36,"text":762},{"id":984,"depth":36,"text":984},"设计",null,"2025-07-25","反转配色是最省事的做法，也是最糟的做法。暗色模式需要重新设计对比度、阴影、饱和度和层级关系。",false,"md",{},"\u002Fposts\u002Fcac47918",{"title":5,"description":1012},"posts\u002Fdark-mode-design",[1020,1009,1021],"暗色模式","可访问性","tUnir7WkOl4ryiN5Pyo6zO2GzMlOTBcPjvLuVLskoPo",{"prev":1024,"next":1033},{"path":1025,"title":1026,"description":1027,"date":1028,"updated":1010,"tags":1029,"category":1009,"cover":1032,"draft":1013,"pinned":267,"featured":1013},"\u002Fposts\u002F90a855a1","排版比配色更决定气质","把同样一套颜色交给两个人排，出来的东西可以完全不同。这篇讲我怎么用字重、行距和留白，在不换颜色的前提下改变一个页面的脾气。","2025-10-28",[1030,1009,1031],"排版","CSS","\u002Fimages\u002Fcovers\u002Ftypography.png",{"path":1034,"title":1035,"description":1036,"date":1037,"updated":1010,"tags":1038,"category":1009,"cover":1010,"draft":1013,"pinned":1013,"featured":1013},"\u002Fposts\u002F1161d2f5","写给 375px 的界面","移动端不是缩小版桌面。底部 Tab 栏、可达的拇指区、iOS 安全区——这些细节决定了移动端体验的下限。","2025-06-02",[1039,1040,1041],"响应式","移动端","交互",[1043,1045,1053],{"path":1025,"title":1026,"description":1027,"date":1028,"updated":1010,"tags":1044,"category":1009,"cover":1032,"draft":1013,"pinned":267,"featured":1013},[1030,1009,1031],{"path":1046,"title":1047,"description":1048,"date":1049,"updated":1010,"tags":1050,"category":1009,"cover":1010,"draft":1013,"pinned":1013,"featured":1013},"\u002Fposts\u002F8628a5ad","别再用卡片装一切","卡片是个好东西，但它有明确的使用条件。当每一块内容都变成同样圆角同样阴影的卡片时，页面就失去了层级，读者也失去了方向。","2025-08-22",[1009,1051,1052],"布局","反思",{"path":1054,"title":1055,"description":1056,"date":1057,"updated":1010,"tags":1058,"category":1009,"cover":1061,"draft":1013,"pinned":1013,"featured":1013},"\u002Fposts\u002F85fffa25","测试文章乙：有封面但非推荐","这是首页改版验收用的测试文章乙，有封面但未标记 featured，只出现在卡片流，不进轮播。","2026-10-20",[1059,1060],"测试","首页改版","\u002Fimages\u002Fcovers\u002Fcharset.png",1794495070992]