pib-components-dx-base 0.0.0-upstream-snapshot.2026-09-19.1

temporary fork for Politik im Blick - Dioxus components
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121

use dioxus::prelude::*;
use dioxus_icons::lucide::{Moon, Sun};

const COOKIE_NAME: &str = "dx_theme";
const CHANNEL_NAME: &str = "dx-theme";

pub fn theme_seed() {
    _ = document::eval(&format!(
        r#"
        (function () {{
          if (window.__dx_theme_seeded) return;
          window.__dx_theme_seeded = true;

          const COOKIE_NAME = '{COOKIE_NAME}';
          const CHANNEL_NAME = '{CHANNEL_NAME}';

          function getCookie(name) {{
            const prefix = name + '=';
            const parts = document.cookie.split(';');
            for (let p of parts) {{
              p = p.trim();
              if (p.startsWith(prefix)) return decodeURIComponent(p.slice(prefix.length));
            }}
            return null;
          }}

          function apply(theme) {{
            if (theme === 'dark' || theme === 'light') {{
              document.documentElement.setAttribute('data-theme', theme);
            }} else {{
              document.documentElement.removeAttribute('data-theme');
            }}
          }}

          apply(getCookie(COOKIE_NAME));

          try {{
            const ch = new BroadcastChannel(CHANNEL_NAME);
            ch.addEventListener('message', (event) => {{
              const data = event.data;
              apply(data && data.theme);
            }});
            window.__dx_theme_channel = ch;
          }} catch (_) {{}}
        }})();
        "#,
    ));
}

pub fn set_theme(dark_mode: bool) {
    let theme = if dark_mode { "dark" } else { "light" };

    _ = document::eval(&format!(
        r#"
        (function () {{
          const COOKIE_NAME = '{COOKIE_NAME}';
          const CHANNEL_NAME = '{CHANNEL_NAME}';

          function getCookie(name) {{
            const prefix = name + '=';
            const parts = document.cookie.split(';');
            for (let p of parts) {{
              p = p.trim();
              if (p.startsWith(prefix)) return decodeURIComponent(p.slice(prefix.length));
            }}
            return null;
          }}

          document.documentElement.setAttribute('data-theme', '{theme}');
          if (getCookie(COOKIE_NAME) === '{theme}') return;

          document.cookie = '{COOKIE_NAME}={theme}; path=/; max-age=31536000; samesite=lax';

          try {{
            const ch = window.__dx_theme_channel;
            if (ch && typeof ch.postMessage === 'function') {{
              ch.postMessage({{ theme: '{theme}' }});
            }} else {{
              const tmp = new BroadcastChannel(CHANNEL_NAME);
              tmp.postMessage({{ theme: '{theme}' }});
              tmp.close();
            }}
          }} catch (_) {{}}
        }})();
        "#
    ));
}

#[component]
pub fn DarkModeToggle() -> Element {
    rsx! {
        button {
            class: "dx-dark-mode-toggle dx-dark-mode-only",
            onclick: move |_| set_theme(false),
            r#type: "button",
            aria_label: "Enable light mode",
            DarkModeIcon {}
        }
        button {
            class: "dx-dark-mode-toggle dx-light-mode-only",
            onclick: move |_| set_theme(true),
            r#type: "button",
            aria_label: "Enable dark mode",
            LightModeIcon {}
        }
    }
}

#[component]
fn DarkModeIcon() -> Element {
    rsx! {
        Moon { size: "24px" }
    }
}

#[component]
fn LightModeIcon() -> Element {
    rsx! {
        Sun { size: "24px" }
    }
}