DioxusLabs
Modifying Body attributes like we can do Head
Feature Request
Per: https://discord.com/channels/899851952891002890/1309445758705074197/1309878444355747992
While we are on this topic, it is better to take of the html tag as well.
Use case from tailwind
<html class="h-full bg-gray-100">
<body class="h-full">
A somewhat related problem is that the starter project created by dx new has a main.css with styling for the body background, but none of the CSS automatically applies. This requires making some modifications before any of the CSS does anything.
@ChooKing is that actually related? This is a feature request for a Dioxus element to programmatically modify the Body and Html tags. Css is a separate problem, and it seems to me that changes to the dx new starter project are definitely separate.
A workaround I found is to use eval().
#[component]
pub fn NavBar() -> Element {
document::eval(r#"document.body.classList.add('dark')"#);
let rotate_color_scheme = move |_| {
document::eval(
r#"
document.body.classList.toggle('dark');
document.body.classList.toggle('light');
"#,
);
};
rsx! {
div { id: "navbar",
Link { to: Route::Home {}, "Home" }
Link { to: Route::Blog { id: 1 }, "Blog" }
button { onclick: rotate_color_scheme, "Color" }
}
}
}
