| 189 | |
| 190 | #[tracing::instrument(level = "debug", skip(id))] |
| 191 | fn handle_theme(id: String) { |
| 192 | let update_css = move |custom_css: String| { |
| 193 | let mut custom_style_sheet = document().get_element_by_id("custom-css"); |
| 194 | if custom_style_sheet.is_none() { |
| 195 | let el = document().create_element("style").unwrap(); |
| 196 | el.set_id("custom-css"); |
| 197 | |
| 198 | if let Some(head) = document().head() { |
| 199 | head.append_child(&el).unwrap(); |
| 200 | } |
| 201 | |
| 202 | custom_style_sheet = Some(el); |
| 203 | } |
| 204 | |
| 205 | let custom_style_sheet = custom_style_sheet.unwrap(); |
| 206 | custom_style_sheet.set_inner_html(custom_css.as_str()); |
| 207 | }; |
| 208 | |
| 209 | listen_event("theme-updated", move |data| { |
| 210 | let payload = js_sys::Reflect::get(&data, &JsValue::from_str("payload")).unwrap(); |
| 211 | if let Some(custom_css) = payload.as_string() { |
| 212 | update_css(custom_css); |
| 213 | } |
| 214 | }); |
| 215 | |
| 216 | spawn_local(async move { |
| 217 | let theme = load_theme(id).await.unwrap(); |
| 218 | |
| 219 | let document_element = document() |
| 220 | .document_element() |
| 221 | .unwrap() |
| 222 | .dyn_into::<HtmlElement>() |
| 223 | .unwrap(); |
| 224 | |
| 225 | let style = document_element.style(); |
| 226 | style.set_css_text(""); |
| 227 | |
| 228 | style |
| 229 | .set_property("--primary", &theme.theme.primary) |
| 230 | .unwrap(); |
| 231 | style |
| 232 | .set_property("--secondary", &theme.theme.secondary) |
| 233 | .unwrap(); |
| 234 | style |
| 235 | .set_property("--tertiary", &theme.theme.tertiary) |
| 236 | .unwrap(); |
| 237 | style |
| 238 | .set_property("--textPrimary", &theme.theme.text_primary) |
| 239 | .unwrap(); |
| 240 | style |
| 241 | .set_property("--textSecondary", &theme.theme.text_secondary) |
| 242 | .unwrap(); |
| 243 | style |
| 244 | .set_property("--textInverse", &theme.theme.text_inverse) |
| 245 | .unwrap(); |
| 246 | style.set_property("--accent", &theme.theme.accent).unwrap(); |
| 247 | style |
| 248 | .set_property("--divider", &theme.theme.divider) |