From 8967d031375faa16ad20c3ed64a91bc87a1f7b42 Mon Sep 17 00:00:00 2001 From: Maccesch Date: Sat, 10 Jun 2023 03:47:31 +0100 Subject: [PATCH] added use_preferred_contrast and use_preferred_dark --- CHANGELOG.md | 2 + docs/book/src/SUMMARY.md | 2 + .../src/browser/use_preferred_contrast.md | 3 + docs/book/src/browser/use_preferred_dark.md | 3 + src/lib.rs | 4 ++ src/use_media_query.rs | 4 ++ src/use_preferred_contrast.rs | 63 +++++++++++++++++++ src/use_preferred_dark.rs | 27 ++++++++ 8 files changed, 108 insertions(+) create mode 100644 docs/book/src/browser/use_preferred_contrast.md create mode 100644 docs/book/src/browser/use_preferred_dark.md create mode 100644 src/use_preferred_contrast.rs create mode 100644 src/use_preferred_dark.rs diff --git a/CHANGELOG.md b/CHANGELOG.md index b679427..8b3bcd2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,8 @@ - `use_ceil` - `use_round` - `use_media_query` +- `use_preferred_dark` +- `use_preferred_contrast` #### Other Changes diff --git a/docs/book/src/SUMMARY.md b/docs/book/src/SUMMARY.md index b366373..28290be 100644 --- a/docs/book/src/SUMMARY.md +++ b/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 diff --git a/docs/book/src/browser/use_preferred_contrast.md b/docs/book/src/browser/use_preferred_contrast.md new file mode 100644 index 0000000..8570548 --- /dev/null +++ b/docs/book/src/browser/use_preferred_contrast.md @@ -0,0 +1,3 @@ +# use_preferred_contrast + + diff --git a/docs/book/src/browser/use_preferred_dark.md b/docs/book/src/browser/use_preferred_dark.md new file mode 100644 index 0000000..9883ba1 --- /dev/null +++ b/docs/book/src/browser/use_preferred_dark.md @@ -0,0 +1,3 @@ +# use_preferred_dark + + diff --git a/src/lib.rs b/src/lib.rs index 8bb03a9..1326887 100644 --- a/src/lib.rs +++ b/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::*; diff --git a/src/use_media_query.rs b/src/use_media_query.rs index 3dcfc4c..05cfdf4 100644 --- a/src/use_media_query.rs +++ b/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>) -> Signal { let query = query.into(); diff --git a/src/use_preferred_contrast.rs b/src/use_preferred_contrast.rs new file mode 100644 index 0000000..8957ddb --- /dev/null +++ b/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 { + 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"), + } + } +} diff --git a/src/use_preferred_dark.rs b/src/use_preferred_dark.rs new file mode 100644 index 0000000..12ef5d0 --- /dev/null +++ b/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 { + use_media_query(cx, "(prefers-color-scheme: dark)") +}