/* ============================================================ WeiCity 显示偏好(用户可选主题色 + 字体大小)—— 2026-08-22 入口:设置页「显示」分区(pages/settings/[[section]].vue,composables/useDisplayPrefs.ts)。 持久化:localStorage wcAccent / wcFontSize;nuxt.config.ts 的 head 内联脚本在首帧前 把它们写成 / (与 phoenixTheme 同款防闪烁)。 ⚠ 为什么放 wwwroot 固定 URL 而不是 ClientApp 全局 CSS: ClientApp 的全局 CSS(main.css / wc-design-tokens.css)不进客户端 bundle,SSR inlineStyles 只内联「SSR DOM 匹配到的规则」;而 data-wc-accent / data-wc-fontsize 属性是【客户端】内联脚本 设置的,SSR HTML 上没有 ⇒ 这些属性选择器规则会被整条剪掉、永远到不了浏览器。 整张样式表加载无此问题(与 app.css / wc-homev2-global.css 同一通道)。 ⚠ 本文件由 nuxt.config.ts 的 wwwrootAsset() 挂内容哈希 ?v= —— 改动即换 URL, 规避 CF 边缘 4h 缓存(2026-07-25 品牌换色事故同款)。 ── 强调色标尺 --wc-ac-* ── 这是「用户强调色」的唯一定义处。各真相源(wc-design-tokens.css / main.css / app.css / wc-homev2-global.css / 组件局部影子变量)里的主色声明一律写成 var(--wc-ac-N, 原品牌 hex): 默认(无 data-wc-accent 或 terracotta)= 品牌陶土橙,逐值等于 wc-design-tokens.css 的 --wc-primary-N;选了其它主题色则整尺替换。 档位语义沿用品牌梯度的明暗分工:浅色主色=600 / 深色主色=500 / 深色 hover=400 / 浅色 pressed=700 / label 深 800 浅 200 / contrast=900;rgb-500/600 是给 rgba() 用的裸三元组。 ⚠ 每个 accent 的 600 档都验过白字对比 ≥4.5:1(实底按钮 AA 线),别换成更浅的档。 ⚠ 新增 accent:这里加一个 html[data-wc-accent] 块 + useDisplayPrefs.ts 的 WC_ACCENTS + wcNaiveTheme.ts 的 WC_ACCENT_NAIVE + nuxt.config.ts 内联脚本的白名单,四处同步。 ⚠ 语义色(danger 红 / warning 琥珀 / success 绿)与品牌装饰渐变(AI 按钮、--wc-brand-grad-b) 刻意不随用户强调色走,保持品牌/语义稳定。 ============================================================ */ :root { /* 陶土橙(品牌默认;= wc-design-tokens.css 的 --wc-primary-N) */ --wc-ac-50: #fdf5f0; --wc-ac-100: #f9e8dd; --wc-ac-200: #f2d0bc; --wc-ac-300: #e9b295; --wc-ac-400: #e09070; --wc-ac-500: #d97757; --wc-ac-600: #b95c3d; --wc-ac-700: #9c4a2f; --wc-ac-800: #7d3b26; --wc-ac-900: #5f2d1e; --wc-ac-rgb-500: 217, 119, 87; --wc-ac-rgb-600: 185, 92, 61; } /* 海蓝(600 vs 白 5.2:1) */ html[data-wc-accent="blue"] { --wc-ac-50: #eff6ff; --wc-ac-100: #dbeafe; --wc-ac-200: #bfdbfe; --wc-ac-300: #93c5fd; --wc-ac-400: #60a5fa; --wc-ac-500: #3b82f6; --wc-ac-600: #2563eb; --wc-ac-700: #1d4ed8; --wc-ac-800: #1e40af; --wc-ac-900: #1e3a8a; --wc-ac-rgb-500: 59, 130, 246; --wc-ac-rgb-600: 37, 99, 235; } /* 翠绿(标尺整体下移一档保浅色对比:600 档取 emerald-700,vs 白 5.5:1) */ html[data-wc-accent="green"] { --wc-ac-50: #ecfdf5; --wc-ac-100: #d1fae5; --wc-ac-200: #a7f3d0; --wc-ac-300: #6ee7b7; --wc-ac-400: #34d399; --wc-ac-500: #10b981; --wc-ac-600: #047857; --wc-ac-700: #065f46; --wc-ac-800: #064e3b; --wc-ac-900: #022c22; --wc-ac-rgb-500: 16, 185, 129; --wc-ac-rgb-600: 4, 120, 87; } /* 青蓝(cyan 系;2026-08-23 由 teal 换 cyan —— teal 与翠绿色相只差 13° 肉眼难分, cyan 与绿/蓝各差约 29°。键名仍叫 teal(localStorage 已存偏好不失效),只换色值。 600 档下移取 cyan-700,vs 白 5.4:1) */ html[data-wc-accent="teal"] { --wc-ac-50: #ecfeff; --wc-ac-100: #cffafe; --wc-ac-200: #a5f3fc; --wc-ac-300: #67e8f9; --wc-ac-400: #22d3ee; --wc-ac-500: #06b6d4; --wc-ac-600: #0e7490; --wc-ac-700: #155e75; --wc-ac-800: #164e63; --wc-ac-900: #083344; --wc-ac-rgb-500: 6, 182, 212; --wc-ac-rgb-600: 14, 116, 144; } /* 紫罗兰(600 vs 白 5.7:1) */ html[data-wc-accent="purple"] { --wc-ac-50: #f5f3ff; --wc-ac-100: #ede9fe; --wc-ac-200: #ddd6fe; --wc-ac-300: #c4b5fd; --wc-ac-400: #a78bfa; --wc-ac-500: #8b5cf6; --wc-ac-600: #7c3aed; --wc-ac-700: #6d28d9; --wc-ac-800: #5b21b6; --wc-ac-900: #4c1d95; --wc-ac-rgb-500: 139, 92, 246; --wc-ac-rgb-600: 124, 58, 237; } /* 玫粉(600 vs 白 4.6:1;⚠ 与 danger 纯红 #dc2626/#ef4444 同屏可分辨,别把 600 再调红) */ html[data-wc-accent="pink"] { --wc-ac-50: #fdf2f8; --wc-ac-100: #fce7f3; --wc-ac-200: #fbcfe8; --wc-ac-300: #f9a8d4; --wc-ac-400: #f472b6; --wc-ac-500: #ec4899; --wc-ac-600: #db2777; --wc-ac-700: #be185d; --wc-ac-800: #9d174d; --wc-ac-900: #831843; --wc-ac-rgb-500: 236, 72, 153; --wc-ac-rgb-600: 219, 39, 119; } /* ── 字体大小 5 档 ── 站内字号几乎全 rem(main.css 254 处 rem vs 6 处 px)而布局宽度全 px ⇒ 改根字号 = 只缩放 文字、不动布局(与 X 同一机制)。默认无属性 = 浏览器默认 100%(16px)。 富文本内容同样跟随:阅读侧全 rem;编辑器 .editorjs-container 与用户行内字号 ce-size-* 已由 px 改 rem(wwwroot/lib/editorjs/editorjs.css / ClientApp/assets/css/editorjs-tools.css)。 */ html[data-wc-fontsize="xs"] { font-size: 87.5%; } /* 14px */ html[data-wc-fontsize="s"] { font-size: 93.75%; } /* 15px */ html[data-wc-fontsize="l"] { font-size: 106.25%; } /* 17px */ html[data-wc-fontsize="xl"] { font-size: 112.5%; } /* 18px */