adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-01-22 22:09:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: theme

Browse source
This commit is contained in:
luoxiao 2023-10-26 23:24:16 +08:00
parent 6fff3b22c2
commit fee54b3a70
8 changed files with 73 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
demo/src/components/site_header.rs
View file

@ -5,9 +5,17 @@ use melt_ui::*;
#[component]
pub fn SiteHeader() -> impl IntoView {
let theme = use_rw_theme();
let theme_name = create_memo(move |_| theme.with(|theme| theme.name.clone()));
let theme_name = create_memo(move |_| {
theme.with(|theme| {
if theme.name == "light".to_string() {
"Dark"
} else {
"Light"
}
})
});
let on_theme = move |_| {
if theme_name.get_untracked() != "Light".to_string() {
if theme_name.get_untracked() == "Light" {
theme.set(Theme::light())
} else {
theme.set(Theme::dark())

4
demo/src/pages/input/mod.rs
View file

@ -12,7 +12,7 @@ pub fn InputPage() -> impl IntoView {
<Demo>
<Space vertical=true>
<Input value/>
<Input value variant=InputVariant::Password/>
<Input value variant=InputVariant::Password placeholder="Password"/>
<Input value>
<InputSuffix slot>
"$"
@ -27,7 +27,7 @@ pub fn InputPage() -> impl IntoView {
view! {
<Input value/>
<Input value variant=InputVariant::Password />
<Input value variant=InputVariant::Password placeholder="Password"/>
<Input value>
<InputSuffix slot>
"$"

6
src/button/mod.rs
View file

@ -66,10 +66,10 @@ pub fn Button(
let css_vars = create_memo(move |_| {
let mut css_vars = String::new();
theme.with(|theme| {
let bg_color = color.get().theme_color(&theme);
let bg_color = color.get().theme_color(theme);
if variant.get() == ButtonVariant::Primary {
let bg_color_hover = color.get().theme_color_hover(&theme);
let bg_color_active = color.get().theme_color_active(&theme);
let bg_color_hover = color.get().theme_color_hover(theme);
let bg_color_active = color.get().theme_color_active(theme);
css_vars.push_str(&format!("--background-color: {bg_color};"));
css_vars.push_str(&format!("--background-color-hover: {bg_color_hover};"));
css_vars.push_str(&format!("--background-color-active: {bg_color_active};"));

16
src/input/input.css
View file

@ -3,29 +3,33 @@
width: 100%;
box-sizing: border-box;
padding: 0 10px;
background-color: #fafbfc;
color: #24292e;
background-color: var(--melt-background-color);
font-size: 14px;
border: 1px solid #e0e0e6;
border-radius: var(--border-radius);
color: var(--melt-font-color);
border: 1px solid var(--melt-border-color);
border-radius: var(--melt-border-radius);
cursor: text;
transition: all 0.3s;
}
.melt-input:hover {
border-color: var(--border-color-hover);
border-color: var(--melt-border-color-hover);
}
.melt-input__input-el {
width: 100%;
height: 30px;
background-color: transparent;
color: #24292e;
color: var(--melt-font-color);
line-height: 30px;
font-size: inherit;
border: none;
outline: none;
}
.melt-input__input-el::placeholder {
color: var(--melt-placeholder-color);
}
.melt-input__suffix {
display: inline-flex;
align-items: center;

24
src/input/mod.rs
View file

@ -65,11 +65,25 @@ pub fn Input(
let css_vars = create_memo(move |_| {
let mut css_vars = String::new();
let theme = theme.get();
let border_color_hover = theme.common.color_primary.clone();
css_vars.push_str(&format!("--border-color-hover: {border_color_hover};"));
let border_radius = theme.common.border_radius.clone();
css_vars.push_str(&format!("--border-radius: {border_radius};"));
theme.with(|theme| {
let border_color_hover = theme.common.color_primary.clone();
css_vars.push_str(&format!("--melt-border-color-hover: {border_color_hover};"));
let border_radius = theme.common.border_radius.clone();
css_vars.push_str(&format!("--melt-border-radius: {border_radius};"));
css_vars.push_str(&format!(
"--melt-background-color: {};",
theme.input.background_color
));
css_vars.push_str(&format!("--melt-font-color: {};", theme.input.font_color));
css_vars.push_str(&format!(
"--melt-border-color: {};",
theme.input.border_color
));
css_vars.push_str(&format!(
"--melt-placeholder-color: {};",
theme.input.placeholder_color
));
});
css_vars
});
view! {

21
src/input/theme.rs
View file

@ -1,14 +1,29 @@
use crate::theme::ThemeMethod;
#[derive(Clone)]
pub struct InputTheme {}
pub struct InputTheme {
pub font_color: String,
pub placeholder_color: String,
pub border_color: String,
pub background_color: String,
}
impl ThemeMethod for InputTheme {
fn light() -> Self {
Self {}
Self {
font_color: "#333639".into(),
placeholder_color: "#c2c2c2".into(),
border_color: "#e0e0e6".into(),
background_color: "#fff".into(),
}
}
fn dark() -> Self {
Self {}
Self {
font_color: "#ffffffd1".into(),
placeholder_color: "#c2c2c2".into(),
border_color: "#0000".into(),
background_color: "#ffffff1a".into(),
}
}
}

18
src/tag/theme.rs
View file

@ -30,15 +30,15 @@ impl ThemeMethod for TagTheme {
fn dark() -> Self {
Self {
default_font_color: "#333639".into(),
default_background_color: "#fafafc".into(),
default_border_color: " #e0e0e6".into(),
success_background_color: "#edf7f2".into(),
success_border_color: "#c5e7d5".into(),
warning_background_color: "#fef7ed".into(),
warning_border_color: "#fae0b5".into(),
error_background_color: "#fbeef1".into(),
error_border_color: "#f3cbd3".into(),
default_font_color: "#ffffffd1".into(),
default_background_color: "#0000".into(),
default_border_color: "#ffffff3d".into(),
success_background_color: "#0000".into(),
success_border_color: "#63e2b74d".into(),
warning_background_color: "#0000".into(),
warning_border_color: "#f2c97d4d".into(),
error_background_color: "#0000".into(),
error_border_color: "#e880804d".into(),
}
}
}

4
src/theme/mod.rs
View file

@ -25,7 +25,7 @@ pub struct Theme {
impl Theme {
pub fn light() -> Self {
Self {
name: "Light".into(),
name: "light".into(),
common: CommonTheme::light(),
button: ButtonTheme::light(),
input: InputTheme::light(),
@ -38,7 +38,7 @@ impl Theme {
}
pub fn dark() -> Self {
Self {
name: "Dark".into(),
name: "dark".into(),
common: CommonTheme::dark(),
button: ButtonTheme::dark(),
input: InputTheme::dark(),