color-scheme

目录

• 安装
• 用法
• 许可证
• 贡献
• 待办事项

安装

用法

这是一个非常简单的 prefers-color-scheme 媒体查询绑定。示例中的程序可以使用 trunk serve 运行。

用法

use prefers_color_scheme::{prefers_dark, prefers_light};
use yew::prelude::*;

enum Msg {
    Query,
}

struct Model {}

impl Component for Model {
    type Message = Msg;
    type Properties = ();

    fn create(_ctx: &Context<Self>) -> Self {
        Self {}
    }

    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
        match msg {
            Msg::Query => true,
        }
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        // This gives us a component's "`Scope`" which allows us to send messages, etc to the component.
        let link = ctx.link();
        html! {
            <div>
                <button onclick={link.callback(|_| Msg::Query)}>{ "Query" }</button>
                <p>{"Prefers Dark:"} { prefers_dark() }</p>
                <p>{"Prefers Light:"} { prefers_light() }</p>
            </div>
        }
    }
}

fn main() {
    yew::start_app::<Model>();
}

许可证

本程序根据 MIT 许可证条款分发。

贡献

欢迎所有贡献。我们始终感激 pull 请求和问题报告。请在提交 pull 请求之前确保所有现有测试都通过。

待办事项