Rust Material Design色彩库material-colors使用指南

简介

material-colors是一个Rust实现的Material Design色彩库，提供了标准化的Material Design调色板和色彩工具，帮助开发者在Rust项目中轻松使用Material Design的色彩系统。

安装

在Cargo.toml中添加依赖：

[dependencies]
material-colors = "0.1"

基本使用

1. 访问预设颜色

use material_colors::color::MaterialColor;

fn main() {
    // 获取红色500色值
    let red_500 = MaterialColor::Red.get(500);
    println!("Red 500: {:?}", red_500);
    
    // 获取蓝色200色值
    let blue_200 = MaterialColor::Blue.get(200);
    println!("Blue 200: {:?}", blue_200);
}

2. 使用完整的Material调色板

use material_colors::color::{MaterialColor, Color};

fn main() {
    // 获取完整的蓝色调色板
    let blue_palette = MaterialColor::Blue.palette();
    
    // 遍历所有色阶
    for (shade, color) in blue_palette.iter() {
        println!("Blue {}: {:?}", shade, color);
    }
    
    // 使用特定颜色
    let primary_color = blue_palette.get(&500).unwrap();
    println!("Primary color: {:?}", primary_color);
}

高级功能

1. 颜色转换

use material_colors::color::{MaterialColor, Color};

fn main() {
    let color = MaterialColor::Indigo.get(500);
    
    // 转换为HEX字符串
    println!("HEX: {}", color.to_hex());
    
    // 转换为RGB元组
    println!("RGB: {:?}", color.to_rgb());
    
    // 转换为HSL元组
    println!("HSL: {:?}", color.to_hsl());
}

2. 颜色混合

use material_colors::color::{MaterialColor, Color};

fn main() {
    let red = MaterialColor::Red.get(500);
    let blue = MaterialColor::Blue.get(500);
    
    // 混合颜色(50%红色 + 50%蓝色)
    let purple = red.mix(&blue, 0.5);
    println!("Purple: {:?}", purple);
}

3. 颜色亮度调整

use material_colors::color::{MaterialColor, Color};

fn main() {
    let mut color = MaterialColor::Teal.get(500);
    
    // 调亮20%
    let lighter = color.lighten(0.2);
    println!("Lighter: {:?}", lighter);
    
    // 调暗20%
    let darker = color.darken(0.2);
    println!("Darker: {:?}", darker);
}

实用工具

1. 对比度检查

use material_colors::color::{MaterialColor, Color};

fn main() {
    let text_color = MaterialColor::White.get(0); // 白色
    let bg_color = MaterialColor::DeepPurple.get(500); // 深紫色
    
    // 检查对比度是否符合WCAG标准
    let contrast_ratio = text_color.contrast_ratio(&bg_color);
    println!("Contrast ratio: {:.2}", contrast_ratio);
    
    if text_color.has_sufficient_contrast(&bg_color) {
        println!("This color combination meets WCAG AA standards");
    } else {
        println!("This color combination does NOT meet WCAG AA standards");
    }
}

2. 随机颜色生成

use material_colors::color::MaterialColor;

fn main() {
    // 随机获取一个Material颜色
    let random_color = MaterialColor::random();
    println!("Random color: {:?}", random_color);
    
    // 随机获取一个特定色阶的颜色
    let random_shade = random_color.get(700);
    println!("Random shade: {:?}", random_shade);
}

实际应用示例

创建主题色板

use material_colors::color::{MaterialColor, Color};

struct AppTheme {
    primary: Color,
    secondary: Color,
    background: Color,
    surface: Color,
    error: Color,
}

impl AppTheme {
    fn new() -> Self {
        Self {
            primary: MaterialColor::Indigo.get(500),
            secondary: MaterialColor::Pink.get(400),
            background: MaterialColor::Grey.get(50),
            surface: MaterialColor::White.get(0),
            error: MaterialColor::Red.get(400),
        }
    }
}

fn main() {
    let theme = AppTheme::new();
    println!("Primary color: {}", theme.primary.to_hex());
}

响应式颜色调整

use material_colors::color::{MaterialColor, Color};

fn get_color_for_state(is_active: bool) -> Color {
    let base_color = MaterialColor::Blue.get(500);
    
    if is_active {
        base_color.lighten(0.1)
    } else {
        base_color.darken(0.1)
    }
}

fn main() {
    let active_color = get_color_for_state(true);
    let inactive_color = get_color_for_state(false);
    
    println!("Active: {}, Inactive: {}", 
        active_color.to_hex(), 
        inactive_color.to_hex());
}

完整示例

下面是一个完整的示例，展示了如何创建一个简单的GUI应用主题：

use material_colors::color::{MaterialColor, Color};

// 定义应用主题
#[derive(Debug)]
struct AppTheme {
    primary: Color,
    secondary: Color,
    background: Color,
    surface: Color,
    error: Color,
    on_primary: Color,
    on_secondary: Color,
    on_background: Color,
    on_surface: Color,
    on_error: Color,
}

impl AppTheme {
    // 创建浅色主题
    fn light() -> Self {
        Self {
            primary: MaterialColor::Indigo.get(500),
            secondary: MaterialColor::Pink.get(400),
            background: MaterialColor::Grey.get(50),
            surface: MaterialColor::White.get(0),
            error: MaterialColor::Red.get(400),
            on_primary: MaterialColor::White.get(0),
            on_secondary: MaterialColor::Black.get(0),
            on_background: MaterialColor::Black.get(0),
            on_surface: MaterialColor::Black.get(0),
            on_error: MaterialColor::White.get(0),
        }
    }

    // 创建深色主题
    fn dark() -> Self {
        Self {
            primary: MaterialColor::Indigo.get(200),
            secondary: MaterialColor::Pink.get(200),
            background: MaterialColor::Grey.get(900),
            surface: MaterialColor::Grey.get(800),
            error: MaterialColor::Red.get(300),
            on_primary: MaterialColor::Black.get(0),
            on_secondary: MaterialColor::Black.get(0),
            on_background: MaterialColor::White.get(0),
            on_surface: MaterialColor::White.get(0),
            on_error: MaterialColor::Black.get(0),
        }
    }

    // 检查主题的可访问性
    fn check_accessibility(&self) {
        println!("Checking theme accessibility...");
        
        // 检查主要颜色对比度
        let primary_contrast = self.on_primary.contrast_ratio(&self.primary);
        println!("Primary contrast ratio: {:.2}", primary_contrast);
        
        // 检查背景颜色对比度
        let background_contrast = self.on_background.contrast_ratio(&self.background);
        println!("Background contrast ratio: {:.2}", background_contrast);
    }
}

// 按钮组件示例
struct Button {
    text: String,
    background: Color,
    text_color: Color,
}

impl Button {
    fn new(text: &str, background: Color, text_color: Color) -> Self {
        Self {
            text: text.to_string(),
            background,
            text_color,
        }
    }

    fn render(&self) {
        println!("Rendering button '{}'", self.text);
        println!("Background: {}", self.background.to_hex());
        println!("Text color: {}", self.text_color.to_hex());
        
        let contrast = self.text_color.contrast_ratio(&self.background);
        println!("Contrast ratio: {:.2}", contrast);
    }
}

fn main() {
    // 创建浅色主题
    let light_theme = AppTheme::light();
    light_theme.check_accessibility();
    
    // 创建深色主题
    let dark_theme = AppTheme::dark();
    dark_theme.check_accessibility();
    
    // 使用主题创建按钮
    let primary_button = Button::new(
        "Click me", 
        light_theme.primary, 
        light_theme.on_primary
    );
    primary_button.render();
    
    // 创建禁用状态按钮
    let disabled_button = Button::new(
        "Disabled", 
        light_theme.primary.darken(0.3).desaturate(0.5), 
        light_theme.on_primary.lighten(0.2)
    );
    disabled_button.render();
}

总结

material-colors库为Rust开发者提供了完整的Material Design色彩系统实现，包括：

1. 所有标准Material颜色及其色阶
2. 颜色转换工具(HEX, RGB, HSL)
3. 颜色混合和调整功能
4. 对比度检查和可访问性工具
5. 实用颜色生成功能

通过这个库，开发者可以轻松地在Rust应用中实现符合Material Design规范的颜色系统。