frontend/
darkmode.rs

1use yew::prelude::*;
2
3/// A button component that toggles between light and dark theme modes.
4///
5/// Clicking this button switches the application's theme by modifying the `data-theme` attribute
6/// on the document element. The theme preference is applied via CSS variables for consistent styling.
7///
8/// # Behavior
9/// - Reads the current `data-theme` attribute value from the HTML element
10/// - Sets `data-theme="dark"` if currently in light mode
11/// - Clears the attribute (light mode) if currently in dark mode
12/// - Re-renders to reflect the visual changes (typically toggled via CSS)
13///
14/// # Example Usage
15/// ```ignore
16/// html! {
17///     <ThemeToggle />
18/// }
19/// ```
20#[function_component]
21pub fn ThemeToggle() -> Html {
22    let onclick = {
23        Callback::from(|_| {
24            if let Some(window) = web_sys::window() {
25                if let Some(document) = window.document() {
26                    if let Some(html) = document.document_element() {
27                        let current = html.get_attribute("data-theme").unwrap_or_default();
28                        let new_theme = if current == "dark" { "" } else { "dark" };
29                        let _ = html.set_attribute("data-theme", new_theme);
30                    }
31                }
32            }
33        })
34    };
35
36    html! {
37        <button {onclick} class="sidebar-button">
38            {"🌙"}
39        </button>
40    }
41}
frontend/darkmode.rs

frontend/
darkmode.rs
