mirror of
https://github.com/adoyle0/thaw.git
synced 2025-01-23 06:19:22 -05:00
feat: theme
This commit is contained in:
parent
0a2e035b75
commit
5b57d9a63d
4 changed files with 83 additions and 15 deletions
|
@ -1,3 +1,5 @@
|
|||
mod theme;
|
||||
|
||||
use crate::{
|
||||
teleport::Teleport,
|
||||
theme::use_theme,
|
||||
|
@ -6,6 +8,7 @@ use crate::{
|
|||
};
|
||||
use leptos::*;
|
||||
use std::hash::Hash;
|
||||
pub use theme::SelectTheme;
|
||||
use wasm_bindgen::__rt::IntoJsResult;
|
||||
|
||||
#[derive(Clone, PartialEq, Eq, Hash)]
|
||||
|
@ -27,14 +30,43 @@ where
|
|||
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 = theme.common.color_primary;
|
||||
css_vars.push_str(&format!("--font-color: {bg_color};"));
|
||||
css_vars.push_str(&format!("--border-color-hover: {bg_color};"));
|
||||
theme.with(|theme| {
|
||||
let border_color_hover = theme.common.color_primary.clone();
|
||||
css_vars.push_str(&format!("--melt-border-color-hover: {border_color_hover};"));
|
||||
css_vars.push_str(&format!(
|
||||
"--melt-background-color: {};",
|
||||
theme.select.background_color
|
||||
));
|
||||
css_vars.push_str(&format!("--melt-font-color: {};", theme.select.font_color));
|
||||
css_vars.push_str(&format!(
|
||||
"--melt-border-color: {};",
|
||||
theme.select.border_color
|
||||
));
|
||||
});
|
||||
|
||||
css_vars
|
||||
});
|
||||
|
||||
let popover_css_vars = create_memo(move |_| {
|
||||
let mut css_vars = String::new();
|
||||
theme.with(|theme| {
|
||||
css_vars.push_str(&format!(
|
||||
"--melt-background-color: {};",
|
||||
theme.select.popover_background_color
|
||||
));
|
||||
css_vars.push_str(&format!(
|
||||
"--melt-background-color-hover: {};",
|
||||
theme.select.popover_background_color_hover
|
||||
));
|
||||
css_vars.push_str(&format!("--melt-font-color: {};", theme.select.font_color));
|
||||
css_vars.push_str(&format!(
|
||||
"--melt-font-color-selected: {};",
|
||||
theme.common.color_primary
|
||||
));
|
||||
});
|
||||
css_vars
|
||||
});
|
||||
|
||||
let is_show_popover = create_rw_signal(false);
|
||||
let trigger_ref = create_node_ref::<html::Div>();
|
||||
let popover_ref = create_node_ref::<html::Div>();
|
||||
|
@ -94,9 +126,9 @@ where
|
|||
class="melt-select-menu"
|
||||
style=move || {
|
||||
if is_show_popover.get() {
|
||||
css_vars.get()
|
||||
popover_css_vars.get()
|
||||
} else {
|
||||
format!("display: none; {}", css_vars.get())
|
||||
"display: none;".into()
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -3,9 +3,9 @@
|
|||
padding: 0 10px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
background-color: #fafbfc;
|
||||
color: #24292e;
|
||||
border: 1px solid #e0e0e6;
|
||||
background-color: var(--melt-background-color);
|
||||
color: var(--melt-font-color);
|
||||
border: 1px solid var(--melt-border-color);
|
||||
border-radius: 3px;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
|
@ -13,11 +13,12 @@
|
|||
}
|
||||
|
||||
.melt-select:hover {
|
||||
border-color: var(--border-color-hover);
|
||||
border-color: var(--melt-border-color-hover);
|
||||
}
|
||||
|
||||
.melt-select-menu {
|
||||
background-color: #fff;
|
||||
color: var(--melt-font-color);
|
||||
background-color: var(--melt-background-color);
|
||||
box-sizing: border-box;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
|
@ -38,9 +39,9 @@
|
|||
}
|
||||
|
||||
.melt-select-menu__item:hover {
|
||||
background-color: #f6f6f7;
|
||||
background-color: var(--melt-background-color-hover);
|
||||
}
|
||||
|
||||
.melt-select-menu__item-selected {
|
||||
color: var(--font-color);
|
||||
color: var(--melt-font-color-selected);
|
||||
}
|
||||
|
|
32
src/select/theme.rs
Normal file
32
src/select/theme.rs
Normal file
|
@ -0,0 +1,32 @@
|
|||
use crate::theme::ThemeMethod;
|
||||
|
||||
#[derive(Clone)]
|
||||
pub struct SelectTheme {
|
||||
pub font_color: String,
|
||||
pub border_color: String,
|
||||
pub background_color: String,
|
||||
pub popover_background_color: String,
|
||||
pub popover_background_color_hover: String,
|
||||
}
|
||||
|
||||
impl ThemeMethod for SelectTheme {
|
||||
fn light() -> Self {
|
||||
Self {
|
||||
font_color: "#333639".into(),
|
||||
border_color: "#e0e0e6".into(),
|
||||
background_color: "#fff".into(),
|
||||
popover_background_color: "#fff".into(),
|
||||
popover_background_color_hover: "#f3f5f6".into(),
|
||||
}
|
||||
}
|
||||
|
||||
fn dark() -> Self {
|
||||
Self {
|
||||
font_color: "#ffffffd1".into(),
|
||||
border_color: "#0000".into(),
|
||||
background_color: "#ffffff1a".into(),
|
||||
popover_background_color: "#48484e".into(),
|
||||
popover_background_color_hover: "#ffffff17".into(),
|
||||
}
|
||||
}
|
||||
}
|
|
@ -2,8 +2,8 @@ mod common;
|
|||
|
||||
use self::common::CommonTheme;
|
||||
use crate::{
|
||||
AlertTheme, AvatarTheme, ButtonTheme, InputTheme, MenuTheme, MessageTheme, SkeletionTheme,
|
||||
TableTheme, TagTheme,
|
||||
AlertTheme, AvatarTheme, ButtonTheme, InputTheme, MenuTheme, MessageTheme, SelectTheme,
|
||||
SkeletionTheme, TableTheme, TagTheme,
|
||||
};
|
||||
use leptos::*;
|
||||
|
||||
|
@ -25,6 +25,7 @@ pub struct Theme {
|
|||
pub tag: TagTheme,
|
||||
pub avatar: AvatarTheme,
|
||||
pub message: MessageTheme,
|
||||
pub select: SelectTheme,
|
||||
}
|
||||
|
||||
impl Theme {
|
||||
|
@ -41,6 +42,7 @@ impl Theme {
|
|||
tag: TagTheme::light(),
|
||||
avatar: AvatarTheme::light(),
|
||||
message: MessageTheme::light(),
|
||||
select: SelectTheme::light(),
|
||||
}
|
||||
}
|
||||
pub fn dark() -> Self {
|
||||
|
@ -56,6 +58,7 @@ impl Theme {
|
|||
tag: TagTheme::dark(),
|
||||
avatar: AvatarTheme::dark(),
|
||||
message: MessageTheme::dark(),
|
||||
select: SelectTheme::dark(),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue