leptos_use/
use_preferred_dark.rs

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
use crate::utils::get_header;
use default_struct_builder::DefaultBuilder;
use leptos::*;
use std::rc::Rc;

/// Reactive [dark theme preference](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).
///
/// ## Usage
///
/// ```
/// # use leptos::*;
/// # use leptos_use::use_preferred_dark;
/// #
/// # #[component]
/// # fn Demo() -> impl IntoView {
/// #
/// let is_dark_preferred = use_preferred_dark();
/// #
/// #    view! { }
/// # }
/// ```
///
/// ## Server-Side Rendering
///
/// On the server this will try to read the
/// [`Sec-CH-Prefers-Color-Scheme` header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Color-Scheme)
/// to determine the color mode. If the header is not present it will return `ColorMode::Light`.
/// Please have a look at the linked documentation above for that header to see browser support
/// as well as potential server requirements.
///
/// > If you're using `axum` you have to enable the `"axum"` feature in your Cargo.toml.
/// > In case it's `actix-web` enable the feature `"actix"`, for `spin` enable `"spin"`.
///
/// ### Bring your own header
///
/// In case you're neither using Axum, Actix nor Spin, or the default implementation is not to your liking,
/// you can provide your own way of reading the color scheme header value using the option
/// [`crate::UsePreferredDarkOptions::ssr_color_header_getter`].
///
/// ## See also
///
/// * [`fn@crate::use_media_query`]
/// * [`fn@crate::use_preferred_contrast`]
/// * [`fn@crate::use_prefers_reduced_motion`]
pub fn use_preferred_dark() -> Signal<bool> {
    use_preferred_dark_with_options(Default::default())
}

/// Version of [`fn@crate::use_preferred_dark`] that accepts a `UsePreferredDarkOptions`.
pub fn use_preferred_dark_with_options(options: UsePreferredDarkOptions) -> Signal<bool> {
    #[cfg(not(feature = "ssr"))]
    {
        let _ = options;

        crate::use_media_query("(prefers-color-scheme: dark)")
    }

    #[cfg(feature = "ssr")]
    {
        Signal::derive(move || (options.ssr_color_header_getter)() == Some("dark".to_string()))
    }
}

/// Options for [`fn@crate::use_preferred_dark_with_options`].
#[derive(DefaultBuilder)]
pub struct UsePreferredDarkOptions {
    /// Getter function to return the string value of the
    /// [`Sec-CH-Prefers-Color-Scheme`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Color-Scheme)
    /// header.
    /// When you use one of the features `"axum"`, `"actix"` or `"spin"` there's a valid default
    /// implementation provided.
    #[allow(dead_code)]
    pub(crate) ssr_color_header_getter: Rc<dyn Fn() -> Option<String>>,
}

impl Default for UsePreferredDarkOptions {
    fn default() -> Self {
        Self {
            ssr_color_header_getter: Rc::new(move || {
                get_header!(
                    HeaderName::from_static("sec-ch-prefers-color-scheme"),
                    use_locale,
                    ssr_color_header_getter
                )
            }),
        }
    }
}