Cushy主题与样式实战：从暗色模式切换到OKLab色彩方案编辑器手把手教程
【免费下载链接】cushyAn experimental cross-platform graphical user interface (GUI) crate for Rust.项目地址: https://gitcode.com/gh_mirrors/cu/cushy
Cushy 是一个实验性的跨平台 Rust GUI crate，它的主题系统让你只需定义一个主色，就能自动派生出一整套明暗双模式配色。本文带你从零上手：先学会一键切换暗色模式，再使用项目自带的 OKLab 色彩方案编辑器（theme 示例）亲手调出品牌色，最后把主题代码一键复制到剪贴板，5 分钟做出你自己的 Cushy 应用配色。
先看懂 Cushy 主题的三层结构 🎨
Cushy 的样式与主题核心代码都在 src/styles.rs 中，设计成由"少到多"的三层，非常好理解：
- ColorSource（颜色源）：只有两个参数——OKLab 色相（
OklabHue）和饱和度（0.0~1.0）。任何颜色都是"色相 + 饱和度 + 亮度"组合出来的，定义见 src/styles.rs。 - ColorScheme（色彩方案）：由 primary、secondary、tertiary、error、neutral、neutral_variant 六个颜色源组成，见 src/styles.rs。
- ThemePair（主题对）：同时持有 light 与 dark 两套 Theme，并附带跨模式保持不变的 fixed 强调色、阴影与遮罩色，定义见 src/styles.rs。
💡 为什么选 OKLab/OKHSL 色彩空间？因为它的色相变化更符合人类视觉感知——同样转动 30°，颜色过渡不会像 HSB 那样忽明忽暗，调主题时"手感"更稳定。
暗色模式一键切换：只需 3 步 🌙
Cushy 用ThemeMode::Dark / Light表示当前界面模式。给任意窗口或组件绑定模式后，切换只是一个布尔值的变化：
// 绑定主题对 + 绑定明暗模式（均为响应式，可变） editors .themed(theme) // 应用 ThemePair .themed_mode(theme_mode) // 暗色模式开关- 窗口级别：themed / themed_mode
- 组件级别：Themed 包装组件
theme 示例里的暗色模式开关就是一个复选框，见 dark_mode_picker：勾选 = 暗色，取消 = 亮色，界面即时重绘。
OKLab 色彩方案：只需一个主色，6 色自动生成 ✨
手动配 6 种颜色很痛苦。ColorSchemeBuilder 的做法是：你只给主色，其余全部智能生成——
| 颜色 | 自动生成规则 |
|---|---|
| secondary | 主色相偏转 30°，饱和度减半 |
| tertiary | 反向偏转，饱和度降至 1/3 |
| error | 从红色系选取，并自动避开与前三者撞色 |
| neutral | 主色相、饱和度仅 1% 的近灰色 |
| neutral_variant | 主色相、饱和度为主色的 10% |
一行代码就能得到完整方案：ColorScheme::from_primary(290.)（290° 是默认的紫色系主色）。你也可以用builder.secondary(...)等方法覆盖任意一项，再build()生成。
动手：OKLab 色彩方案编辑器详解 🛠️
项目内置了一个现成的主题编辑器：examples/theme.rs，运行它即可打开可视化编辑窗口。它的核心交互包括：
- 色板选择器：每个颜色源都配一个 ColorSourcePicker，点选即可换色相；
- 色相滑杆：0°~360° 拖动，实时预览整站配色（对应
OklabHue）； - 饱和度滑杆：0.0 是纯灰，1.0 是全饱和；
- 明暗双预览区：右侧同时渲染 Light 与 Dark 两种 theme_preview，确认对比度一眼可见；
- Fixed 色卡：展示跨明暗模式保持一致的强调色 fixed_themes。
一键导出主题代码：复制到剪贴板 📋
调好配色后，点击编辑器的 "Copy to Clipboard" 按钮（examples/theme.rs），会把当前方案转成可直接粘进项目的 Rust 代码，例如：
ColorSchemeBuilder::new( ColorSource::new(290.0, 0.8) ).secondary(...).build()这样"所见即所得"：编辑器里看到什么，代码里就是什么，无需手动换算。
运行示例：快速上手步骤 🚀
git clone https://gitcode.com/gh_mirrors/cu/cushy cd cushy cargo run --example theme # 打开 OKLab 色彩方案编辑器 cargo run --example color-pickers # 体验 HSLa / RGBa 取色器取色器示例见 examples/color-pickers.rs，它演示了HslaPicker与RgbaPicker两种组件，适合想把主题色微调成精确 RGB 的场景。
小结 🏁
| 目标 | 关键 API / 文件 |
|---|---|
| 一键切换暗色模式 | themed_mode(ThemeMode)· src/window.rs |
| 自动生成 6 色方案 | ColorScheme::from_primary· src/styles.rs |
| 可视化调主色/色相/饱和度 | theme 编辑器 · examples/theme.rs |
| 导出主题 Rust 代码 | Copy to Clipboard · examples/theme.rs |
Cushy 的主题系统用"一个主色派生全套配色 + 明暗双主题 + 实时预览"的组合，把 GUI 应用中通常最繁琐的样式配置变得像调色盘一样简单。建议直接跑起来theme示例，边拖滑杆边感受 OKLab 色相的顺滑过渡——这就是它与其他 GUI 框架最不一样的地方。
【免费下载链接】cushyAn experimental cross-platform graphical user interface (GUI) crate for Rust.项目地址: https://gitcode.com/gh_mirrors/cu/cushy
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
