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

feat: theme

Browse source
This commit is contained in:
luoxiao 2023-10-26 18:03:24 +08:00
parent 5c3992c0e2
commit 6fff3b22c2
8 changed files with 65 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -8,10 +8,10 @@ pub fn GridPage() -> impl IntoView {
mount_style(
"grid-demo",
r#".melt-grid-item {
height: 130px;
height: 60px;
color: white;
text-align: center;
line-height: 130px;
line-height: 60px;
}
.melt-grid-item:nth-child(odd) {
background-color: #3d8ae5dd;

1
src/button/button.css
View file

@ -33,7 +33,6 @@
.melt-button--text:hover {
color: var(--font-color-hover);
background-color: #f2f2f2;
}
.melt-button--link {

43
src/button/mod.rs
View file

@ -65,22 +65,33 @@ pub fn Button(
let theme = use_theme(Theme::light);
let css_vars = create_memo(move |_| {
let mut css_vars = String::new();
let theme = theme.get();
let bg_color = color.get().theme_color(&theme);
let bg_color_hover = color.get().theme_color_hover(&theme);
let bg_color_active = color.get().theme_color_active(&theme);
if variant.get() == ButtonVariant::Primary {
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};"));
css_vars.push_str("--font-color: #fff;");
css_vars.push_str(&format!("--border-color: {bg_color};"));
css_vars.push_str(&format!("--border-color-hover: {bg_color};"));
} else {
css_vars.push_str(&format!("--font-color-hover: {bg_color};"));
css_vars.push_str("--border-color: #555a;");
css_vars.push_str("--border-color-hover: #555;");
}
theme.with(|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);
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};"));
css_vars.push_str("--font-color: #fff;");
css_vars.push_str(&format!("--border-color: {bg_color};"));
css_vars.push_str(&format!("--border-color-hover: {bg_color};"));
} else if variant.get() == ButtonVariant::Text {
css_vars.push_str(&format!("--font-color-hover: {bg_color};"));
css_vars.push_str(&format!(
"--background-color-hover: {};",
theme.button.color_text_hover
));
css_vars.push_str(&format!(
"--background-color-active: {};",
theme.button.color_text_active
));
} else {
css_vars.push_str(&format!("--font-color-hover: {bg_color};"));
css_vars.push_str("--border-color: #555a;");
css_vars.push_str("--border-color-hover: #555;");
}
});
css_vars
});

15
src/button/theme.rs
View file

@ -1,14 +1,23 @@
use crate::theme::ThemeMethod;
#[derive(Clone)]
pub struct ButtonTheme {}
pub struct ButtonTheme {
pub color_text_hover: String,
pub color_text_active: String,
}
impl ThemeMethod for ButtonTheme {
fn light() -> Self {
Self {}
Self {
color_text_hover: "#f1f3f5".into(),
color_text_active: "#eceef0".into(),
}
}
fn dark() -> Self {
Self {}
Self {
color_text_hover: "#ffffff1a".into(),
color_text_active: "#ffffff26".into(),
}
}
}

6
src/card/card.css
View file

@ -1,7 +1,7 @@
.melt-card {
display: flex;
flex-direction: column;
border: 1px solid #efeff5;
border: 1px solid var(--melt-border-color);
border-radius: 3px;
overflow: hidden;
}
@ -21,12 +21,12 @@
.melt-card__content,
.melt-card__footer {
padding: 12px 28px;
background-color: #fff;
background-color: var(--melt-background-color);
}
.melt-card__header {
padding: 20px 28px;
}
.melt-card__header+.melt-card__content,
.melt-card__header + .melt-card__content,
.melt-card__footer {
padding: 0 28px 20px;
}

19
src/card/mod.rs
View file

@ -1,4 +1,4 @@
use crate::{components::*, utils::mount_style::mount_style};
use crate::{components::*, use_theme, utils::mount_style::mount_style, Theme};
use leptos::*;
#[derive(Clone)]
@ -29,6 +29,21 @@ pub fn Card(
#[prop(optional)] card_footer: Option<CardFooter>,
) -> impl IntoView {
mount_style("card", include_str!("./card.css"));
let theme = use_theme(Theme::light);
let css_vars = create_memo(move |_| {
let mut css_vars = String::new();
theme.with(|theme| {
css_vars.push_str(&format!(
"--melt-background-color: {};",
theme.common.background_color
));
css_vars.push_str(&format!(
"--melt-border-color: {};",
theme.common.border_color
));
});
css_vars
});
let title = store_value(title);
let is_header = card_header.is_some();
@ -37,7 +52,7 @@ pub fn Card(
let header_extra = store_value(card_header_extra);
view! {
<div class="melt-card">
<div class="melt-card" style=move || css_vars.get()>
<If cond=is_header>
<Then slot>
<div class="melt-card__header">

2
src/layout/layout-sider.css
View file

@ -1,5 +1,5 @@
.melt-layout-sider {
position: relative;
min-width: 208px;
min-width: 240px;
overflow: auto;
}

6
src/menu/theme.rs
View file

@ -18,9 +18,9 @@ impl ThemeMethod for MenuTheme {
fn dark() -> Self {
Self {
color: "#4b5263".into(),
item_color_hover: "#f3f5f6".into(),
group_color: "#111727".into(),
color: "#9ca5b0".into(),
item_color_hover: "#383f5233".into(),
group_color: "#ffffffe6".into(),
}
}
}