use_preferred_dark

Usage

use leptos::prelude::*;
use leptos_use_preferences::use_preferred_dark;

#[component]
fn Demo() -> impl IntoView {

let is_dark_preferred = use_preferred_dark();

   view! { }
}

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 UsePreferredDarkOptions::ssr_color_header_getter.

Installation

cargo add leptos-use-preferences

Options

`UsePreferredDarkOptions`

Options for use_preferred_dark_with_options.

Every option is set with a builder method of the same name, e.g. UsePreferredDarkOptions::default().ssr_color_header_getter(...). See also the API docs.

`ssr_color_header_getter`

Type: Arc<dyn Fn() -> Option<String> + Send + Sync>

Getter function to return the string value of the Sec-CH-Prefers-Color-Scheme header. When you use one of the features "axum" or "actix" there’s a valid default implementation provided.

Source

Source • Docs

Keyboard shortcuts