feat: theme

demo/src/assets/css/index.css

@@ -1,9 +1,5 @@
 body {
     margin: 0;
-    font-family: Inter, ui-sans-serif, system-ui, -apple-system,
-        BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans,
-        sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol,
-        "Noto Color Emoji";
 }
 
 .components-page-box {
@@ -17,3 +13,7 @@ body {
 .components-page-box main {
     flex: 1;
 }
+
+.token.operator {
+    background: hsla(0, 0%, 100%, 0) !important;
+}

demo/src/assets/svg/grid_dot.svg

@@ -1,4 +1,4 @@
 <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect width="50" height="50" fill="white"/>
+  <rect width="50" height="50" />
-  <rect x="23" y="23" width="4" height="4" rx="2" fill="#cbd5e1"/>
+  <rect x="23" y="23" width="4" height="4" rx="2" fill="#cbd5e1" />
-</svg>
+</svg>

demo/src/components/demo.rs

@@ -1,5 +1,5 @@
 use leptos::*;
-use melt_ui::{mount_style, Code};
+use melt_ui::*;
 
 #[slot]
 pub struct DemoCode {
@@ -11,11 +11,39 @@ pub struct DemoCode {
 #[component]
 pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView {
     mount_style("demo", prisms::prism_css!());
+    let theme = use_theme(Theme::light);
+    let style = create_memo(move |_| {
+        let mut style = String::from("background-image: url(/melt-ui/grid_dot.svg); background-repeat: repeat; background-size: 1.5rem; margin-top: 1rem; padding: 1rem; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;");
+        theme.with(|theme| {
+            if theme.common.color_scheme == "dark" {
+                style.push_str("border: 1px solid #383f52;");
+            } else {
+                style.push_str(&format!("border: 1px solid {};", theme.common.border_color));
+            }
+        });
+        style
+    });
+    let code_style = create_memo(move |_| {
+        let mut style = String::from("font-weight: 400; font-size: 0.875em; line-height: 1.7142857;margin-bottom: 1rem; padding: 1rem; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem;");
+        theme.with(|theme| {
+            if theme.common.color_scheme == "dark" {
+                style.push_str("border: 1px solid #383f52; border-top-width: 0;");
+                style.push_str("background-color: #242832;");
+            } else {
+                style.push_str(&format!(
+                    "border: 1px solid {}; border-top-width: 0;",
+                    theme.common.border_color
+                ));
+                style.push_str("background-color: #f9fafb;");
+            }
+        });
+        style
+    });
     view! {
-        <div style="background-image: url(/melt-ui/grid_dot.svg); background-repeat: repeat; background-size: 1.5rem; margin-top: 1rem; padding: 1rem; border: 1px solid #e5e8eb; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;">
+        <div style=move || style.get()>
             {children()}
         </div>
-        <div style="font-weight: 400; font-size: 0.875em; line-height: 1.7142857;margin-bottom: 1rem; padding: 1rem; background-color: #f9fafb; border: 1px solid #e5e8eb; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; border-top-width: 0;">
+        <div style=move || code_style.get()>
             <Code>
                 <pre style="margin: 0" inner_html=demo_code.html>
                     {(demo_code.children)()}

demo/src/components/site_header.rs

@@ -13,8 +13,13 @@ pub fn SiteHeader() -> impl IntoView {
             theme.set(Theme::dark())
         }
     };
+    let style = create_memo(move |_| {
+        theme.with(|theme| {
+            format!("height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid {}", theme.common.border_color)
+        })
+    });
     view! {
-        <LayoutHeader style="height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid #e5e8eb">
+        <LayoutHeader style>
             <span
                 style="cursor: pointer"
                 on:click=move |_| {

src/global_style/mod.rs

@@ -17,6 +17,9 @@ pub fn GlobalStyle() -> impl IntoView {
                 _ = body
                     .style()
                     .set_property("font-size", &theme.common.font_size);
+                _ = body
+                    .style()
+                    .set_property("color-scheme", &theme.common.color_scheme);
             }
         });
     });

src/theme/common.rs

@@ -5,6 +5,8 @@ pub struct CommonTheme {
     pub font_family: String,
     pub font_color: String,
     pub background_color: String,
+    pub border_color: String,
+    pub color_scheme: String,
 
     pub color_primary: String,
     pub color_primary_hover: String,
@@ -43,6 +45,8 @@ impl CommonTheme {
             font_family: r#"Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji""#.into(),
             font_color: "".into(),
             background_color: "".into(),
+            border_color: "".into(),
+            color_scheme: "".into(),
             color_primary: "".into(),
             color_primary_hover: "".into(),
             color_primary_active: "".into(),
@@ -78,6 +82,7 @@ impl ThemeMethod for CommonTheme {
         Self {
             font_color: "#11181c".into(),
             background_color: "#fff".into(),
+            color_scheme: "light".into(),
             color_primary: "#f5222d".into(),
             color_primary_hover: "#ff4d4f".into(),
             color_primary_active: "#cf1322".into(),
@@ -90,6 +95,7 @@ impl ThemeMethod for CommonTheme {
             color_error: "#d03050".into(),
             color_error_hover: "#de576d".into(),
             color_error_active: "#ab1f3f".into(),
+            border_color: "#e5e8eb".into(),
             ..CommonTheme::common()
         }
     }
@@ -97,11 +103,14 @@ impl ThemeMethod for CommonTheme {
         Self {
             font_color: "#ecedee".into(),
             background_color: "#1a1d1e".into(),
+            color_scheme: "dark".into(),
             color_primary: "#d32029".into(),
             color_primary_hover: "#e04648".into(),
             color_primary_active: "#ad111e".into(),
-            color_success: "#63e2b7".into(),
+            // color_success: "#63e2b7".into(),
-            color_success_hover: "#7fe7c4".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(),
@@ -109,6 +118,7 @@ impl ThemeMethod for CommonTheme {
             color_error: "#d03050".into(),
             color_error_hover: "#de576d".into(),
             color_error_active: "#e57272".into(),
+            border_color: "#1f2537".into(),
             ..CommonTheme::common()
         }
     }