2023-06-10 19:15:41 +01:00
|
|
|
use crate::use_media_query;
|
2023-06-10 03:47:31 +01:00
|
|
|
use leptos::*;
|
|
|
|
|
|
|
|
/// 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]
|
2023-07-27 18:06:36 +01:00
|
|
|
/// # fn Demo() -> impl IntoView {
|
2023-06-10 03:47:31 +01:00
|
|
|
/// #
|
2023-07-27 18:06:36 +01:00
|
|
|
/// let is_dark_preferred = use_preferred_dark();
|
2023-06-10 03:47:31 +01:00
|
|
|
/// #
|
2023-07-27 18:06:36 +01:00
|
|
|
/// # view! { }
|
2023-06-10 03:47:31 +01:00
|
|
|
/// # }
|
|
|
|
/// ```
|
|
|
|
///
|
2023-07-14 22:43:19 +01:00
|
|
|
/// ## Server-Side Rendering
|
|
|
|
///
|
|
|
|
/// On the server this functions returns a Signal that is always `false`.
|
|
|
|
///
|
2023-06-10 03:47:31 +01:00
|
|
|
/// ## See also
|
|
|
|
///
|
|
|
|
/// * [`use_media_query`]
|
|
|
|
/// * [`use_preferred_contrast`]
|
2023-07-27 18:06:36 +01:00
|
|
|
pub fn use_preferred_dark() -> Signal<bool> {
|
|
|
|
use_media_query("(prefers-color-scheme: dark)")
|
2023-06-10 03:47:31 +01:00
|
|
|
}
|