added use_preferred_contrast and use_preferred_dark

CHANGELOG.md

@@ -15,6 +15,8 @@
 - `use_ceil`
 - `use_round`
 - `use_media_query`
+- `use_preferred_dark`
+- `use_preferred_contrast`
 
 #### Other Changes
 

docs/book/src/SUMMARY.md

@@ -20,6 +20,8 @@
 
 - [use_event_listener](browser/use_event_listener.md)
 - [use_media_query](browser/use_media_query.md)
+- [use_preferred_contrast](browser/use_preferred_contrast.md)
+- [use_preferred_dark](browser/use_preferred_dark.md)
 
 # Sensors
 

docs/book/src/browser/use_preferred_contrast.md

@@ -0,0 +1,3 @@
+# use_preferred_contrast
+
+<!-- cmdrun python3 ../extract_doc_comment.py use_preferred_contrast -->

docs/book/src/browser/use_preferred_dark.md

@@ -0,0 +1,3 @@
+# use_preferred_dark
+
+<!-- cmdrun python3 ../extract_doc_comment.py use_preferred_dark -->

src/lib.rs

@@ -14,6 +14,8 @@ mod use_element_size;
 mod use_event_listener;
 mod use_media_query;
 mod use_mouse;
+mod use_preferred_contrast;
+mod use_preferred_dark;
 #[cfg(web_sys_unstable_apis)]
 mod use_resize_observer;
 mod use_scroll;
@@ -31,6 +33,8 @@ pub use use_element_size::*;
 pub use use_event_listener::*;
 pub use use_media_query::*;
 pub use use_mouse::*;
+pub use use_preferred_contrast::*;
+pub use use_preferred_dark::*;
 #[cfg(web_sys_unstable_apis)]
 pub use use_resize_observer::*;
 pub use use_scroll::*;

src/use_media_query.rs

@@ -28,6 +28,10 @@ use std::rc::Rc;
 /// # }
 /// ```
 ///
+/// ## See also
+///
+/// * [`use_preferred_dark`]
+/// * [`use_preferred_contrast`]
 pub fn use_media_query(cx: Scope, query: impl Into<MaybeSignal<String>>) -> Signal<bool> {
     let query = query.into();
 

src/use_preferred_contrast.rs

@@ -0,0 +1,63 @@
+use leptos::*;
+use leptos_use::use_media_query;
+use std::fmt::Display;
+
+/// Reactive [prefers-contrast](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast) media query.
+///
+/// ## Usage
+///
+/// ```
+/// # use leptos::*;
+/// # use leptos_use::use_preferred_contrast;
+/// #
+/// # #[component]
+/// # fn Demo(cx: Scope) -> impl IntoView {
+/// #
+/// let preferred_contrast = use_preferred_contrast(cx);
+/// #
+/// #    view! { cx, }
+/// # }
+/// ```
+///
+/// ## See also
+///
+/// * [`use_media_query`]
+/// * [`use_preferred_dark`]
+pub fn use_preferred_contrast(cx: Scope) -> Signal<PreferredContrast> {
+    let is_more = use_media_query(cx, "(prefers-contrast: more)");
+    let is_less = use_media_query(cx, "(prefers-contrast: less)");
+    let is_custom = use_media_query(cx, "(prefers-contrast: custom)");
+
+    Signal::derive(cx, 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"),
+        }
+    }
+}

src/use_preferred_dark.rs

@@ -0,0 +1,27 @@
+use leptos::*;
+use leptos_use::use_media_query;
+
+/// 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(cx: Scope) -> impl IntoView {
+/// #
+/// let is_dark_preferred = use_preferred_dark(cx);
+/// #
+/// #    view! { cx, }
+/// # }
+/// ```
+///
+/// ## See also
+///
+/// * [`use_media_query`]
+/// * [`use_preferred_contrast`]
+pub fn use_preferred_dark(cx: Scope) -> Signal<bool> {
+    use_media_query(cx, "(prefers-color-scheme: dark)")
+}