use_preferred_dark

Reactive dark theme preference.

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 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

Feature

This function is only available if the crate feature use_preferred_dark is enabled

Types

• struct UsePreferredDarkOptions

Source

Source • Docs