mirror of
https://github.com/Nutomic/ibis.git
synced 2024-11-25 18:11:09 +00:00
Better dark mode storage using cookie
This commit is contained in:
parent
519a6c4848
commit
6cd87cf790
6 changed files with 52 additions and 32 deletions
14
Cargo.lock
generated
14
Cargo.lock
generated
|
|
@ -1780,6 +1780,7 @@ dependencies = [
|
|||
"axum-macros",
|
||||
"bcrypt",
|
||||
"chrono",
|
||||
"codee",
|
||||
"config",
|
||||
"console_error_panic_hook",
|
||||
"diesel",
|
||||
|
|
@ -1796,7 +1797,6 @@ dependencies = [
|
|||
"leptos",
|
||||
"leptos-use",
|
||||
"leptos_axum",
|
||||
"leptos_darkmode",
|
||||
"leptos_meta",
|
||||
"leptos_router",
|
||||
"log",
|
||||
|
|
@ -2022,9 +2022,11 @@ dependencies = [
|
|||
"default-struct-builder",
|
||||
"futures-util",
|
||||
"gloo-timers",
|
||||
"http",
|
||||
"js-sys",
|
||||
"lazy_static",
|
||||
"leptos",
|
||||
"leptos_axum",
|
||||
"paste",
|
||||
"thiserror",
|
||||
"unic-langid",
|
||||
|
|
@ -2070,16 +2072,6 @@ dependencies = [
|
|||
"typed-builder",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos_darkmode"
|
||||
version = "0.2.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "35ec7c7c56b312da0a739680cc2cb70d641eb82adbc1f83a565c2e9562a96253"
|
||||
dependencies = [
|
||||
"leptos",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos_dom"
|
||||
version = "0.6.15"
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ ssr = [
|
|||
"katex/duktape",
|
||||
"leptos/ssr",
|
||||
"leptos-use/ssr",
|
||||
"leptos-use/axum"
|
||||
]
|
||||
hydrate = [
|
||||
"leptos/hydrate",
|
||||
|
|
@ -108,7 +109,7 @@ markdown-it-footnote = "0.2.0"
|
|||
markdown-it-sub = "1.0.0"
|
||||
markdown-it-sup = "1.0.0"
|
||||
leptos-use = "0.13.6"
|
||||
leptos_darkmode = "0.2.0"
|
||||
codee = "0.2.0"
|
||||
|
||||
[dev-dependencies]
|
||||
pretty_assertions = "1.4.1"
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ use crate::{
|
|||
frontend::{
|
||||
api::ApiClient,
|
||||
components::nav::Nav,
|
||||
dark_mode::DarkMode,
|
||||
pages::{
|
||||
article::{
|
||||
actions::ArticleActions,
|
||||
|
|
@ -37,7 +38,6 @@ use leptos::{
|
|||
SignalGetUntracked,
|
||||
SignalUpdate,
|
||||
};
|
||||
use leptos_darkmode::Darkmode;
|
||||
use leptos_meta::{provide_meta_context, *};
|
||||
use leptos_router::{Route, Router, Routes};
|
||||
use reqwest::Client;
|
||||
|
|
@ -91,18 +91,11 @@ pub fn App() -> impl IntoView {
|
|||
GlobalState::update_my_profile();
|
||||
provide_context(create_rw_signal(global_state));
|
||||
|
||||
let darkmode = Darkmode::init();
|
||||
let darkmode = DarkMode::init();
|
||||
provide_context(darkmode.clone());
|
||||
let theme = move || {
|
||||
if darkmode.is_light() {
|
||||
"emerald"
|
||||
} else {
|
||||
"dim"
|
||||
}
|
||||
};
|
||||
|
||||
view! {
|
||||
<Html attr:data-theme=theme class="h-full" />
|
||||
<Html attr:data-theme=darkmode.theme class="h-full" />
|
||||
<Body class="min-h-full flex max-sm:flex-col md:divide-x divide-slate-400 divide-solid" />
|
||||
<>
|
||||
<Stylesheet id="ibis" href="/pkg/ibis.css" />
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
use crate::frontend::app::GlobalState;
|
||||
use crate::frontend::{app::GlobalState, dark_mode::DarkMode};
|
||||
use leptos::{component, use_context, view, IntoView, RwSignal, SignalWith, *};
|
||||
use leptos_darkmode::Darkmode;
|
||||
use leptos_router::*;
|
||||
|
||||
#[component]
|
||||
|
|
@ -22,6 +21,7 @@ pub fn Nav() -> impl IntoView {
|
|||
);
|
||||
|
||||
let (search_query, set_search_query) = create_signal(String::new());
|
||||
let mut dark_mode = expect_context::<DarkMode>();
|
||||
view! {
|
||||
<nav class="max-sm:navbar p-2.5">
|
||||
<div
|
||||
|
|
@ -126,14 +126,8 @@ pub fn Nav() -> impl IntoView {
|
|||
<input
|
||||
type="checkbox"
|
||||
class="toggle"
|
||||
checked=move || {
|
||||
if expect_context::<Darkmode>().is_light() {
|
||||
"checked"
|
||||
} else {
|
||||
""
|
||||
}
|
||||
}
|
||||
on:click=move |_| { expect_context::<Darkmode>().toggle() }
|
||||
prop:checked=dark_mode.is_dark
|
||||
on:click=move |_| { dark_mode.toggle() }
|
||||
/>
|
||||
<span class="label-text">Dark</span>
|
||||
</label>
|
||||
|
|
|
|||
39
src/frontend/dark_mode.rs
Normal file
39
src/frontend/dark_mode.rs
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
use chrono::{Duration, Local};
|
||||
use codee::string::FromToStringCodec;
|
||||
use leptos::{Signal, SignalGet, SignalGetUntracked, SignalSet, WriteSignal};
|
||||
use leptos_use::{use_cookie_with_options, use_preferred_dark, SameSite, UseCookieOptions};
|
||||
|
||||
#[derive(Debug, Clone)]
|
||||
pub struct DarkMode {
|
||||
cookie: WriteSignal<Option<bool>>,
|
||||
pub is_dark: Signal<bool>,
|
||||
pub theme: Signal<&'static str>,
|
||||
}
|
||||
|
||||
impl DarkMode {
|
||||
pub fn init() -> Self {
|
||||
let expires = (Local::now() + Duration::days(356)).timestamp();
|
||||
let cookie_options = UseCookieOptions::default()
|
||||
.path("/")
|
||||
.expires(expires)
|
||||
.same_site(SameSite::Strict);
|
||||
let cookie =
|
||||
use_cookie_with_options::<bool, FromToStringCodec>("dark_mode", cookie_options);
|
||||
|
||||
let is_dark = Signal::derive(move || {
|
||||
let default = || use_preferred_dark().get_untracked();
|
||||
cookie.0.get().unwrap_or_else(default)
|
||||
});
|
||||
let theme = Signal::derive(move || if is_dark.get() { "dim" } else { "emerald" });
|
||||
Self {
|
||||
cookie: cookie.1,
|
||||
is_dark,
|
||||
theme,
|
||||
}
|
||||
}
|
||||
|
||||
pub fn toggle(&mut self) {
|
||||
let new = !self.is_dark.get_untracked();
|
||||
self.cookie.set(Some(new));
|
||||
}
|
||||
}
|
||||
|
|
@ -5,6 +5,7 @@ use leptos::*;
|
|||
pub mod api;
|
||||
pub mod app;
|
||||
mod components;
|
||||
pub mod dark_mode;
|
||||
pub mod error;
|
||||
pub mod markdown;
|
||||
pub mod pages;
|
||||
|
|
|
|||
Loading…
Reference in a new issue