@@ -6,7 +6,10 @@ use leptos::{
66 server:: codee:: string:: JsonSerdeCodec ,
77 * ,
88} ;
9- use leptos_use:: { storage:: use_local_storage, use_media_query, use_preferred_dark, watch_with_options, WatchOptions } ;
9+ use leptos_use:: {
10+ storage:: use_local_storage, use_media_query, use_preferred_dark, watch_with_options,
11+ WatchOptions ,
12+ } ;
1013use serde:: { Deserialize , Serialize } ;
1114/// Defines an enumeration for UI themes.
1215///
@@ -48,21 +51,34 @@ const STORAGE_KEY: &'static str = "theme";
4851/// * `theme` - The current theme (Light, Dark, System)
4952/// * `prefers_dark` - Boolean flag indicating whether the system prefers a dark theme.
5053fn update_css_for_theme ( theme : Theme , prefers_dark : bool , use_data_attribute : bool ) {
51- let document = web_sys:: window ( ) . expect ( "should get window" ) . document ( ) . expect ( "document should be available" ) ;
52- let html_element = document. document_element ( ) . expect ( "document should have a root element" ) ;
54+ let document = web_sys:: window ( )
55+ . expect ( "should get window" )
56+ . document ( )
57+ . expect ( "document should be available" ) ;
58+ let html_element = document
59+ . document_element ( )
60+ . expect ( "document should have a root element" ) ;
5361
5462 // TODO: Change the theme following the system preference when Theme::System is selected
5563 if use_data_attribute {
5664 match theme {
5765 Theme :: Light => {
58- html_element. set_attribute ( "data-theme" , "light" ) . expect ( "should set data-theme to light" ) ;
66+ html_element
67+ . set_attribute ( "data-theme" , "light" )
68+ . expect ( "should set data-theme to light" ) ;
5969 }
6070 Theme :: Dark => {
61- html_element. set_attribute ( "data-theme" , "dark" ) . expect ( "should set data-theme to dark" ) ;
71+ html_element
72+ . set_attribute ( "data-theme" , "dark" )
73+ . expect ( "should set data-theme to dark" ) ;
6274 }
6375 Theme :: System => match prefers_dark {
64- true => html_element. set_attribute ( "data-theme" , "dark" ) . expect ( "should set data-theme to dark" ) ,
65- false => html_element. set_attribute ( "data-theme" , "light" ) . expect ( "should set data-theme to light" ) ,
76+ true => html_element
77+ . set_attribute ( "data-theme" , "dark" )
78+ . expect ( "should set data-theme to dark" ) ,
79+ false => html_element
80+ . set_attribute ( "data-theme" , "light" )
81+ . expect ( "should set data-theme to light" ) ,
6682 } ,
6783 }
6884 }
@@ -111,15 +127,17 @@ pub fn ThemeProvider(children: Children) -> impl IntoView {
111127 } ) ;
112128
113129 Effect :: watch (
114- move || is_dark_preferred_signal ( ) ,
115- move | is_dark_preferred_signal, _, _| {
130+ move || is_dark_preferred_signal ( ) ,
131+ move |is_dark_preferred_signal, _, _| {
116132 console_log ( & format ! ( "Theme changed to: {:?}" , is_dark_preferred_signal) ) ;
117133 // update_css_for_theme(
118134 // theme_state(),
119135 // is_dark_preferred_signal(),
120136 // use_data_attribute,
121137 // );
122- } , true ) ;
138+ } ,
139+ true ,
140+ ) ;
123141
124142 view ! { { children( ) } }
125143}
0 commit comments