TREK 外观设置完全指南主题、可读性与仪表盘组件定制【免费下载链接】TREKA self-hosted travel/trip planner with real-time collaboration, interactive maps, PWA support, SSO, budgets, packing lists, and more.项目地址: https://gitcode.com/GitHub_Trending/nomad22/TREK本文是一份面向 TREK自托管旅行规划器用户的外观Appearance设置深度指南。它讲解如何通过Settings → Appearance标签页调节 TREK 的明暗模式、强调色方案、可读性选项透明度、减少动画、密度、文字大小以及桌面端与移动端各自独立的仪表盘组件布局同时结合仓库源码揭示这些设置从点击开关到写进浏览器 DOM再到跨设备同步的完整实现链路。读完本文你将能够精确调校 TREK 的观感并理解其底层配置契约shared/src/appearance/appearance.schema.ts与外观写入机制client/src/theme/applyAppearance.ts的工作原理。在哪里找到它打开Settings设置选择Appearance外观标签页即可进入全部外观选项。界面顶部导航栏依次是 My Trips、Vacay、Atlas、Collections、Journey 等主功能入口左侧设置菜单垂直排列 General、Map、Notifications、Integrations、Plugins、Offline、Account、About 等条目Appearance正是其中独立的一项。该页面有两个关键交互特性即时预览任何改动都会立刻反映在界面上无需保存或刷新页面自动保存并跨端同步改动会在片刻之后保存到你的账户因此会跟随你登录的每一台浏览器桌面、笔记本、手机一致生效一键还原页面底部提供Reset to defaults恢复默认按钮单击即可把本页所有设置一次性还原为默认值。这些都是个人设置——不需要任何权限也没有管理员开关去限制它们改动只影响你自己的账户见下文 权限 一节。从实现角度看这一交互由 client/src/components/Settings/AppearanceSettingsTab.tsx 承载本地状态先即时预览调用applyAppearance写 DOM再通过 350ms 防抖定时器调用updateSetting(appearance, next)持久化到服务端组件卸载时清理未落盘的定时器避免丢失最后的调整。整个配置以一个 JSON blob的形式存储在/api/settings的appearance键下。主题Theme颜色模式Color mode三个分段按钮Light浅色、Dark深色和Auto自动。Auto会跟随操作系统的浅色/深色偏好。在源码层面dark_mode设置允许light | dark | auto以及布尔值兼容真正的明暗判定集中在 client/src/theme/applyAppearance.ts 的resolveDarkauto时读取window.matchMedia((prefers-color-scheme: dark)).matches否则以true/dark视为深色。判定结果只做一件事在html根元素上切换.dark类。组件本身从不根据配置自行计算颜色它们只读取 CSS 变量token.dark类就是整个主题系统的单一事实来源。颜色方案Color scheme一组强调色方案网格每个方案带有一个颜色圆点圆点颜色会随你当前的明暗模式切换预览Default—— TREK 的单色monochrome外观即默认观感High contrast—— 提高文字与边框对比度Indigo靛蓝、Teal青绿、Rose玫红、Amber琥珀、Violet紫罗兰—— 五种彩色强调色Custom—— 自定义强调色见下节。方案注册表位于 client/src/theme/schemes.ts其中APPEARANCE_SCHEMES记录了每个预设方案在浅色/深色模式下用于色板圆点的代表色例如 Indigo 在浅色下是#4f46e5、深色下是#6366f1Amber 对应#d97706/#f59e0b。方案的中英文标签来自 i18nsettings.appearance.scheme.id源码中同时内置了兜底文案。与颜色模式不同颜色方案不由.dark类承载而是通过data-scheme属性写进htmlapplyAppearance仅在非 default 方案下设置root.setAttribute(data-scheme, eff.schemeId)default 方案会移除该属性保持单色强调。真正的 token 值全部定义在 client/src/index.css 的[data-scheme...]块中第 635 行起的 Color schemes 区域例如[data-schemeindigo]/.dark[data-schemeindigo]分别定义浅色、深色下的 indigo 强调色[data-schemehighContrast]专门提升中性文本与边框的对比此外CSS 还对bg-slate-900、bg-indigo-500、text-indigo-400等 Tailwind 工具类做了方案感知的覆写保证旧组件在新方案下也不跑色。自定义强调色Custom accent选择Custom后会展开Custom accent选择器支持两种设置方式点击10 个预设色块之一将浅色与深色强调色同时设为该颜色分别使用Light和Dark两个颜色输入框原生 color picker为两种模式各自挑选不同的强调色。10 个预设色定义在 client/src/theme/schemes.ts 的CUSTOM_ACCENT_PRESETS中#4f46e5靛蓝、#0d9488青绿、#e11d48玫红、#d97706琥珀、#7c3aed紫罗兰、#2563eb蓝、#db2777粉、#059669绿、#ea580c橙、#0891b2蓝绿。在颜色输入框旁边有一个实时对比度徽章它会把你当前看到的强调色与白色做对比并显示比率Good contrastn.n:1—— 比率满足 WCAG AA 正常文本要求4.5:1 或更高Low contrastn.n:1—— 低于 4.5:1白色文字放在该强调色上会难以阅读。需要强调的是徽章仅作建议TREK 仍允许你应用低对比度的强调色是否使用由你决定。对比度徽章并非拍脑袋判定而是在客户端按 WCAG 相对亮度公式实时计算的AppearanceSettingsTab.tsx 内的relLuminance对 3 位或 6 位十六进制色做 sRGB 线性化、加权求和与contrastRatio(L10.05)/(L20.05)完整实现了规范只有当比率 4.5时徽章才显示为 Good contrast绿色否则显示为 Low contrast琥珀色。自定义强调色的落地也颇具匠心applyAppearance在schemeId custom时向根元素写入 4 个内联 CSS 变量——--accent-custom-light/--accent-custom-dark两种模式下的强调色--accent-custom-text-light/--accent-custom-text-dark自动推导出的强调色上的可读文字色近黑#111827或纯白推导依据同样是 WCAG 相对亮度accentTextFor以 0.45 亮度为界。随后 client/src/index.css 的[data-schemecustom]规则把--accent、--accent-text、--accent-hover、--accent-subtle全部重定向到这些自定义变量从而让全站组件无感知地切换到你的专属强调色。可读性Readability整个区块带有Experimental实验性徽章表示这些能力仍处于持续打磨阶段但其行为与接口已经在当前仓库中完整实现。Transparency透明度——Glassy translucent surfaces. Turn off for solid, higher-contrast backgrounds.玻璃质感的半透明表面关闭后变为实色、更高对比度的背景。Reduce motion减少动画——Minimize animations and transitions.最小化动画与过渡。Density密度——Comfortable舒适或Compact紧凑Compact tightens spacing and padding for a denser layout that fits more on screen.紧凑模式收紧间距与内边距让同一屏容纳更多内容。这三个开关在 DOM 层的表达同样集中在applyAppearance以及 client/public/theme-boot.js 的预渲染镜像逻辑关闭透明度 → 根元素添加data-no-transparency属性index.css 随之将trek-dash、地图弹窗、Leaflet 缩放控件、tooltip 等表面的半透明背景替换为实色--bg-card并统一收紧所有backdrop-filter开启减少动画 → 添加data-reduce-motion属性它叠加在操作系统级的prefers-reduced-motion规则之上由用户显式覆盖紧凑密度 → 添加data-densitycompactCSS 针对.form-input等元素收紧 padding如padding: 5px 11px。文字大小Text size文字缩放工作在四个分级轴 一个全局主控上。每条滑块从80%到160%以5%为步进右侧实时显示当前百分比Everything全局—— 叠加在每个分级数值之上的整体缩放Large——Headings, big numbers标题、大数字Medium——Sub-headings副标题Normal——Place names, descriptions地名、描述Small——Addresses, labels地址、标签。四条分级行都会渲染该级别的实时样例Large heading、Medium subtitle、Normal body text、Small caption / address拖动滑块时样例文字立即随之变化所见即所得。源码层面缩放边界由共享契约约束APPEARANCE_SCALE_MIN 0.8、APPEARANCE_SCALE_MAX 1.6见 shared/src/appearance/appearance.schema.ts滑块step{0.05}且normalizeAppearance会对任何越界值做钳制clamp保证布局永远不会被极端值撑爆。每个分级轴是一个乘数typeScale.title/subtitle/body/caption最终写入 DOM 的 CSS 变量为--fs-scale-title fontScale × typeScale.title--fs-scale-subtitle fontScale × typeScale.subtitle--fs-scale-body fontScale × typeScale.body--fs-scale-caption fontScale × typeScale.caption其中fontScale全局在等于 1 时移除变量保持默认否则还会同步调整根元素的font-size百分比让基于 rem 的导航、菜单等文本一并缩放setScaleVar对每个变量遵循同样的等于 1 即移除原则确保默认状态下渲染结果与 TREK 历史上的外观逐字节一致。仪表盘组件Dashboard widgets独立地在桌面端与移动端显示或隐藏仪表盘组件。需要特别理解的是它不会检测你当前使用的设备——它设置的是两套互不影响的布局仪表盘按渲染时的视口选取匹配的那一套。两套布局都保存在你的账户上所以在笔记本上做的改动也会改变你手机上的展示内容。桌面端DesktopHero 下方Atlas / countries国家足迹、Trips total行程总数、Days traveled出行天数、Distance flown飞行里程右侧边栏一个总开关The whole right column. Turn off and the dashboard centers.——整个右列关闭后仪表盘内容居中其下嵌套四个子组件开关Currency货币、Collections收藏、Timezones时区、Upcoming reservations即将到来的预订。关闭总开关后嵌套开关会变为灰色禁用但它们的独立状态会被记住等你重新打开总开关时恢复原样。移动端MobileHero 下方Trips total、Days traveled页面底部Currency、Collections、Timezones、Upcoming reservations。隐藏某个组件只影响你自己的仪表盘。依赖插件的组件例如Collections还需要管理员先启用对应 addon——参见 Dashboard-Widgets 与 Admin-Addons。从实现看组件可见性以dashboard.desktop/dashboard.mobile两组布尔标志存储在同一个外观配置中appearance.schema.ts 定义了全部标志与全开默认值桌面端含sidebar主开关、atlas、tripsTotal、daysTraveled、distanceFlown、currency、collections、timezones、upcomingReservations移动端去掉sidebar、atlas、distanceFlown。消费端是 client/src/pages/DashboardPage.tsx它从设置 store 读取appearance并经normalizeAppearance归一化后取出dashboard据此做条件渲染与列布局回流。有两个值得注意的实现细节右侧边栏的显隐判定为(isMobile || dashCfg.desktop.sidebar) (任意一个侧栏组件可见或存在侧栏插件)即主开关关闭后侧栏整体隐藏、内容居中Collections 是双重门控既需要管理员启用 Collections addon又需要你自己的collections组件开关打开两者同时满足才会渲染。配置背后的健壮性设计外观配置并不仅仅是前端本地状态。作为一份前后端共享的契约它由 shared/src/appearance/appearance.schema.ts 以 Zod schema 统一定义服务端在写入时校验、客户端在写 DOM 前归一化。该模块的设计规则值得留意默认值逐字节复现现状DEFAULT_APPEARANCE精确等于 TREK 引入此功能之前的外观default 方案、透明度开、所有缩放为 1、舒适密度、全部组件可见因此没有appearance键或该键损坏的用户与老版本用户完全无法区分永不抛错每个字段都带有.catch.default兜底normalizeAppearance对任何输入非对象、残缺、格式错误、未来版本都能安全降级到默认坏配置永远到不了 DOM未知字段被剥离无法识别的version会塌缩到已知默认避免错误应用未来的格式。与之配套的还有两处关键协同防 FOUC 的预渲染启动脚本client/public/theme-boot.js它以经典的渲染阻塞脚本非 module加载在head中在首次绘制前读取localStorage中由applyAppearance写入的紧凑快照键名trek_appearance含版本号v:1并逐字段复现明暗、方案、透明度、密度、减少动画、自定义强调色与文字缩放——从而消灭页面加载瞬间的默认主题闪烁。该脚本必须与applyAppearance的快照结构保持同步源码注释对此有明确约定。对/shared/与/public/路径它强制使用中性默认外观。登出清理clearAppearanceSnapshot()会在登出时移除本机快照避免共用浏览器上下一个用户瞬间闪到前一个用户的主题。该写入失败如隐私模式会被静默吞掉只损失 FOUC 优化而不影响功能。权限无。本标签页上的每一项设置都只作用于你自己的账户不涉及权限检查、管理员开关或团队共享影响——它是纯个人的观感偏好。延伸阅读Display-Settings —— 显示与布局相关设置User-Settings —— 用户账户设置总览Dashboard-Widgets —— 仪表盘各组件的详细说明My-Trips-Dashboard —— 仪表盘整体使用指南Map-Settings —— 地图相关设置【免费下载链接】TREKA self-hosted travel/trip planner with real-time collaboration, interactive maps, PWA support, SSO, budgets, packing lists, and more.项目地址: https://gitcode.com/GitHub_Trending/nomad22/TREK创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 TREK 外观设置完全指南：主题、可读性与仪表盘组件定制
TREK 外观设置完全指南主题、可读性与仪表盘组件定制【免费下载链接】TREKA self-hosted travel/trip planner with real-time collaboration, interactive maps, PWA support, SSO, budgets, packing lists, and more.项目地址: https://gitcode.com/GitHub_Trending/nomad22/TREK本文是一份面向 TREK自托管旅行规划器用户的外观Appearance设置深度指南。它讲解如何通过Settings → Appearance标签页调节 TREK 的明暗模式、强调色方案、可读性选项透明度、减少动画、密度、文字大小以及桌面端与移动端各自独立的仪表盘组件布局同时结合仓库源码揭示这些设置从点击开关到写进浏览器 DOM再到跨设备同步的完整实现链路。读完本文你将能够精确调校 TREK 的观感并理解其底层配置契约shared/src/appearance/appearance.schema.ts与外观写入机制client/src/theme/applyAppearance.ts的工作原理。在哪里找到它打开Settings设置选择Appearance外观标签页即可进入全部外观选项。界面顶部导航栏依次是 My Trips、Vacay、Atlas、Collections、Journey 等主功能入口左侧设置菜单垂直排列 General、Map、Notifications、Integrations、Plugins、Offline、Account、About 等条目Appearance正是其中独立的一项。该页面有两个关键交互特性即时预览任何改动都会立刻反映在界面上无需保存或刷新页面自动保存并跨端同步改动会在片刻之后保存到你的账户因此会跟随你登录的每一台浏览器桌面、笔记本、手机一致生效一键还原页面底部提供Reset to defaults恢复默认按钮单击即可把本页所有设置一次性还原为默认值。这些都是个人设置——不需要任何权限也没有管理员开关去限制它们改动只影响你自己的账户见下文 权限 一节。从实现角度看这一交互由 client/src/components/Settings/AppearanceSettingsTab.tsx 承载本地状态先即时预览调用applyAppearance写 DOM再通过 350ms 防抖定时器调用updateSetting(appearance, next)持久化到服务端组件卸载时清理未落盘的定时器避免丢失最后的调整。整个配置以一个 JSON blob的形式存储在/api/settings的appearance键下。主题Theme颜色模式Color mode三个分段按钮Light浅色、Dark深色和Auto自动。Auto会跟随操作系统的浅色/深色偏好。在源码层面dark_mode设置允许light | dark | auto以及布尔值兼容真正的明暗判定集中在 client/src/theme/applyAppearance.ts 的resolveDarkauto时读取window.matchMedia((prefers-color-scheme: dark)).matches否则以true/dark视为深色。判定结果只做一件事在html根元素上切换.dark类。组件本身从不根据配置自行计算颜色它们只读取 CSS 变量token.dark类就是整个主题系统的单一事实来源。颜色方案Color scheme一组强调色方案网格每个方案带有一个颜色圆点圆点颜色会随你当前的明暗模式切换预览Default—— TREK 的单色monochrome外观即默认观感High contrast—— 提高文字与边框对比度Indigo靛蓝、Teal青绿、Rose玫红、Amber琥珀、Violet紫罗兰—— 五种彩色强调色Custom—— 自定义强调色见下节。方案注册表位于 client/src/theme/schemes.ts其中APPEARANCE_SCHEMES记录了每个预设方案在浅色/深色模式下用于色板圆点的代表色例如 Indigo 在浅色下是#4f46e5、深色下是#6366f1Amber 对应#d97706/#f59e0b。方案的中英文标签来自 i18nsettings.appearance.scheme.id源码中同时内置了兜底文案。与颜色模式不同颜色方案不由.dark类承载而是通过data-scheme属性写进htmlapplyAppearance仅在非 default 方案下设置root.setAttribute(data-scheme, eff.schemeId)default 方案会移除该属性保持单色强调。真正的 token 值全部定义在 client/src/index.css 的[data-scheme...]块中第 635 行起的 Color schemes 区域例如[data-schemeindigo]/.dark[data-schemeindigo]分别定义浅色、深色下的 indigo 强调色[data-schemehighContrast]专门提升中性文本与边框的对比此外CSS 还对bg-slate-900、bg-indigo-500、text-indigo-400等 Tailwind 工具类做了方案感知的覆写保证旧组件在新方案下也不跑色。自定义强调色Custom accent选择Custom后会展开Custom accent选择器支持两种设置方式点击10 个预设色块之一将浅色与深色强调色同时设为该颜色分别使用Light和Dark两个颜色输入框原生 color picker为两种模式各自挑选不同的强调色。10 个预设色定义在 client/src/theme/schemes.ts 的CUSTOM_ACCENT_PRESETS中#4f46e5靛蓝、#0d9488青绿、#e11d48玫红、#d97706琥珀、#7c3aed紫罗兰、#2563eb蓝、#db2777粉、#059669绿、#ea580c橙、#0891b2蓝绿。在颜色输入框旁边有一个实时对比度徽章它会把你当前看到的强调色与白色做对比并显示比率Good contrastn.n:1—— 比率满足 WCAG AA 正常文本要求4.5:1 或更高Low contrastn.n:1—— 低于 4.5:1白色文字放在该强调色上会难以阅读。需要强调的是徽章仅作建议TREK 仍允许你应用低对比度的强调色是否使用由你决定。对比度徽章并非拍脑袋判定而是在客户端按 WCAG 相对亮度公式实时计算的AppearanceSettingsTab.tsx 内的relLuminance对 3 位或 6 位十六进制色做 sRGB 线性化、加权求和与contrastRatio(L10.05)/(L20.05)完整实现了规范只有当比率 4.5时徽章才显示为 Good contrast绿色否则显示为 Low contrast琥珀色。自定义强调色的落地也颇具匠心applyAppearance在schemeId custom时向根元素写入 4 个内联 CSS 变量——--accent-custom-light/--accent-custom-dark两种模式下的强调色--accent-custom-text-light/--accent-custom-text-dark自动推导出的强调色上的可读文字色近黑#111827或纯白推导依据同样是 WCAG 相对亮度accentTextFor以 0.45 亮度为界。随后 client/src/index.css 的[data-schemecustom]规则把--accent、--accent-text、--accent-hover、--accent-subtle全部重定向到这些自定义变量从而让全站组件无感知地切换到你的专属强调色。可读性Readability整个区块带有Experimental实验性徽章表示这些能力仍处于持续打磨阶段但其行为与接口已经在当前仓库中完整实现。Transparency透明度——Glassy translucent surfaces. Turn off for solid, higher-contrast backgrounds.玻璃质感的半透明表面关闭后变为实色、更高对比度的背景。Reduce motion减少动画——Minimize animations and transitions.最小化动画与过渡。Density密度——Comfortable舒适或Compact紧凑Compact tightens spacing and padding for a denser layout that fits more on screen.紧凑模式收紧间距与内边距让同一屏容纳更多内容。这三个开关在 DOM 层的表达同样集中在applyAppearance以及 client/public/theme-boot.js 的预渲染镜像逻辑关闭透明度 → 根元素添加data-no-transparency属性index.css 随之将trek-dash、地图弹窗、Leaflet 缩放控件、tooltip 等表面的半透明背景替换为实色--bg-card并统一收紧所有backdrop-filter开启减少动画 → 添加data-reduce-motion属性它叠加在操作系统级的prefers-reduced-motion规则之上由用户显式覆盖紧凑密度 → 添加data-densitycompactCSS 针对.form-input等元素收紧 padding如padding: 5px 11px。文字大小Text size文字缩放工作在四个分级轴 一个全局主控上。每条滑块从80%到160%以5%为步进右侧实时显示当前百分比Everything全局—— 叠加在每个分级数值之上的整体缩放Large——Headings, big numbers标题、大数字Medium——Sub-headings副标题Normal——Place names, descriptions地名、描述Small——Addresses, labels地址、标签。四条分级行都会渲染该级别的实时样例Large heading、Medium subtitle、Normal body text、Small caption / address拖动滑块时样例文字立即随之变化所见即所得。源码层面缩放边界由共享契约约束APPEARANCE_SCALE_MIN 0.8、APPEARANCE_SCALE_MAX 1.6见 shared/src/appearance/appearance.schema.ts滑块step{0.05}且normalizeAppearance会对任何越界值做钳制clamp保证布局永远不会被极端值撑爆。每个分级轴是一个乘数typeScale.title/subtitle/body/caption最终写入 DOM 的 CSS 变量为--fs-scale-title fontScale × typeScale.title--fs-scale-subtitle fontScale × typeScale.subtitle--fs-scale-body fontScale × typeScale.body--fs-scale-caption fontScale × typeScale.caption其中fontScale全局在等于 1 时移除变量保持默认否则还会同步调整根元素的font-size百分比让基于 rem 的导航、菜单等文本一并缩放setScaleVar对每个变量遵循同样的等于 1 即移除原则确保默认状态下渲染结果与 TREK 历史上的外观逐字节一致。仪表盘组件Dashboard widgets独立地在桌面端与移动端显示或隐藏仪表盘组件。需要特别理解的是它不会检测你当前使用的设备——它设置的是两套互不影响的布局仪表盘按渲染时的视口选取匹配的那一套。两套布局都保存在你的账户上所以在笔记本上做的改动也会改变你手机上的展示内容。桌面端DesktopHero 下方Atlas / countries国家足迹、Trips total行程总数、Days traveled出行天数、Distance flown飞行里程右侧边栏一个总开关The whole right column. Turn off and the dashboard centers.——整个右列关闭后仪表盘内容居中其下嵌套四个子组件开关Currency货币、Collections收藏、Timezones时区、Upcoming reservations即将到来的预订。关闭总开关后嵌套开关会变为灰色禁用但它们的独立状态会被记住等你重新打开总开关时恢复原样。移动端MobileHero 下方Trips total、Days traveled页面底部Currency、Collections、Timezones、Upcoming reservations。隐藏某个组件只影响你自己的仪表盘。依赖插件的组件例如Collections还需要管理员先启用对应 addon——参见 Dashboard-Widgets 与 Admin-Addons。从实现看组件可见性以dashboard.desktop/dashboard.mobile两组布尔标志存储在同一个外观配置中appearance.schema.ts 定义了全部标志与全开默认值桌面端含sidebar主开关、atlas、tripsTotal、daysTraveled、distanceFlown、currency、collections、timezones、upcomingReservations移动端去掉sidebar、atlas、distanceFlown。消费端是 client/src/pages/DashboardPage.tsx它从设置 store 读取appearance并经normalizeAppearance归一化后取出dashboard据此做条件渲染与列布局回流。有两个值得注意的实现细节右侧边栏的显隐判定为(isMobile || dashCfg.desktop.sidebar) (任意一个侧栏组件可见或存在侧栏插件)即主开关关闭后侧栏整体隐藏、内容居中Collections 是双重门控既需要管理员启用 Collections addon又需要你自己的collections组件开关打开两者同时满足才会渲染。配置背后的健壮性设计外观配置并不仅仅是前端本地状态。作为一份前后端共享的契约它由 shared/src/appearance/appearance.schema.ts 以 Zod schema 统一定义服务端在写入时校验、客户端在写 DOM 前归一化。该模块的设计规则值得留意默认值逐字节复现现状DEFAULT_APPEARANCE精确等于 TREK 引入此功能之前的外观default 方案、透明度开、所有缩放为 1、舒适密度、全部组件可见因此没有appearance键或该键损坏的用户与老版本用户完全无法区分永不抛错每个字段都带有.catch.default兜底normalizeAppearance对任何输入非对象、残缺、格式错误、未来版本都能安全降级到默认坏配置永远到不了 DOM未知字段被剥离无法识别的version会塌缩到已知默认避免错误应用未来的格式。与之配套的还有两处关键协同防 FOUC 的预渲染启动脚本client/public/theme-boot.js它以经典的渲染阻塞脚本非 module加载在head中在首次绘制前读取localStorage中由applyAppearance写入的紧凑快照键名trek_appearance含版本号v:1并逐字段复现明暗、方案、透明度、密度、减少动画、自定义强调色与文字缩放——从而消灭页面加载瞬间的默认主题闪烁。该脚本必须与applyAppearance的快照结构保持同步源码注释对此有明确约定。对/shared/与/public/路径它强制使用中性默认外观。登出清理clearAppearanceSnapshot()会在登出时移除本机快照避免共用浏览器上下一个用户瞬间闪到前一个用户的主题。该写入失败如隐私模式会被静默吞掉只损失 FOUC 优化而不影响功能。权限无。本标签页上的每一项设置都只作用于你自己的账户不涉及权限检查、管理员开关或团队共享影响——它是纯个人的观感偏好。延伸阅读Display-Settings —— 显示与布局相关设置User-Settings —— 用户账户设置总览Dashboard-Widgets —— 仪表盘各组件的详细说明My-Trips-Dashboard —— 仪表盘整体使用指南Map-Settings —— 地图相关设置【免费下载链接】TREKA self-hosted travel/trip planner with real-time collaboration, interactive maps, PWA support, SSO, budgets, packing lists, and more.项目地址: https://gitcode.com/GitHub_Trending/nomad22/TREK创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考