Skip to main content

use_preferred_dark

leptos_use

Function use_preferred_dark 

Source 
pub fn use_preferred_dark() -> Signal<bool>
Expand description

Reactive dark theme preference.

§Usage

let is_dark_preferred = use_preferred_dark();

§Server-Side Rendering

Make sure you follow the instructions in 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".

§Bring your own header

In case you’re neither using Axum nor Actix 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