HarmonyOS 主题切换实战：让深浅模式、强调色和显示密度真正联动

一、先看页面：这不是一个“换颜色”的按钮

很多主题切换示例只放一个开关，打开以后把背景从白色换成黑色，再配上一句“深色模式已开启”。这样的演示能说明开关会变化，却很难说明一个主题系统究竟影响了哪些界面元素。一个更接近实际使用的主题设置页，至少要同时处理整体背景、标题区域、卡片、文字、选择状态以及预览内容。如果这些元素只改了一部分，用户看到的就不是一个完整主题，而是几块颜色互相冲突的区域。

这个页面把主题体验拆成三个相互独立、又能同时作用于预览的维度。第一维是浅色模式和深色模式，负责改变页面的整体明暗关系；第二维是强调色，提供蓝色、紫色、绿色和橙色四个圆形选项；第三维是显示密度，提供紧凑、默认、宽松三个按钮。用户不需要离开当前页面，就可以连续调整三项设置，并在下方预览区域看到它们共同形成的结果。

页面的价值正在于这种联动关系。深浅模式不是只改变一个背景，强调色也不是只改变一个圆点，显示密度更不是一个摆设按钮。每次点击都能看到选中标记、文字颜色、卡片颜色、按钮颜色和预览区域同步变化。对于刚接触 ArkUI 声明式界面的开发者来说，这种页面比单独讲一个 Toggle 或 Button 更容易理解“状态改变之后，界面应该如何整体响应”。

初始画面使用浅色主题，标题区域带有浅蓝色背景，页面主体是浅灰底色，设置内容以白色圆角卡片呈现。此时强调色默认选中蓝色，显示密度默认选中“紧凑”，预览区域显示“当前是浅色主题，强调色与显示密度已应用”。这些初始值共同构成了用户第一次打开页面时看到的基线。

二、三个设置维度分别解决什么问题

2.1 深浅模式解决整体视觉明暗

深浅模式是页面最明显的一项设置。浅色模式适合明亮环境和长时间阅读，深色模式则通过降低大面积亮色背景的存在感，让页面呈现更沉稳的视觉效果。在这个页面中，切换开关后，顶部标题区域、页面底色、设置卡片、标题文字、说明文字、按钮文字以及预览卡片都会重新选择颜色。

浅色模式下，页面外层使用浅灰色背景，标题区域使用浅蓝色，卡片使用白色，主标题接近深蓝灰色，说明文字使用中灰色。这样的组合能够把标题、设置区和预览区区分开来。深色模式下，页面外层和标题区域转为深色，卡片采用略浅的深灰色，主标题转为白色，说明文字转为浅灰色。深色模式并不是把所有颜色简单反转，而是保留层次：外层最深，卡片稍亮，文字用高对比度颜色显示。

这种处理说明主题开关改变的是一组视觉规则，而不是一个独立控件。开关本身只负责表达当前是否处于深色状态，真正的主题变化体现在多个组件共同读取同一状态后得到的颜色结果。用户点击开关时，顶部标题中的模式文字也会从“浅色模式”切换成“深色模式”，副说明保持“切换页面的整体视觉主题”，让用户知道开关改变的是整体页面，而不是单独一块区域。

2.2 强调色解决重点元素的识别

四个强调色圆点分别代表蓝色、紫色、绿色和橙色。它们的作用不是改变整个页面的背景，而是为选中状态和操作重点提供统一的视觉标识。用户点击某个圆点后，该圆点会出现勾选符号，并且边框宽度发生变化；显示密度区域中当前选中的按钮，也会使用同一个强调色作为背景。

例如选择紫色后，紫色圆点内部出现勾选符号，圆点周围出现选中边框，显示密度中被选中的按钮也转为紫色，按钮上的文字保持白色。选择绿色或橙色时，同样的规则继续成立。这样一来，用户不仅能从勾选符号判断选择结果，还能从下方按钮的颜色判断当前主题的强调色。这种跨区域的一致性，比只在色块上加一条边框更容易让人理解。

四个颜色的排列也很直观：色块大小一致，圆角接近圆形，色块之间有固定间隔，选中与未选中主要通过勾选符号和边框区分。未选中的色块不显示勾选符号，选中的色块才在中心显示白色勾号。浅色模式下选中边框使用深色，深色模式下选中边框使用白色，以保证边框在两种背景环境里都能看清。

2.3 显示密度解决内容疏密选择

显示密度区域有三个并列按钮，文字分别是“紧凑”“默认”“宽松”。它们表达的是同一块预览内容在空间占用上的差异。紧凑模式对应较小的内边距，默认模式使用中等内边距，宽松模式使用更大的内边距。点击按钮后，下方预览文字所在卡片会立即改变上下左右留白，用户可以直接看到内容从紧凑到舒展的变化。

这里的密度并不会改变页面全部卡片的间距，也不会改变顶部标题和设置区域的布局。它只作用于预览区域中的那条状态说明，因此页面可以把“显示密度”这个概念讲清楚，而不至于让所有控件在点击后突然跳动。当前选中按钮采用强调色背景，另外两个按钮采用浅灰或深灰背景；按钮文字颜色也随着选中状态和深浅模式变化，避免深色主题下出现黑字压在深灰底上的问题。

三、从初始画面理解页面状态

第一次进入页面时，主题处于浅色模式。标题文字是“主题切换”，下方设置卡片首先展示浅色模式开关，其右侧开关处于关闭状态。卡片中的第一行文字是“浅色模式”，下面的说明告诉用户这个控件会切换页面的整体视觉主题。因为页面使用的是浅色模式，标题和说明文字都采用深色与中灰色搭配，卡片背景呈白色。

接着往下是“强调色”卡片。四个圆形色块横向排列，第一颗蓝色色块默认选中，中心可以看到勾选符号，并且外侧有选中边框。其余三个色块没有勾选符号。再往下是“显示密度”卡片，三个按钮横向排列，第一项“紧凑”使用蓝色背景和白色文字，另外两项使用浅灰背景和深色文字。

预览区域位于设置卡片之后。标题写着“预览区域”，下面是一条带圆角的状态文本。初始文本同时说明三个结果：当前是浅色主题，强调色与显示密度已经应用。这里没有单独展示“当前强调色是蓝色”或“当前密度是紧凑”，而是用一句概括性的文本说明页面已经把设置应用到预览上。真正的颜色和空间变化，则由用户在操作过程中观察。

页面外层使用垂直布局，顶部标题区域固定在上方，设置内容放在可滚动区域内。滚动容器内部的卡片之间有统一间距，内容区域左右保留内边距。这样的布局适合手机屏幕：标题先建立页面上下文，用户向下滚动时依次看到模式、颜色、密度和预览，不会在首屏里塞入过多控件。

四、切换深色模式时，哪些内容会一起变化

点击浅色模式开关后，开关变为打开状态，卡片中的模式文字改为“深色模式”。页面外层背景从浅灰色变成深色，顶部标题区域也切换到深色背景。标题文字变成白色，说明文字变成更浅的灰蓝色，设置卡片背景变为深灰色。强调色卡片和显示密度卡片都会同步变暗，但颜色圆点本身仍保持各自的蓝、紫、绿、橙色，以便用户继续辨认和选择。

观察这个过程时，可以把页面分成四层。第一层是最外层背景，负责填满没有被卡片覆盖的区域；第二层是顶部标题区域，负责承载页面标题；第三层是设置卡片，负责承载开关、色块和密度按钮；第四层是预览标题和预览卡片，负责显示当前设置结果。四层共同使用深色主题时，页面仍然有深浅差异，用户不会看到一整块完全相同的黑色。

深色模式下，未选中的显示密度按钮使用深灰背景和浅灰文字，当前选中按钮继续使用强调色背景和白色文字。预览区域的文字也变为浅灰色，卡片背景与设置卡片一致。由于标题、说明、按钮和预览区域分别使用了不同亮度的颜色，页面在深色状态下仍然保持了信息层次。

再次点击开关，页面会回到浅色模式，所有依赖模式状态的文字和背景重新切换。强调色和显示密度不会因为深浅模式来回切换而丢失，之前选中的颜色和密度仍然保留。这个细节很重要：主题状态与颜色、密度状态是三个独立维度，改变其中一个不应该把另外两个重置。

当前页面没有展示系统级主题监听，也没有根据设备时间自动切换主题。开关是页面内的手动控制，重新进入页面时是否保留上次设置也不属于当前演示范围。文章只把它描述为一个可以即时切换的页面状态，不把它扩大为完整的系统主题服务。

五、选择强调色时，选中状态如何传递到预览

选择颜色的操作从色块开始。用户点击紫色圆点，圆点中心立即出现勾选符号，之前蓝色圆点的勾选符号消失，紫色色块外侧出现新的选中边框。由于页面只有一个强调色位置，选中结果始终是四选一，不会出现两个色块同时显示勾选的情况。

颜色选择还会影响显示密度按钮。假设当前密度仍然是“紧凑”，点击紫色后，“紧凑”按钮的背景从蓝色变成紫色，按钮文字继续保持白色。“默认”和“宽松”按钮仍然处于未选中状态，只是它们的背景和文字颜色会根据当前深浅模式来确定。这样用户可以清楚地区分两件事：紫色代表当前强调色，紧凑代表当前密度。

切换到绿色或橙色时，规则完全一致。圆点颜色本身是固定的，选择结果由勾选符号和边框表达；被选中的密度按钮读取当前选中颜色，跟随颜色一起变化。预览区域的文字不会额外改变颜色名称，它只继续表达主题和强调色、密度已经应用。因此，颜色选择的主要反馈是视觉反馈，而不是文本反馈。

深色模式下选择颜色，还能观察到选中边框颜色的变化。白色边框与深色卡片形成对比，圆点内部的白色勾选符号也能保持可见。浅色模式下则使用深色边框，避免白色边框在白色卡片上不明显。这里的边框并不改变色块本身，而是作为选中状态的辅助标记。

六、显示密度变化为什么只影响预览卡片

显示密度是页面里最容易被忽略、但最能体现状态映射关系的一项设置。点击“默认”后，预览文字周围的留白会比紧凑模式更大；点击“宽松”后，留白进一步增加；再点回“紧凑”，留白恢复到较小值。文字内容本身没有改变，卡片圆角也没有改变，变化集中在内边距，因此用户能直观看出“密度”影响的是空间安排。

预览卡片宽度保持与内容区一致，圆角也保持不变。只有内边距随着三个档位变化，这让对比更加纯粹。如果同时修改字体大小、圆角和颜色，用户就很难判断究竟哪一项是密度造成的结果。当前页面用一个局部、可观察的变化来表达密度选择，是适合教学和演示的处理。

显示密度按钮本身也会呈现选中反馈。选中按钮使用当前强调色作为背景，文字变成白色；未选中按钮使用浅色主题下的浅灰背景和深色文字，或者深色主题下的深灰背景和浅色文字。这样即使用户没有马上观察预览区域，也可以通过按钮状态确认当前档位。

如果用户先选择宽松，再切换深色模式，宽松产生的预览内边距仍然保持，卡片和文字颜色会改变；如果用户再切换强调色，宽松状态也不会被重置。三个状态分别影响各自负责的视觉部分，同时在预览中组合起来。这种组合关系适合用来理解声明式界面的基本思想：界面最终长什么样，由当前状态共同决定。

七、页面中的组件关系与视觉层次

页面顶部是一个横向占满宽度的标题区域。标题文字使用较大的字号和粗体，左侧内边距让文字不贴边，背景色根据深浅模式变化。标题区域没有额外放置返回按钮、编号标签或工程信息，因此用户打开页面后能直接知道这是主题设置页面。

标题下方是滚动内容。内容以垂直方向排列，模式卡片、强调色卡片、显示密度卡片、预览标题和预览卡片之间保持相对稳定的间距。滚动区域左右有内边距，卡片宽度跟随内容区域伸展。即使屏幕高度有限，用户也可以通过滚动看到底部预览。

模式卡片使用横向布局：左侧是垂直排列的标题和说明，右侧是开关。左侧区域占据剩余空间，开关保持在右侧，用户不需要在卡片中寻找控制点。标题文字的内容会根据当前模式变化，但说明文字始终说明该开关的作用。

强调色卡片使用垂直布局，上方是区域标题，下方是一排色块。色块大小统一，间距统一，圆角统一，只有当前选中项额外出现勾选和边框。四个色块的排列让选择关系一眼可见，也避免把颜色选择做成需要打开弹窗的复杂流程。

显示密度卡片同样先放区域标题，再放一排按钮。三个按钮使用相同的宽度分配方式，每个按钮都能获得足够的点击区域。选中颜色来自当前强调色，未选中颜色来自当前主题，按钮文字来自固定的三个密度名称。这个区域的布局与强调色区域不同：强调色强调视觉样本，密度强调文字选项，两种交互放在同一页面中但表达方式各自清晰。

八、颜色处理体现了哪些实际考虑

浅色主题不是简单把背景设成白色。页面外层使用浅灰色，标题区域使用浅蓝色，卡片使用白色，形成三种不同层次。主标题使用深蓝灰色，说明文字使用中灰色，预览文字也使用较深的灰蓝色。这样的配色保证文字在对应背景上有足够对比度，同时让标题比说明更突出。

深色主题也不是把所有区域都设成同一个黑色。外层背景是深蓝灰色，标题区域使用更深的颜色，卡片使用稍亮的深灰色，说明文字使用浅灰蓝色。颜色差异虽然比浅色模式小，但仍能帮助用户判断卡片边界和内容层级。

强调色与主题中性色分工明确。蓝、紫、绿、橙四种颜色只承担选中和重点提示作用，不会覆盖整个页面。这样用户更换强调色时，不会失去深浅模式原本的阅读关系。选中密度按钮使用强调色，是因为它代表当前选择；未选中按钮使用中性色，是因为它们只是可用选项。

圆点使用圆形外观，适合表示颜色样本。勾选符号采用白色，能够在四种较饱和的颜色上保持清晰。边框在浅色和深色主题间切换，解决了选中边界在不同背景下可见性不同的问题。这些细节都直接服务于当前页面的选择体验，不需要依赖额外的弹窗或提示。

九、一次完整操作可以看到什么

可以按照下面的顺序观察页面状态的组合变化。首先在初始浅色主题下点击深色模式开关，确认标题、外层背景、卡片和文字全部发生变化。此时不需要点击其他控件，就能看到一项布尔状态如何影响页面的多个区域。

接着在深色模式下点击紫色圆点，确认紫色圆点显示勾选，蓝色圆点取消勾选，当前密度按钮从原来的颜色变成紫色。这个步骤说明强调色状态既影响色块选中标记，也影响另一个区域中的选中按钮。

然后点击“默认”，观察预览卡片内边距增大，选中按钮从“紧凑”移动到“默认”。再点击“宽松”，预览卡片继续扩大留白，选中按钮的背景仍然保持紫色。此时页面同时处于深色、紫色、宽松三种状态，三个设置维度都可以从界面上找到对应反馈。

最后切回浅色模式，再把强调色改成绿色，密度改回紧凑。切换完成后，浅色页面恢复，绿色圆点出现勾选，紧凑按钮使用绿色背景，预览内边距恢复较小值。这个过程没有重置其他控件，也没有产生额外弹窗，所有变化都在当前页面即时完成。

这种操作顺序也能帮助发现状态之间是否互相覆盖。如果切换深浅模式会让颜色选择丢失，说明状态没有独立保存；如果更换强调色会让密度跳回默认，说明不同设置被错误地绑定在了一起；如果点击密度只改变按钮而不改变预览，说明状态没有传递到实际展示区域。当前页面的设计目标就是让这些关系清晰可见。

十、声明式 UI 在这个页面里如何体现

声明式界面的关键不是“用了多少组件”，而是界面由当前状态描述。页面不用为每一种组合状态手动写一套页面，也不需要在点击后逐个寻找标题、卡片和按钮再修改颜色。用户操作改变状态后，依赖该状态的界面部分会依据当前值重新得到自己的显示结果。

深浅模式的状态是一个开关，影响文字和背景的选择；强调色的状态是四个选项中的一个，影响当前圆点的勾选、边框以及选中密度按钮的颜色；显示密度的状态是三个按钮中的一个，影响选中按钮以及预览卡片内边距。每个状态有明确职责，组合之后形成完整页面。

这种职责划分使页面行为容易解释。看到深色背景，可以回到主题开关；看到紫色选中按钮，可以回到强调色选择；看到预览留白变化，可以回到密度按钮。页面没有把三件事压缩成一个复杂的设置对象，也没有让一个点击事件负责修改所有视觉细节。

对初学者而言，最值得注意的是“状态变化”和“界面变化”之间的关系。按钮事件本身很短，真正的页面效果分布在多个使用当前状态的区域中。理解这种关系后，开发者可以把同样的思路应用到设置页、阅读器、播放器或仪表盘等其他界面。

十一、可访问性和可读性观察

颜色选择不能只依赖颜色本身。当前页面在选中圆点中加入了勾选符号，并且增加边框，因此即使用户无法准确区分蓝色、紫色、绿色和橙色，也能通过符号和边界判断当前选项。显示密度则直接使用“紧凑”“默认”“宽松”文字，不需要用户猜测按钮含义。

深色模式下文字颜色会同步变亮，避免继续使用浅色主题的深色文字。浅色模式下卡片背景为白色，标题和说明使用不同深度的文字，帮助用户建立层次。标题和说明之间使用字号、字重和颜色差异，而不是只依赖位置。

按钮有足够的横向空间，三个选项在同一行中排列，适合触摸操作。色块之间保留间距，避免相邻点击区域过于拥挤。卡片使用圆角和内边距，把内容与页面外层背景区分开来，也让每一项设置拥有明确的视觉边界。

页面中的文字反馈比较克制。模式卡片直接显示当前是浅色模式还是深色模式，预览区域直接说明主题、强调色和显示密度已经应用。没有额外弹出提示，也没有在页面底部堆叠长提示。对于这种即时生效的设置，持续显示的状态文本比短暂提示更适合观察。

十二、当前页面的边界

这个页面完成的是本地 UI 状态演示。深浅模式由页面内开关控制，颜色由页面内色块控制，密度由页面内按钮控制，预览文字和视觉样式随状态变化。它展示了设置项如何组织、状态如何联动、反馈如何呈现。

页面没有展示系统级主题监听，也没有声明会跟随系统设置自动切换。没有展示持久化保存，因此不能仅根据当前页面判断退出后是否保留设置。没有展示跨页面共享主题，也没有展示多个页面同时读取同一套主题配置。没有必要把这些未出现的能力写成页面已经具备的功能。

页面也没有使用真实的设计系统资源或远程配置。四个强调色、三个密度名称以及主题文字都是当前界面中固定呈现的内容。用户可以在当前范围内进行选择，但不能在页面中新增自定义颜色，也不能输入任意间距数值。这样的边界并不影响主题切换演示，反而让每个交互结果都容易观察。

预览区域也只是当前页面中的一个展示区域。它用文字和内边距反映设置结果，并不代表应用中所有页面都已经自动换肤。若要扩展到完整应用，还需要统一各页面的颜色来源、文字层级、卡片样式和密度规则，但这些内容不属于当前页面已经展示的能力。

十三、适合在设备上观察的验证过程

打开页面后，先不操作，确认初始状态是浅色主题、蓝色强调色和紧凑密度。标题、卡片、按钮和预览区域应该都能正常显示，底部预览文字能够完整阅读。向下滚动时，内容应该保持连续，卡片之间的间隔不应突然变化。

点击主题开关一次，检查以下变化是否同时发生：模式文字改变，页面背景改变，标题区域改变，卡片背景改变，主标题和说明文字改变，预览文字颜色改变。再次点击开关，确认页面可以回到原来的浅色视觉关系。

点击四个颜色圆点，逐个观察勾选符号是否只出现在当前选项，选中边框是否跟随当前主题改变，密度区域的当前按钮背景是否跟随强调色改变。每次只选一个颜色，确认页面不会出现两个同时选中的标记。

点击三个密度按钮，观察预览卡片的内边距变化。紧凑模式的留白最小，默认模式居中，宽松模式最大。切换主题后再次切换密度，确认两项设置可以同时保留。切换颜色后再检查密度，确认颜色变化不会把密度重置。

完成组合操作后，再次滚动页面，确认长内容区域可以正常查看。由于页面没有输入框和网络请求，验证重点放在即时视觉反馈、选中唯一性和三种状态的组合一致性上。这里不需要等待异步结果，也不需要准备远程数据。

十四、从页面现象反推问题

如果点击开关后只有开关自己变化，标题和背景没有变化，说明主题状态没有被页面其他区域使用。可以先检查页面是否所有主题相关颜色都由同一个模式状态决定，而不是某些区域写死成浅色。

如果点击颜色圆点后勾选变化，但密度按钮仍然使用旧颜色，说明强调色状态只传到了色块区域，没有传到按钮区域。这个页面把选中颜色同时用于色块边框和选中密度按钮，正好可以用来判断状态是否在多个区域保持一致。

如果点击密度按钮后按钮选中状态变化，但预览内边距没有变化，说明密度状态没有参与预览卡片的布局计算。预览区域的文字内容不变是正常现象，真正应该变化的是文字周围的留白。

如果深色模式下未选中按钮文字变暗到无法阅读，说明主题分支中的文字颜色没有一起调整。深色模式下，未选中按钮使用浅色文字，选中按钮使用白色文字；浅色模式下则使用深色文字和白色文字的组合。

如果重新选择同一个颜色后出现多个勾选，说明选中判断不是严格的单选关系。当前页面的颜色选择是四选一，选中标记只应该出现在当前选择对应的色块上。

这些现象都能在页面上直接观察，不需要依赖额外日志。对初学者来说，先看界面结果再回到状态关系，是理解声明式 UI 的有效方法。

十五、为什么这个小页面适合作为主题基础示例

主题系统往往容易被写成大量颜色常量和分散的条件判断，初学者很难看出设置项与视觉结果之间的联系。这个页面把复杂度控制在三个状态维度内，却覆盖了主题切换中最常见的三类需求：整体明暗、品牌强调色、内容疏密。

它没有使用复杂的页面跳转，也没有依赖外部数据。用户每点击一次，都能马上看到具体结果。状态的职责也足够清楚：开关负责模式，色块负责强调色，按钮负责密度，预览负责把三者组合后的结果展示出来。这样的结构适合用来观察状态驱动界面，而不是被业务流程分散注意力。

页面还保留了真实应用中常见的细节：选中态不能只靠一个颜色，深色主题需要重新考虑文字对比度，卡片需要与背景建立层次，密度选择需要有可见的空间变化。它并没有把主题功能包装成一句抽象概念，而是让每一项设置都能被点击、被观察、被比较。

十六、三种状态组合时应该怎样阅读界面

单独观察某一个控件容易，真正理解页面还要看三种设置组合后的结果。比如浅色、蓝色、紧凑是初始组合，用户看到的是浅灰外层、白色卡片、蓝色选中按钮和较小预览留白。把主题切到深色以后，蓝色仍然是强调色，紧凑仍然是密度，变化只发生在模式负责的背景和文字上。这个结果说明三个设置并不是互相替换，而是分别负责不同的视觉层。

再把颜色改成橙色，页面的深浅关系不会改变，只有色块勾选、选中边框和密度按钮的重点颜色改变。如果此时把密度改成宽松，预览卡片的空间变大，但橙色选中按钮仍然保持，深色卡片和浅色文字也仍然保持。用户可以用这种连续操作判断每一项状态有没有越权影响其他区域。

一个更细的观察点是标题和预览文字。标题中的“深色模式”只由主题开关决定，预览文字中的“当前是深色主题”也只跟随主题变化；无论选择哪一种颜色，预览文字不会突然改成“橙色主题”，因为当前界面并没有把颜色名称拼接到提示中。颜色的结果通过色块和按钮表达，模式的结果通过文字和整体颜色表达，密度的结果通过留白表达，三种反馈形式各有侧重。

在实际阅读时，可以先看文字，再看颜色，最后看空间。文字帮助确认开关状态，颜色帮助确认强调色，空间帮助确认密度。按照这个顺序观察，页面的设置关系会比只盯着某一个按钮更加清晰。

十七、状态切换中的稳定性细节

主题开关可以重复点击，页面在浅色和深色之间来回切换。重复切换不会增加新的卡片，也不会改变色块排列。颜色圆点可以连续点击，选中标记始终只有一个；同一个圆点重复点击时，结果仍然是该颜色被选中，不会出现取消全部颜色的空状态。显示密度也保持三选一，重复点击当前档位只会保持当前档位。

这类稳定性来自选择状态的表达方式。颜色不是一个可以同时打开多个项目的开关，密度也不是多个独立的布尔选项，而是从固定选项中选择一个当前值。用户不用担心点击顺序不同会产生无法解释的组合：先改主题再改颜色，或者先改颜色再改主题，最终页面都能按照当前三个状态显示。

页面也没有“保存”或“重置”按钮，所有操作都是即时应用。这个设计降低了交互成本，但也明确了页面的范围：它展示的是当前会话中的选择反馈，而不是一个带有提交流程的设置中心。用户点击后就能看到结果，离开页面后的保留行为不在当前界面中体现。

十八、从视觉结果理解布局计算

预览卡片的变化可以帮助开发者理解布局计算。卡片宽度由内容区域决定，圆角保持稳定，文字内容保持稳定，只有内边距根据密度档位变化。紧凑模式让文字与卡片边缘距离较近，默认模式给出适中的呼吸空间，宽松模式则让卡片显得更加舒展。因为只有一个布局参数变化，所以对比结果非常明确。

显示密度按钮使用横向平均分配，三个按钮共同占据可用宽度。当前按钮的颜色来自强调色，未选中按钮的颜色来自主题中性色。按钮文字始终是固定档位名称，不会因主题切换变成其他语言或其他表达。这样的布局使用户可以同时看到三个可选项，又能在选中状态中找到当前档位。

设置卡片的内边距和圆角在主题切换时保持不变，变化主要是背景和文字颜色。保持几何结构稳定有两个好处：用户不会因为切换主题而失去点击目标，开发者也可以把视觉问题定位到颜色分支，而不是同时处理位置变化。主题页面的稳定感，正是来自颜色变化与布局变化之间的边界。

十九、结语

这个主题设置页面用一个开关、四个颜色选项和三个密度按钮，展示了一个完整而克制的 UI 状态闭环。用户先看到浅色主题、蓝色强调色和紧凑预览；切换深色模式后，页面整体明暗关系改变；选择其他颜色后，勾选标记和当前按钮颜色同步变化；切换密度后，预览卡片的留白随档位改变。

真正值得学习的不是某一个颜色值，而是状态与视觉结果之间的对应关系。模式状态影响整体颜色，强调色状态影响重点元素，密度状态影响空间安排，三个维度互不重置，又能在预览区域共同呈现。通过这样的拆分，页面既保持了交互简单，也让用户能够清楚理解每次操作产生的结果。

如果把这类页面继续扩展，后续可以在保持当前交互规则的基础上增加更多预览内容；但在阅读当前页面时，应当把它看作一个本地主题设置演示，重点观察手动切换、颜色选择、密度变化和状态反馈，不把页面没有展示的系统监听、持久化或跨页面同步当成既有能力。