Cushy主题与样式实战：从暗色模式切换到OKLab色彩方案编辑器手把手教程

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 中，设计成由"少到多"的三层，非常好理解：

1. ColorSource（颜色源）：只有两个参数——OKLab 色相（OklabHue）和饱和度（0.0~1.0）。任何颜色都是"色相 + 饱和度 + 亮度"组合出来的，定义见 src/styles.rs。
2. ColorScheme（色彩方案）：由 primary、secondary、tertiary、error、neutral、neutral_variant 六个颜色源组成，见 src/styles.rs。
3. 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 的做法是：你只给主色，其余全部智能生成——

一行代码就能得到完整方案：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 的场景。

小结 🏁

Cushy 的主题系统用"一个主色派生全套配色 + 明暗双主题 + 实时预览"的组合，把 GUI 应用中通常最繁琐的样式配置变得像调色盘一样简单。建议直接跑起来theme示例，边拖滑杆边感受 OKLab 色相的顺滑过渡——这就是它与其他 GUI 框架最不一样的地方。

【免费下载链接】cushyAn experimental cross-platform graphical user interface (GUI) crate for Rust.项目地址: https://gitcode.com/gh_mirrors/cu/cushy