diff --git a/demo/src/app.rs b/demo/src/app.rs
index 2ee8efe..b366485 100644
--- a/demo/src/app.rs
+++ b/demo/src/app.rs
@@ -117,11 +117,9 @@ fn TheProvider(children: Children) -> impl IntoView {
view! {
-
//
- {children()}
+ {children()}
//
-
}
}
diff --git a/demo/src/components/demo.rs b/demo/src/components/demo.rs
index a962380..ba488f0 100644
--- a/demo/src/components/demo.rs
+++ b/demo/src/components/demo.rs
@@ -11,11 +11,11 @@ pub struct DemoCode {
#[component]
pub fn Demo(demo_code: DemoCode, #[prop(optional)] children: Option) -> impl IntoView {
- let theme = use_theme(Theme::light);
+ let theme = Theme::use_theme(Theme::light);
let css_vars = Memo::new(move |_| {
let mut css_vars = String::new();
theme.with(|theme| {
- if theme.common.color_scheme == "dark" {
+ if theme.color.color_scheme == "dark" {
css_vars.push_str("--demo-color: #ffffff60;");
css_vars.push_str("--demo-color-hover: #ffffffe0;");
css_vars.push_str("--demo-border-color: #383f52;");
@@ -24,8 +24,7 @@ pub fn Demo(demo_code: DemoCode, #[prop(optional)] children: Option) -
css_vars.push_str("--demo-color: #00000060;");
css_vars.push_str("--demo-color-hover: #000000e0;");
css_vars.push_str(&format!(
- "--demo-border-color: {};",
- theme.common.border_color
+ "--demo-border-color: var(--colorNeutralStroke2);",
));
css_vars.push_str("--demo-background-color: #f9fafb;");
}
@@ -34,12 +33,7 @@ pub fn Demo(demo_code: DemoCode, #[prop(optional)] children: Option) -
});
let code_class = Memo::new(move |_| {
- theme.with(|theme| {
- format!(
- "demo-demo__code color-scheme--{}",
- theme.common.color_scheme
- )
- })
+ theme.with(|theme| format!("demo-demo__code color-scheme--{}", theme.color.color_scheme))
});
let is_show_code = RwSignal::new(children.is_none());
diff --git a/demo/src/components/site_header.rs b/demo/src/components/site_header.rs
index 960700e..c0bcb46 100644
--- a/demo/src/components/site_header.rs
+++ b/demo/src/components/site_header.rs
@@ -6,7 +6,7 @@ use thaw::*;
#[component]
pub fn SiteHeader() -> impl IntoView {
- let theme = use_rw_theme();
+ let theme = Theme::use_rw_theme();
let theme_name = create_memo(move |_| {
theme.with(|theme| {
if theme.name == *"light" {
diff --git a/thaw/src/message/mod.rs b/thaw/src/message/mod.rs
index 68c5f3c..7fd32f4 100644
--- a/thaw/src/message/mod.rs
+++ b/thaw/src/message/mod.rs
@@ -1,10 +1,8 @@
mod message_provider;
-mod theme;
pub use message_provider::*;
-pub use theme::MessageTheme;
-use crate::{theme::use_theme, Icon, Theme};
+use crate::{Icon, Theme};
use leptos::*;
use thaw_components::{CSSTransition, If, Then};
use uuid::Uuid;
@@ -25,13 +23,13 @@ impl MessageVariant {
MessageVariant::Error => icondata_ai::AiCheckCircleFilled,
}
}
- fn theme_color(&self, theme: &Theme) -> String {
- match self {
- MessageVariant::Success => theme.common.color_success.clone(),
- MessageVariant::Warning => theme.common.color_warning.clone(),
- MessageVariant::Error => theme.common.color_error.clone(),
- }
- }
+ // fn theme_color(&self, theme: &Theme) -> String {
+ // match self {
+ // MessageVariant::Success => theme.common.color_success.clone(),
+ // MessageVariant::Warning => theme.common.color_warning.clone(),
+ // MessageVariant::Error => theme.common.color_error.clone(),
+ // }
+ // }
}
#[component]
@@ -49,7 +47,7 @@ fn Message(message: MessageType, #[prop(into)] on_close: Callback) ->
);
}
- let theme = use_theme(Theme::light);
+ // let theme = use_theme(Theme::light);
let css_vars = create_memo(move |_| {
let mut css_vars = String::new();
// theme.with(|theme| {
@@ -60,7 +58,7 @@ fn Message(message: MessageType, #[prop(into)] on_close: Callback) ->
// });
css_vars
});
- let style = theme.with_untracked(|theme| format!("color: {};", variant.theme_color(theme)));
+ // let style = theme.with_untracked(|theme| format!("color: {};", variant.theme_color(theme)));
let on_before_leave = Callback::new(move |_| {
let Some(node_el) = message_ref.get() else {
@@ -89,7 +87,7 @@ fn Message(message: MessageType, #[prop(into)] on_close: Callback) ->
-
+
{content}
diff --git a/thaw/src/message/theme.rs b/thaw/src/message/theme.rs
deleted file mode 100644
index 53a27ff..0000000
--- a/thaw/src/message/theme.rs
+++ /dev/null
@@ -1,20 +0,0 @@
-use crate::theme::ThemeMethod;
-
-#[derive(Clone)]
-pub struct MessageTheme {
- pub background_color: String,
-}
-
-impl ThemeMethod for MessageTheme {
- fn light() -> Self {
- Self {
- background_color: "#fff".into(),
- }
- }
-
- fn dark() -> Self {
- Self {
- background_color: "#48484e".into(),
- }
- }
-}
diff --git a/thaw/src/theme/color.rs b/thaw/src/theme/color.rs
index 7b6ee65..c9078e7 100644
--- a/thaw/src/theme/color.rs
+++ b/thaw/src/theme/color.rs
@@ -2,6 +2,8 @@ use thaw_macro::WriteCSSVars;
#[derive(Clone, WriteCSSVars)]
pub struct ColorTheme {
+ pub color_scheme: String,
+
pub color_neutral_background_static: String,
pub color_neutral_background_inverted: String,
pub color_neutral_background_disabled: String,
@@ -113,6 +115,8 @@ pub struct ColorTheme {
impl ColorTheme {
pub fn light() -> Self {
Self {
+ color_scheme: "light".into(),
+
color_neutral_background_static: "#333333".into(),
color_neutral_background_inverted: "#292929".into(),
color_neutral_background_disabled: "#f0f0f0".into(),
@@ -225,6 +229,8 @@ impl ColorTheme {
pub fn dark() -> Self {
Self {
+ color_scheme: "dark".into(),
+
color_neutral_background_static: "#3d3d3d".into(),
color_neutral_background_inverted: "#ffffff".into(),
color_neutral_background_disabled: "#141414".into(),
diff --git a/thaw/src/theme/common.rs b/thaw/src/theme/common.rs
index eb9c669..2ad3634 100644
--- a/thaw/src/theme/common.rs
+++ b/thaw/src/theme/common.rs
@@ -1,24 +1,8 @@
-use super::ThemeMethod;
use thaw_macro::WriteCSSVars;
#[derive(Clone, WriteCSSVars)]
pub struct CommonTheme {
pub font_family_base: String,
- pub border_color: String,
- pub color_scheme: String,
-
- pub color_primary: String,
- pub color_primary_hover: String,
- pub color_primary_active: String,
- pub color_success: String,
- pub color_success_hover: String,
- pub color_success_active: String,
- pub color_warning: String,
- pub color_warning_hover: String,
- pub color_warning_active: String,
- pub color_error: String,
- pub color_error_hover: String,
- pub color_error_active: String,
pub font_size_base_100: String,
pub font_size_base_200: String,
@@ -75,34 +59,13 @@ pub struct CommonTheme {
pub curve_decelerate_max: String,
pub curve_decelerate_mid: String,
pub curve_easy_ease: String,
-
- pub height_tiny: String,
- pub height_small: String,
- pub height_medium: String,
- pub height_large: String,
-
- pub border_radius: String,
}
impl CommonTheme {
- fn common() -> Self {
+ pub fn new() -> Self {
Self {
font_family_base: "'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif".into(),
- border_color: "".into(),
- color_scheme: "".into(),
- color_primary: "".into(),
- color_primary_hover: "".into(),
- color_primary_active: "".into(),
- color_success: "".into(),
- color_success_hover: "".into(),
- color_success_active: "".into(),
- color_warning: "".into(),
- color_warning_hover: "".into(),
- color_warning_active: "".into(),
- color_error: "".into(),
- color_error_hover: "".into(),
- color_error_active: "".into(),
-
+
font_size_base_100: "10px".into(),
font_size_base_200: "12px".into(),
font_size_base_300: "14px".into(),
@@ -158,57 +121,6 @@ impl CommonTheme {
curve_decelerate_max: "cubic-bezier(0.1,0.9,0.2,1)".into(),
curve_decelerate_mid: "cubic-bezier(0,0,0,1)".into(),
curve_easy_ease: "cubic-bezier(0.33,0,0.67,1)".into(),
-
- height_tiny: "22px".into(),
- height_small: "28px".into(),
- height_medium: "34px".into(),
- height_large: "40px".into(),
-
- border_radius: "3px".into(),
- }
- }
-}
-
-impl ThemeMethod for CommonTheme {
- fn light() -> Self {
- Self {
- color_scheme: "light".into(),
- color_primary: "#0078ff".into(),
- color_primary_hover: "#2994ff".into(),
- color_primary_active: "#005ed9".into(),
- color_success: "#18a058".into(),
- color_success_hover: "#36ad6a".into(),
- color_success_active: "#0c7a43".into(),
- color_warning: "#f0a020".into(),
- color_warning_hover: "#fcb040".into(),
- color_warning_active: "#c97c10".into(),
- color_error: "#d03050".into(),
- color_error_hover: "#de576d".into(),
- color_error_active: "#ab1f3f".into(),
- border_color: "#e5e8eb".into(),
-
- ..CommonTheme::common()
- }
- }
- fn dark() -> Self {
- Self {
- color_scheme: "dark".into(),
- color_primary: "#0078ff".into(),
- color_primary_hover: "#2994ff".into(),
- color_primary_active: "#005ed9".into(),
- // color_success: "#63e2b7".into(),
- // color_success_hover: "#7fe7c4".into(),
- color_success: "#18a058".into(),
- color_success_hover: "#36ad6a".into(),
- color_success_active: "#5acea7".into(),
- color_warning: "#f0a020".into(),
- color_warning_hover: "#fcb040".into(),
- color_warning_active: "#e6c260".into(),
- color_error: "#d03050".into(),
- color_error_hover: "#de576d".into(),
- color_error_active: "#e57272".into(),
- border_color: "#1f2537".into(),
- ..CommonTheme::common()
}
}
}
diff --git a/thaw/src/theme/mod.rs b/thaw/src/theme/mod.rs
index d8108ef..2ec011b 100644
--- a/thaw/src/theme/mod.rs
+++ b/thaw/src/theme/mod.rs
@@ -1,15 +1,11 @@
mod color;
mod common;
-use self::common::CommonTheme;
+use crate::ConfigInjection;
pub use color::ColorTheme;
+pub use common::CommonTheme;
use leptos::*;
-pub trait ThemeMethod {
- fn light() -> Self;
- fn dark() -> Self;
-}
-
#[derive(Clone)]
pub struct Theme {
pub name: String,
@@ -21,58 +17,26 @@ impl Theme {
pub fn light() -> Self {
Self {
name: "light".into(),
- common: CommonTheme::light(),
+ common: CommonTheme::new(),
color: ColorTheme::light(),
}
}
pub fn dark() -> Self {
Self {
name: "dark".into(),
- common: CommonTheme::dark(),
+ common: CommonTheme::new(),
color: ColorTheme::dark(),
}
}
-}
-impl ThemeMethod for Theme {
- fn light() -> Self {
- Theme::light()
+ pub fn use_theme(default: impl Fn() -> Theme) -> ReadSignal {
+ use_context::()
+ .map_or_else(|| RwSignal::new(default()), |c| c.theme)
+ .split()
+ .0
}
- fn dark() -> Self {
- Theme::dark()
- }
-}
-
-#[component]
-pub fn ThemeProvider(
- #[prop(optional, into)] theme: Option>,
- children: Children,
-) -> impl IntoView {
- let theme = if let Some(theme) = theme {
- theme
- } else {
- create_rw_signal(Theme::light())
- };
-
- view! { }
-}
-
-pub fn use_theme(default: impl Fn() -> Theme) -> ReadSignal {
- use_context::>()
- .unwrap_or_else(|| create_rw_signal(default()))
- .split()
- .0
-}
-
-pub fn use_rw_theme() -> RwSignal {
- expect_context::>()
-}
-
-#[cfg(test)]
-mod tests {
- use super::{use_theme, Theme};
-
- fn _t_use_theme() {
- use_theme(Theme::dark);
+
+ pub fn use_rw_theme() -> RwSignal {
+ expect_context::().theme
}
}