Use the default OS theme (dark or light)

This commit is contained in:
Greg Burri 2025-03-31 23:37:58 +02:00
parent d74b0f0676
commit 63266dec56
3 changed files with 31 additions and 2 deletions

View file

@ -130,7 +130,7 @@ async fn main() {
let ron_api_routes = Router::new() let ron_api_routes = Router::new()
// Disabled: update user profile is now made with a post data ('edit_user_post'). // Disabled: update user profile is now made with a post data ('edit_user_post').
// .route("/user/update", put(services::ron::update_user)) // .route("/user/update", put(services::ron::update_user))
.route("/set_lang", put(services::ron::set_lang)) .route("/lang", put(services::ron::set_lang))
.route("/recipe/titles", get(services::ron::recipe::get_titles)) .route("/recipe/titles", get(services::ron::recipe::get_titles))
.route("/recipe/title", patch(services::ron::recipe::set_title)) .route("/recipe/title", patch(services::ron::recipe::set_title))
.route( .route(

View file

@ -40,6 +40,7 @@ web-sys = { version = "0.3", features = [
"DomStringMap", "DomStringMap",
"HtmlDocument", "HtmlDocument",
"HtmlElement", "HtmlElement",
"MediaQueryList",
"HtmlDivElement", "HtmlDivElement",
"HtmlLabelElement", "HtmlLabelElement",
"HtmlInputElement", "HtmlInputElement",

View file

@ -65,7 +65,7 @@ pub fn main() -> Result<(), JsValue> {
let body = ron_api::SetLang { lang: lang.clone() }; let body = ron_api::SetLang { lang: lang.clone() };
let location_without_lang = location_without_lang.clone(); let location_without_lang = location_without_lang.clone();
spawn_local(async move { spawn_local(async move {
let _ = request::put::<(), _>("set_lang", body).await; let _ = request::put::<(), _>("lang", body).await;
window() window()
.location() .location()
@ -81,6 +81,15 @@ pub fn main() -> Result<(), JsValue> {
.forget(); .forget();
// Dark/light theme handling. // Dark/light theme handling.
if get_cookie_dark_theme().is_none()
&& window()
.match_media("(prefers-color-scheme: dark)")
.map(|r| r.is_some())
.unwrap_or_default()
{
set_cookie_dark_theme(true);
window().location().reload().unwrap();
};
let toggle_theme: HtmlInputElement = selector("#toggle-theme input"); let toggle_theme: HtmlInputElement = selector("#toggle-theme input");
EventListener::new(&toggle_theme.clone(), "change", move |_event| { EventListener::new(&toggle_theme.clone(), "change", move |_event| {
set_cookie_dark_theme(!toggle_theme.checked()); set_cookie_dark_theme(!toggle_theme.checked());
@ -112,3 +121,22 @@ fn set_cookie_dark_theme(dark_theme: bool) {
#[cfg(not(target_arch = "wasm32"))] #[cfg(not(target_arch = "wasm32"))]
fn set_cookie_dark_theme(_dark_theme: bool) {} fn set_cookie_dark_theme(_dark_theme: bool) {}
#[cfg(target_arch = "wasm32")]
fn get_cookie_dark_theme() -> Option<bool> {
wasm_cookies::get(common::consts::COOKIE_DARK_THEME).map(|value| match value {
Ok(str) => match str.parse() {
Ok(v) => v,
Err(_) => {
set_cookie_dark_theme(false);
false
}
},
Err(_) => false,
})
}
#[cfg(not(target_arch = "wasm32"))]
fn get_cookie_dark_theme() -> Option<bool> {
Some(false)
}