Function leptos_use::use_preferred_dark

pub fn use_preferred_dark() -> Signal<bool>

Reactive dark theme preference.

Usage

let is_dark_preferred = use_preferred_dark();

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

• crate::use_media_query
• crate::use_preferred_contrast