Cushy主题与样式实战:从暗色模式切换到OKLab色彩方案编辑器手把手教程 Cushy主题与样式实战从暗色模式切换到OKLab色彩方案编辑器手把手教程【免费下载链接】cushyAn experimental cross-platform graphical user interface (GUI) crate for Rust.项目地址: https://gitcode.com/gh_mirrors/cu/cushyCushy 是一个实验性的跨平台 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/3error从红色系选取并自动避开与前三者撞色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.rsCushy 的主题系统用一个主色派生全套配色 明暗双主题 实时预览的组合把 GUI 应用中通常最繁琐的样式配置变得像调色盘一样简单。建议直接跑起来theme示例边拖滑杆边感受 OKLab 色相的顺滑过渡——这就是它与其他 GUI 框架最不一样的地方。【免费下载链接】cushyAn experimental cross-platform graphical user interface (GUI) crate for Rust.项目地址: https://gitcode.com/gh_mirrors/cu/cushy创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考