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
use crate::use_media_query;
use leptos::prelude::*;
use leptos::reactive::wrappers::read::Signal;
use std::fmt::Display;
/// Reactive [prefers-contrast](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast) media query.
///
/// ## Usage
///
/// ```
/// # use leptos::prelude::*;
/// # use leptos_use::use_preferred_contrast;
/// #
/// # #[component]
/// # fn Demo() -> impl IntoView {
/// #
/// let preferred_contrast = use_preferred_contrast();
/// #
/// # view! { }
/// # }
/// ```
///
/// ## Server-Side Rendering
///
/// On the server this returns a `Signal` that always contains the value `PreferredContrast::NoPreference`.
///
/// ## See also
///
/// * [`fn@crate::use_media_query`]
/// * [`fn@crate::use_preferred_dark`]
/// * [`fn@crate::use_prefers_reduced_motion`]
pub fn use_preferred_contrast() -> Signal<PreferredContrast> {
let is_more = use_media_query("(prefers-contrast: more)");
let is_less = use_media_query("(prefers-contrast: less)");
let is_custom = use_media_query("(prefers-contrast: custom)");
Signal::derive(move || {
if is_more.get() {
PreferredContrast::More
} else if is_less.get() {
PreferredContrast::Less
} else if is_custom.get() {
PreferredContrast::Custom
} else {
PreferredContrast::NoPreference
}
})
}
/// Return value for [`use_preferred_contrast`]
#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
pub enum PreferredContrast {
More,
Less,
Custom,
#[default]
NoPreference,
}
impl Display for PreferredContrast {
fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
match self {
PreferredContrast::More => write!(f, "more"),
PreferredContrast::Less => write!(f, "less"),
PreferredContrast::Custom => write!(f, "custom"),
PreferredContrast::NoPreference => write!(f, "no-preference"),
}
}
}