mirror of
https://github.com/adoyle0/thaw.git
synced 2025-01-23 22:39:23 -05:00
63 lines
1.5 KiB
Markdown
63 lines
1.5 KiB
Markdown
# Theme
|
|
|
|
### ThemeProvider
|
|
|
|
```rust demo
|
|
let theme = create_rw_signal(Theme::light());
|
|
|
|
view! {
|
|
<ThemeProvider theme>
|
|
<Card>
|
|
<Space>
|
|
<Button on_click=move |_| theme.set(Theme::light())>"Light"</Button>
|
|
<Button on_click=move |_| theme.set(Theme::dark())>"Dark"</Button>
|
|
</Space>
|
|
</Card>
|
|
</ThemeProvider>
|
|
}
|
|
```
|
|
|
|
### GlobalStyle
|
|
|
|
You can use GlobalStyle to sync common global style to the body element.
|
|
|
|
```rust
|
|
let theme = create_rw_signal(Theme::light());
|
|
|
|
view! {
|
|
<ThemeProvider theme>
|
|
<GlobalStyle />
|
|
"..."
|
|
</ThemeProvider>
|
|
}
|
|
```
|
|
|
|
### Customize Theme
|
|
|
|
```rust demo
|
|
let theme = create_rw_signal(Theme::light());
|
|
let on_customize_theme = move |_| {
|
|
theme.update(|theme| {
|
|
theme.common.color_primary = "#f5222d".to_string();
|
|
theme.common.color_primary_hover = "#ff4d4f".to_string();
|
|
theme.common.color_primary_active = "#cf1322".to_string();
|
|
});
|
|
};
|
|
|
|
view! {
|
|
<ThemeProvider theme>
|
|
<Card>
|
|
<Space>
|
|
<Button on_click=move |_| theme.set(Theme::light())>"Light"</Button>
|
|
<Button on_click=on_customize_theme>"Customize Theme"</Button>
|
|
</Space>
|
|
</Card>
|
|
</ThemeProvider>
|
|
}
|
|
```
|
|
|
|
### ThemeProvider Props
|
|
|
|
| Name | Type | Default | Description |
|
|
| ----- | ------------------------- | -------------------- | ----------- |
|
|
| theme | `Option<RwSignal<Theme>>` | `Default::default()` | Theme. |
|