HarmonyOS 主题切换实战让深浅模式、强调色和显示密度真正联动一、先看页面这不是一个“换颜色”的按钮很多主题切换示例只放一个开关打开以后把背景从白色换成黑色再配上一句“深色模式已开启”。这样的演示能说明开关会变化却很难说明一个主题系统究竟影响了哪些界面元素。一个更接近实际使用的主题设置页至少要同时处理整体背景、标题区域、卡片、文字、选择状态以及预览内容。如果这些元素只改了一部分用户看到的就不是一个完整主题而是几块颜色互相冲突的区域。这个页面把主题体验拆成三个相互独立、又能同时作用于预览的维度。第一维是浅色模式和深色模式负责改变页面的整体明暗关系第二维是强调色提供蓝色、紫色、绿色和橙色四个圆形选项第三维是显示密度提供紧凑、默认、宽松三个按钮。用户不需要离开当前页面就可以连续调整三项设置并在下方预览区域看到它们共同形成的结果。页面的价值正在于这种联动关系。深浅模式不是只改变一个背景强调色也不是只改变一个圆点显示密度更不是一个摆设按钮。每次点击都能看到选中标记、文字颜色、卡片颜色、按钮颜色和预览区域同步变化。对于刚接触 ArkUI 声明式界面的开发者来说这种页面比单独讲一个 Toggle 或 Button 更容易理解“状态改变之后界面应该如何整体响应”。初始画面使用浅色主题标题区域带有浅蓝色背景页面主体是浅灰底色设置内容以白色圆角卡片呈现。此时强调色默认选中蓝色显示密度默认选中“紧凑”预览区域显示“当前是浅色主题强调色与显示密度已应用”。这些初始值共同构成了用户第一次打开页面时看到的基线。二、三个设置维度分别解决什么问题2.1 深浅模式解决整体视觉明暗深浅模式是页面最明显的一项设置。浅色模式适合明亮环境和长时间阅读深色模式则通过降低大面积亮色背景的存在感让页面呈现更沉稳的视觉效果。在这个页面中切换开关后顶部标题区域、页面底色、设置卡片、标题文字、说明文字、按钮文字以及预览卡片都会重新选择颜色。浅色模式下页面外层使用浅灰色背景标题区域使用浅蓝色卡片使用白色主标题接近深蓝灰色说明文字使用中灰色。这样的组合能够把标题、设置区和预览区区分开来。深色模式下页面外层和标题区域转为深色卡片采用略浅的深灰色主标题转为白色说明文字转为浅灰色。深色模式并不是把所有颜色简单反转而是保留层次外层最深卡片稍亮文字用高对比度颜色显示。这种处理说明主题开关改变的是一组视觉规则而不是一个独立控件。开关本身只负责表达当前是否处于深色状态真正的主题变化体现在多个组件共同读取同一状态后得到的颜色结果。用户点击开关时顶部标题中的模式文字也会从“浅色模式”切换成“深色模式”副说明保持“切换页面的整体视觉主题”让用户知道开关改变的是整体页面而不是单独一块区域。2.2 强调色解决重点元素的识别四个强调色圆点分别代表蓝色、紫色、绿色和橙色。它们的作用不是改变整个页面的背景而是为选中状态和操作重点提供统一的视觉标识。用户点击某个圆点后该圆点会出现勾选符号并且边框宽度发生变化显示密度区域中当前选中的按钮也会使用同一个强调色作为背景。例如选择紫色后紫色圆点内部出现勾选符号圆点周围出现选中边框显示密度中被选中的按钮也转为紫色按钮上的文字保持白色。选择绿色或橙色时同样的规则继续成立。这样一来用户不仅能从勾选符号判断选择结果还能从下方按钮的颜色判断当前主题的强调色。这种跨区域的一致性比只在色块上加一条边框更容易让人理解。四个颜色的排列也很直观色块大小一致圆角接近圆形色块之间有固定间隔选中与未选中主要通过勾选符号和边框区分。未选中的色块不显示勾选符号选中的色块才在中心显示白色勾号。浅色模式下选中边框使用深色深色模式下选中边框使用白色以保证边框在两种背景环境里都能看清。2.3 显示密度解决内容疏密选择显示密度区域有三个并列按钮文字分别是“紧凑”“默认”“宽松”。它们表达的是同一块预览内容在空间占用上的差异。紧凑模式对应较小的内边距默认模式使用中等内边距宽松模式使用更大的内边距。点击按钮后下方预览文字所在卡片会立即改变上下左右留白用户可以直接看到内容从紧凑到舒展的变化。这里的密度并不会改变页面全部卡片的间距也不会改变顶部标题和设置区域的布局。它只作用于预览区域中的那条状态说明因此页面可以把“显示密度”这个概念讲清楚而不至于让所有控件在点击后突然跳动。当前选中按钮采用强调色背景另外两个按钮采用浅灰或深灰背景按钮文字颜色也随着选中状态和深浅模式变化避免深色主题下出现黑字压在深灰底上的问题。三、从初始画面理解页面状态第一次进入页面时主题处于浅色模式。标题文字是“主题切换”下方设置卡片首先展示浅色模式开关其右侧开关处于关闭状态。卡片中的第一行文字是“浅色模式”下面的说明告诉用户这个控件会切换页面的整体视觉主题。因为页面使用的是浅色模式标题和说明文字都采用深色与中灰色搭配卡片背景呈白色。接着往下是“强调色”卡片。四个圆形色块横向排列第一颗蓝色色块默认选中中心可以看到勾选符号并且外侧有选中边框。其余三个色块没有勾选符号。再往下是“显示密度”卡片三个按钮横向排列第一项“紧凑”使用蓝色背景和白色文字另外两项使用浅灰背景和深色文字。预览区域位于设置卡片之后。标题写着“预览区域”下面是一条带圆角的状态文本。初始文本同时说明三个结果当前是浅色主题强调色与显示密度已经应用。这里没有单独展示“当前强调色是蓝色”或“当前密度是紧凑”而是用一句概括性的文本说明页面已经把设置应用到预览上。真正的颜色和空间变化则由用户在操作过程中观察。页面外层使用垂直布局顶部标题区域固定在上方设置内容放在可滚动区域内。滚动容器内部的卡片之间有统一间距内容区域左右保留内边距。这样的布局适合手机屏幕标题先建立页面上下文用户向下滚动时依次看到模式、颜色、密度和预览不会在首屏里塞入过多控件。四、切换深色模式时哪些内容会一起变化点击浅色模式开关后开关变为打开状态卡片中的模式文字改为“深色模式”。页面外层背景从浅灰色变成深色顶部标题区域也切换到深色背景。标题文字变成白色说明文字变成更浅的灰蓝色设置卡片背景变为深灰色。强调色卡片和显示密度卡片都会同步变暗但颜色圆点本身仍保持各自的蓝、紫、绿、橙色以便用户继续辨认和选择。观察这个过程时可以把页面分成四层。第一层是最外层背景负责填满没有被卡片覆盖的区域第二层是顶部标题区域负责承载页面标题第三层是设置卡片负责承载开关、色块和密度按钮第四层是预览标题和预览卡片负责显示当前设置结果。四层共同使用深色主题时页面仍然有深浅差异用户不会看到一整块完全相同的黑色。深色模式下未选中的显示密度按钮使用深灰背景和浅灰文字当前选中按钮继续使用强调色背景和白色文字。预览区域的文字也变为浅灰色卡片背景与设置卡片一致。由于标题、说明、按钮和预览区域分别使用了不同亮度的颜色页面在深色状态下仍然保持了信息层次。再次点击开关页面会回到浅色模式所有依赖模式状态的文字和背景重新切换。强调色和显示密度不会因为深浅模式来回切换而丢失之前选中的颜色和密度仍然保留。这个细节很重要主题状态与颜色、密度状态是三个独立维度改变其中一个不应该把另外两个重置。当前页面没有展示系统级主题监听也没有根据设备时间自动切换主题。开关是页面内的手动控制重新进入页面时是否保留上次设置也不属于当前演示范围。文章只把它描述为一个可以即时切换的页面状态不把它扩大为完整的系统主题服务。五、选择强调色时选中状态如何传递到预览选择颜色的操作从色块开始。用户点击紫色圆点圆点中心立即出现勾选符号之前蓝色圆点的勾选符号消失紫色色块外侧出现新的选中边框。由于页面只有一个强调色位置选中结果始终是四选一不会出现两个色块同时显示勾选的情况。颜色选择还会影响显示密度按钮。假设当前密度仍然是“紧凑”点击紫色后“紧凑”按钮的背景从蓝色变成紫色按钮文字继续保持白色。“默认”和“宽松”按钮仍然处于未选中状态只是它们的背景和文字颜色会根据当前深浅模式来确定。这样用户可以清楚地区分两件事紫色代表当前强调色紧凑代表当前密度。切换到绿色或橙色时规则完全一致。圆点颜色本身是固定的选择结果由勾选符号和边框表达被选中的密度按钮读取当前选中颜色跟随颜色一起变化。预览区域的文字不会额外改变颜色名称它只继续表达主题和强调色、密度已经应用。因此颜色选择的主要反馈是视觉反馈而不是文本反馈。深色模式下选择颜色还能观察到选中边框颜色的变化。白色边框与深色卡片形成对比圆点内部的白色勾选符号也能保持可见。浅色模式下则使用深色边框避免白色边框在白色卡片上不明显。这里的边框并不改变色块本身而是作为选中状态的辅助标记。六、显示密度变化为什么只影响预览卡片显示密度是页面里最容易被忽略、但最能体现状态映射关系的一项设置。点击“默认”后预览文字周围的留白会比紧凑模式更大点击“宽松”后留白进一步增加再点回“紧凑”留白恢复到较小值。文字内容本身没有改变卡片圆角也没有改变变化集中在内边距因此用户能直观看出“密度”影响的是空间安排。预览卡片宽度保持与内容区一致圆角也保持不变。只有内边距随着三个档位变化这让对比更加纯粹。如果同时修改字体大小、圆角和颜色用户就很难判断究竟哪一项是密度造成的结果。当前页面用一个局部、可观察的变化来表达密度选择是适合教学和演示的处理。显示密度按钮本身也会呈现选中反馈。选中按钮使用当前强调色作为背景文字变成白色未选中按钮使用浅色主题下的浅灰背景和深色文字或者深色主题下的深灰背景和浅色文字。这样即使用户没有马上观察预览区域也可以通过按钮状态确认当前档位。如果用户先选择宽松再切换深色模式宽松产生的预览内边距仍然保持卡片和文字颜色会改变如果用户再切换强调色宽松状态也不会被重置。三个状态分别影响各自负责的视觉部分同时在预览中组合起来。这种组合关系适合用来理解声明式界面的基本思想界面最终长什么样由当前状态共同决定。七、页面中的组件关系与视觉层次页面顶部是一个横向占满宽度的标题区域。标题文字使用较大的字号和粗体左侧内边距让文字不贴边背景色根据深浅模式变化。标题区域没有额外放置返回按钮、编号标签或工程信息因此用户打开页面后能直接知道这是主题设置页面。标题下方是滚动内容。内容以垂直方向排列模式卡片、强调色卡片、显示密度卡片、预览标题和预览卡片之间保持相对稳定的间距。滚动区域左右有内边距卡片宽度跟随内容区域伸展。即使屏幕高度有限用户也可以通过滚动看到底部预览。模式卡片使用横向布局左侧是垂直排列的标题和说明右侧是开关。左侧区域占据剩余空间开关保持在右侧用户不需要在卡片中寻找控制点。标题文字的内容会根据当前模式变化但说明文字始终说明该开关的作用。强调色卡片使用垂直布局上方是区域标题下方是一排色块。色块大小统一间距统一圆角统一只有当前选中项额外出现勾选和边框。四个色块的排列让选择关系一眼可见也避免把颜色选择做成需要打开弹窗的复杂流程。显示密度卡片同样先放区域标题再放一排按钮。三个按钮使用相同的宽度分配方式每个按钮都能获得足够的点击区域。选中颜色来自当前强调色未选中颜色来自当前主题按钮文字来自固定的三个密度名称。这个区域的布局与强调色区域不同强调色强调视觉样本密度强调文字选项两种交互放在同一页面中但表达方式各自清晰。八、颜色处理体现了哪些实际考虑浅色主题不是简单把背景设成白色。页面外层使用浅灰色标题区域使用浅蓝色卡片使用白色形成三种不同层次。主标题使用深蓝灰色说明文字使用中灰色预览文字也使用较深的灰蓝色。这样的配色保证文字在对应背景上有足够对比度同时让标题比说明更突出。深色主题也不是把所有区域都设成同一个黑色。外层背景是深蓝灰色标题区域使用更深的颜色卡片使用稍亮的深灰色说明文字使用浅灰蓝色。颜色差异虽然比浅色模式小但仍能帮助用户判断卡片边界和内容层级。强调色与主题中性色分工明确。蓝、紫、绿、橙四种颜色只承担选中和重点提示作用不会覆盖整个页面。这样用户更换强调色时不会失去深浅模式原本的阅读关系。选中密度按钮使用强调色是因为它代表当前选择未选中按钮使用中性色是因为它们只是可用选项。圆点使用圆形外观适合表示颜色样本。勾选符号采用白色能够在四种较饱和的颜色上保持清晰。边框在浅色和深色主题间切换解决了选中边界在不同背景下可见性不同的问题。这些细节都直接服务于当前页面的选择体验不需要依赖额外的弹窗或提示。九、一次完整操作可以看到什么可以按照下面的顺序观察页面状态的组合变化。首先在初始浅色主题下点击深色模式开关确认标题、外层背景、卡片和文字全部发生变化。此时不需要点击其他控件就能看到一项布尔状态如何影响页面的多个区域。接着在深色模式下点击紫色圆点确认紫色圆点显示勾选蓝色圆点取消勾选当前密度按钮从原来的颜色变成紫色。这个步骤说明强调色状态既影响色块选中标记也影响另一个区域中的选中按钮。然后点击“默认”观察预览卡片内边距增大选中按钮从“紧凑”移动到“默认”。再点击“宽松”预览卡片继续扩大留白选中按钮的背景仍然保持紫色。此时页面同时处于深色、紫色、宽松三种状态三个设置维度都可以从界面上找到对应反馈。最后切回浅色模式再把强调色改成绿色密度改回紧凑。切换完成后浅色页面恢复绿色圆点出现勾选紧凑按钮使用绿色背景预览内边距恢复较小值。这个过程没有重置其他控件也没有产生额外弹窗所有变化都在当前页面即时完成。这种操作顺序也能帮助发现状态之间是否互相覆盖。如果切换深浅模式会让颜色选择丢失说明状态没有独立保存如果更换强调色会让密度跳回默认说明不同设置被错误地绑定在了一起如果点击密度只改变按钮而不改变预览说明状态没有传递到实际展示区域。当前页面的设计目标就是让这些关系清晰可见。十、声明式 UI 在这个页面里如何体现声明式界面的关键不是“用了多少组件”而是界面由当前状态描述。页面不用为每一种组合状态手动写一套页面也不需要在点击后逐个寻找标题、卡片和按钮再修改颜色。用户操作改变状态后依赖该状态的界面部分会依据当前值重新得到自己的显示结果。深浅模式的状态是一个开关影响文字和背景的选择强调色的状态是四个选项中的一个影响当前圆点的勾选、边框以及选中密度按钮的颜色显示密度的状态是三个按钮中的一个影响选中按钮以及预览卡片内边距。每个状态有明确职责组合之后形成完整页面。这种职责划分使页面行为容易解释。看到深色背景可以回到主题开关看到紫色选中按钮可以回到强调色选择看到预览留白变化可以回到密度按钮。页面没有把三件事压缩成一个复杂的设置对象也没有让一个点击事件负责修改所有视觉细节。对初学者而言最值得注意的是“状态变化”和“界面变化”之间的关系。按钮事件本身很短真正的页面效果分布在多个使用当前状态的区域中。理解这种关系后开发者可以把同样的思路应用到设置页、阅读器、播放器或仪表盘等其他界面。十一、可访问性和可读性观察颜色选择不能只依赖颜色本身。当前页面在选中圆点中加入了勾选符号并且增加边框因此即使用户无法准确区分蓝色、紫色、绿色和橙色也能通过符号和边界判断当前选项。显示密度则直接使用“紧凑”“默认”“宽松”文字不需要用户猜测按钮含义。深色模式下文字颜色会同步变亮避免继续使用浅色主题的深色文字。浅色模式下卡片背景为白色标题和说明使用不同深度的文字帮助用户建立层次。标题和说明之间使用字号、字重和颜色差异而不是只依赖位置。按钮有足够的横向空间三个选项在同一行中排列适合触摸操作。色块之间保留间距避免相邻点击区域过于拥挤。卡片使用圆角和内边距把内容与页面外层背景区分开来也让每一项设置拥有明确的视觉边界。页面中的文字反馈比较克制。模式卡片直接显示当前是浅色模式还是深色模式预览区域直接说明主题、强调色和显示密度已经应用。没有额外弹出提示也没有在页面底部堆叠长提示。对于这种即时生效的设置持续显示的状态文本比短暂提示更适合观察。十二、当前页面的边界这个页面完成的是本地 UI 状态演示。深浅模式由页面内开关控制颜色由页面内色块控制密度由页面内按钮控制预览文字和视觉样式随状态变化。它展示了设置项如何组织、状态如何联动、反馈如何呈现。页面没有展示系统级主题监听也没有声明会跟随系统设置自动切换。没有展示持久化保存因此不能仅根据当前页面判断退出后是否保留设置。没有展示跨页面共享主题也没有展示多个页面同时读取同一套主题配置。没有必要把这些未出现的能力写成页面已经具备的功能。页面也没有使用真实的设计系统资源或远程配置。四个强调色、三个密度名称以及主题文字都是当前界面中固定呈现的内容。用户可以在当前范围内进行选择但不能在页面中新增自定义颜色也不能输入任意间距数值。这样的边界并不影响主题切换演示反而让每个交互结果都容易观察。预览区域也只是当前页面中的一个展示区域。它用文字和内边距反映设置结果并不代表应用中所有页面都已经自动换肤。若要扩展到完整应用还需要统一各页面的颜色来源、文字层级、卡片样式和密度规则但这些内容不属于当前页面已经展示的能力。十三、适合在设备上观察的验证过程打开页面后先不操作确认初始状态是浅色主题、蓝色强调色和紧凑密度。标题、卡片、按钮和预览区域应该都能正常显示底部预览文字能够完整阅读。向下滚动时内容应该保持连续卡片之间的间隔不应突然变化。点击主题开关一次检查以下变化是否同时发生模式文字改变页面背景改变标题区域改变卡片背景改变主标题和说明文字改变预览文字颜色改变。再次点击开关确认页面可以回到原来的浅色视觉关系。点击四个颜色圆点逐个观察勾选符号是否只出现在当前选项选中边框是否跟随当前主题改变密度区域的当前按钮背景是否跟随强调色改变。每次只选一个颜色确认页面不会出现两个同时选中的标记。点击三个密度按钮观察预览卡片的内边距变化。紧凑模式的留白最小默认模式居中宽松模式最大。切换主题后再次切换密度确认两项设置可以同时保留。切换颜色后再检查密度确认颜色变化不会把密度重置。完成组合操作后再次滚动页面确认长内容区域可以正常查看。由于页面没有输入框和网络请求验证重点放在即时视觉反馈、选中唯一性和三种状态的组合一致性上。这里不需要等待异步结果也不需要准备远程数据。十四、从页面现象反推问题如果点击开关后只有开关自己变化标题和背景没有变化说明主题状态没有被页面其他区域使用。可以先检查页面是否所有主题相关颜色都由同一个模式状态决定而不是某些区域写死成浅色。如果点击颜色圆点后勾选变化但密度按钮仍然使用旧颜色说明强调色状态只传到了色块区域没有传到按钮区域。这个页面把选中颜色同时用于色块边框和选中密度按钮正好可以用来判断状态是否在多个区域保持一致。如果点击密度按钮后按钮选中状态变化但预览内边距没有变化说明密度状态没有参与预览卡片的布局计算。预览区域的文字内容不变是正常现象真正应该变化的是文字周围的留白。如果深色模式下未选中按钮文字变暗到无法阅读说明主题分支中的文字颜色没有一起调整。深色模式下未选中按钮使用浅色文字选中按钮使用白色文字浅色模式下则使用深色文字和白色文字的组合。如果重新选择同一个颜色后出现多个勾选说明选中判断不是严格的单选关系。当前页面的颜色选择是四选一选中标记只应该出现在当前选择对应的色块上。这些现象都能在页面上直接观察不需要依赖额外日志。对初学者来说先看界面结果再回到状态关系是理解声明式 UI 的有效方法。十五、为什么这个小页面适合作为主题基础示例主题系统往往容易被写成大量颜色常量和分散的条件判断初学者很难看出设置项与视觉结果之间的联系。这个页面把复杂度控制在三个状态维度内却覆盖了主题切换中最常见的三类需求整体明暗、品牌强调色、内容疏密。它没有使用复杂的页面跳转也没有依赖外部数据。用户每点击一次都能马上看到具体结果。状态的职责也足够清楚开关负责模式色块负责强调色按钮负责密度预览负责把三者组合后的结果展示出来。这样的结构适合用来观察状态驱动界面而不是被业务流程分散注意力。页面还保留了真实应用中常见的细节选中态不能只靠一个颜色深色主题需要重新考虑文字对比度卡片需要与背景建立层次密度选择需要有可见的空间变化。它并没有把主题功能包装成一句抽象概念而是让每一项设置都能被点击、被观察、被比较。十六、三种状态组合时应该怎样阅读界面单独观察某一个控件容易真正理解页面还要看三种设置组合后的结果。比如浅色、蓝色、紧凑是初始组合用户看到的是浅灰外层、白色卡片、蓝色选中按钮和较小预览留白。把主题切到深色以后蓝色仍然是强调色紧凑仍然是密度变化只发生在模式负责的背景和文字上。这个结果说明三个设置并不是互相替换而是分别负责不同的视觉层。再把颜色改成橙色页面的深浅关系不会改变只有色块勾选、选中边框和密度按钮的重点颜色改变。如果此时把密度改成宽松预览卡片的空间变大但橙色选中按钮仍然保持深色卡片和浅色文字也仍然保持。用户可以用这种连续操作判断每一项状态有没有越权影响其他区域。一个更细的观察点是标题和预览文字。标题中的“深色模式”只由主题开关决定预览文字中的“当前是深色主题”也只跟随主题变化无论选择哪一种颜色预览文字不会突然改成“橙色主题”因为当前界面并没有把颜色名称拼接到提示中。颜色的结果通过色块和按钮表达模式的结果通过文字和整体颜色表达密度的结果通过留白表达三种反馈形式各有侧重。在实际阅读时可以先看文字再看颜色最后看空间。文字帮助确认开关状态颜色帮助确认强调色空间帮助确认密度。按照这个顺序观察页面的设置关系会比只盯着某一个按钮更加清晰。十七、状态切换中的稳定性细节主题开关可以重复点击页面在浅色和深色之间来回切换。重复切换不会增加新的卡片也不会改变色块排列。颜色圆点可以连续点击选中标记始终只有一个同一个圆点重复点击时结果仍然是该颜色被选中不会出现取消全部颜色的空状态。显示密度也保持三选一重复点击当前档位只会保持当前档位。这类稳定性来自选择状态的表达方式。颜色不是一个可以同时打开多个项目的开关密度也不是多个独立的布尔选项而是从固定选项中选择一个当前值。用户不用担心点击顺序不同会产生无法解释的组合先改主题再改颜色或者先改颜色再改主题最终页面都能按照当前三个状态显示。页面也没有“保存”或“重置”按钮所有操作都是即时应用。这个设计降低了交互成本但也明确了页面的范围它展示的是当前会话中的选择反馈而不是一个带有提交流程的设置中心。用户点击后就能看到结果离开页面后的保留行为不在当前界面中体现。十八、从视觉结果理解布局计算预览卡片的变化可以帮助开发者理解布局计算。卡片宽度由内容区域决定圆角保持稳定文字内容保持稳定只有内边距根据密度档位变化。紧凑模式让文字与卡片边缘距离较近默认模式给出适中的呼吸空间宽松模式则让卡片显得更加舒展。因为只有一个布局参数变化所以对比结果非常明确。显示密度按钮使用横向平均分配三个按钮共同占据可用宽度。当前按钮的颜色来自强调色未选中按钮的颜色来自主题中性色。按钮文字始终是固定档位名称不会因主题切换变成其他语言或其他表达。这样的布局使用户可以同时看到三个可选项又能在选中状态中找到当前档位。设置卡片的内边距和圆角在主题切换时保持不变变化主要是背景和文字颜色。保持几何结构稳定有两个好处用户不会因为切换主题而失去点击目标开发者也可以把视觉问题定位到颜色分支而不是同时处理位置变化。主题页面的稳定感正是来自颜色变化与布局变化之间的边界。十九、结语这个主题设置页面用一个开关、四个颜色选项和三个密度按钮展示了一个完整而克制的 UI 状态闭环。用户先看到浅色主题、蓝色强调色和紧凑预览切换深色模式后页面整体明暗关系改变选择其他颜色后勾选标记和当前按钮颜色同步变化切换密度后预览卡片的留白随档位改变。真正值得学习的不是某一个颜色值而是状态与视觉结果之间的对应关系。模式状态影响整体颜色强调色状态影响重点元素密度状态影响空间安排三个维度互不重置又能在预览区域共同呈现。通过这样的拆分页面既保持了交互简单也让用户能够清楚理解每次操作产生的结果。如果把这类页面继续扩展后续可以在保持当前交互规则的基础上增加更多预览内容但在阅读当前页面时应当把它看作一个本地主题设置演示重点观察手动切换、颜色选择、密度变化和状态反馈不把页面没有展示的系统监听、持久化或跨页面同步当成既有能力。