Merge pull request #6 from SeraphyBR/dark-mode

Dark mode
SeraphyBR · Apr 28, 2024 · da73e4f · da73e4f
2 parents 3e81efd + 6a7f340
commit da73e4f
Show file tree

Hide file tree

Showing 18 changed files with 97 additions and 73 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -13,7 +13,7 @@ leptos_router = { version = "0.6", features = ["csr", "nightly"] }
 console_log = "1"
 log = "0.4"
 console_error_panic_hook = "0.1"
-leptos-use = "0.10.5"
+leptos-use = "0.10.9"
 markdown = "1.0.0-alpha.16"
 gray_matter = "0.2.6"
 serde = { version = "1.0", features = ["derive"] }

diff --git a/index.html b/index.html
@@ -56,6 +56,6 @@
     </script>
   </head>
   <body
-    class="tw-vflex tw-bg-no-repeat tw-bg-cover tw-bg-center tw-bg-fixed tw-bg-gray-800 tw-bg-forest-stairs"
+    class="tw-vflex tw-bg-no-repeat tw-bg-cover tw-bg-center tw-bg-fixed tw-bg-gray-800 tw-bg-road-trees dark:tw-bg-forest-stairs"
   ></body>
 </html>
diff --git a/public/img/background-2.jpg b/public/img/background-2.jpg
diff --git a/public/tailwind.css b/public/tailwind.css
@@ -9,11 +9,17 @@
 }
 
 @layer utilities {
-    .tw-vflex {
-        @apply tw-flex tw-flex-col
-    }
+  .tw-vflex {
+    @apply tw-flex tw-flex-col;
+  }
+
+  .tw-hflex {
+    @apply tw-flex tw-flex-row;
+  }
+}
 
-    .tw-hflex {
-        @apply tw-flex tw-flex-row
-    }
-}
+@layer components {
+  .tw-btn-primary {
+    @apply tw-text-center tw-text-sm tw-font-bold tw-text-gray-700 tw-border-solid tw-border-2 tw-border-gray-200 tw-rounded-xl tw-max-w-fit tw-px-4 tw-py-2 tw-bg-white dark:tw-text-white dark:tw-bg-graphite dark:tw-border-gray-400 tw-transition tw-duration-200 hover:tw-text-accent hover:tw-border-accent dark:hover:tw-border-accent-light dark:hover:tw-text-accent-light;
+  }
+}
diff --git a/src/components/back_to_top.rs b/src/components/back_to_top.rs
@@ -1,4 +1,3 @@
-use crate::components::button::LinkBtn;
 use leptos::*;
 use leptos_use::use_window_scroll;
 use web_sys::{ScrollBehavior, ScrollToOptions};
@@ -24,10 +23,10 @@ pub fn BackToTopBtn() -> impl IntoView {
     };
 
     view! {
-        <div style:opacity=opacity_btn class="tw-fixed tw-bottom-4 tw-right-4 tw-transition-opacity tw-duration-700 tw-ease-in-out">
-            <LinkBtn href="#" on:click=on_click_go_to_top>
+        <div style:opacity=opacity_btn class="tw-fixed tw-bottom-6 tw-right-6 tw-transition-opacity tw-duration-700 tw-ease-in-out">
+            <button on:click=on_click_go_to_top class="tw-btn-primary !tw-bg-opacity-80">
                 <i class="fa-solid fa-chevron-up"/>
-            </LinkBtn>
+            </button>
         </div>
     }
 }
diff --git a/src/components/button.rs b/src/components/button.rs
diff --git a/src/components/card.rs b/src/components/card.rs
@@ -3,7 +3,7 @@ use leptos::*;
 #[component]
 pub fn Card(#[prop(optional, into)] class: String, children: Children) -> impl IntoView {
     view! {
-        <div class=class + " tw-w-3/4 tw-md:max-w-8xl tw-bg-white tw-text-gray-700 tw-p-8 tw-rounded-xl tw-shadow-md tw-max-w-4xl">
+        <div class=class + " tw-w-3/4 tw-md:max-w-8xl tw-bg-white dark:tw-bg-graphite tw-text-gray-700 dark:tw-text-white tw-p-8 tw-rounded-xl tw-shadow-md tw-max-w-4xl">
             {children()}
         </div>
     }

diff --git a/src/components/content.rs b/src/components/content.rs
@@ -1,7 +1,7 @@
 use chrono::{DateTime, Utc};
 use leptos::*;
 
-use crate::components::button::LinkBtn;
+use leptos_router::A;
 
 #[component]
 pub fn BaseContent(
@@ -23,11 +23,11 @@ pub fn BaseContent(
                 <Show when=move || created_date.is_some()>
                     <h4 class="tw-text-xl tw-font-bold tw-text-white">Criado em {created_date.map(|d| d.format("%d-%m-%Y").to_string())}</h4>
                 </Show>
-                <LinkBtn href=back_href>
+                <A href=back_href class="tw-btn-primary">
                     <i class="fa fa-chevron-left"></i>
-                </LinkBtn>
+                </A>
             </div>
-            <article class="tw-prose tw-max-w-none" inner_html=inner_html>
+            <article class="tw-prose dark:tw-prose-invert tw-max-w-none hover:prose-a:tw-text-accent dark:hover:prose-a:tw-text-accent-light" inner_html=inner_html>
                 {children.map(|c| c())}
             </article>
         </div>

diff --git a/src/components/dark_mode.rs b/src/components/dark_mode.rs
@@ -0,0 +1,33 @@
+use leptos::*;
+use leptos_meta::Html;
+use leptos_use::{use_color_mode, ColorMode, UseColorModeReturn};
+
+#[component]
+pub fn DarkModeToggleBtn() -> impl IntoView {
+    let UseColorModeReturn { mode, set_mode, .. } = use_color_mode();
+
+    let toggle = move |_| {
+        if mode() == ColorMode::Dark {
+            set_mode(ColorMode::Light);
+        } else {
+            set_mode(ColorMode::Dark);
+        }
+    };
+
+    let icon = move || {
+        if mode() == ColorMode::Dark {
+            "fa-solid fa-moon tw-w-[14px]"
+        } else {
+            "fa-solid fa-sun"
+        }
+    };
+
+    view! {
+        <Html class=move || if mode() == ColorMode::Dark {"tw-dark"} else {""} />
+        <div class="tw-fixed tw-top-6 tw-right-6">
+            <button on:click=toggle class="tw-btn-primary !tw-bg-opacity-80">
+                <i class=icon />
+            </button>
+        </div>
+    }
+}
diff --git a/src/components/divider.rs b/src/components/divider.rs
@@ -3,6 +3,6 @@ use leptos::*;
 #[component]
 pub fn Divider() -> impl IntoView {
     view! {
-        <hr class="!tw-border-t-0 tw-w-full tw-h-px tw-bg-gradient-to-r tw-from-transparent tw-via-black tw-to-transparent tw-opacity-15 tw-my-2"/>
+        <hr class="!tw-border-t-0 tw-w-full tw-h-px tw-bg-gradient-to-r tw-from-transparent tw-via-black dark:tw-via-white tw-to-transparent tw-opacity-15 tw-my-2"/>
     }
 }
diff --git a/src/components/mod.rs b/src/components/mod.rs
@@ -1,6 +1,6 @@
 pub mod back_to_top;
-pub mod button;
 pub mod card;
 pub mod content;
+pub mod dark_mode;
 pub mod divider;
 pub mod nav_menu;
diff --git a/src/components/nav_menu.rs b/src/components/nav_menu.rs
@@ -47,7 +47,7 @@ pub fn NavMenu() -> impl IntoView {
                 when=display_menu
                 fallback=move || view! { <NavButton on:click=show_menu /> }
             >
-                <ul node_ref=menu_ref class="tw-bg-graphite tw-text-white tw-text-sm tw-rounded-lg tw-w-full tw-overflow-hidden">
+                <ul node_ref=menu_ref class="tw-bg-slate-100 tw-text-graphite dark:tw-bg-graphite dark:tw-text-white tw-text-sm tw-rounded-lg tw-w-full tw-overflow-hidden !tw-bg-opacity-80">
                     {linkItems.clone()}
                 </ul>
             </Show>
@@ -58,7 +58,7 @@ pub fn NavMenu() -> impl IntoView {
 #[component]
 fn NavLinkItem(item: NavItem) -> impl IntoView {
     view! {
-        <li class="tw-flex hover:tw-bg-gray-700">
+        <li class="tw-flex hover:tw-text-accent dark:hover:tw-text-accent-light">
             <A href={item.href} class="tw-px-5 tw-py-3 tw-flex tw-flex-row tw-gap-1 tw-w-full tw-items-center">
                 <div class="tw-w-5 tw-h-5">
                     <i class={format!("fa fa-{0}", item.fa_icon)}></i>
@@ -72,7 +72,7 @@ fn NavLinkItem(item: NavItem) -> impl IntoView {
 #[component]
 fn NavButton() -> impl IntoView {
     view! {
-        <button class="tw-bg-graphite tw-w-12 tw-h-11 tw-opacity-60 tw-text-white tw-text-3xl tw-rounded">
+        <button class="tw-btn-primary tw-bg-opacity-80">
             <i class="fa-solid fa-bars"></i>
         </button>
     }

diff --git a/src/lib.rs b/src/lib.rs
@@ -17,6 +17,8 @@ use crate::pages::not_found::NotFoundPage;
 use crate::pages::posts::{PostListPage, PostPage};
 use crate::pages::projects::{ProjectPage, ProjectsListPage};
 
+use crate::components::dark_mode::DarkModeToggleBtn;
+
 #[component]
 pub fn App() -> impl IntoView {
     // Provides context that manages stylesheets, titles, meta tags, etc.
@@ -33,7 +35,7 @@ pub fn App() -> impl IntoView {
     };
 
     view! {
-        <Html lang="pt-br" dir="ltr" attr:data-theme="light"/>
+        <Html lang="pt-br" dir="ltr" />
 
         // sets the document title
         <Title formatter=title_formatter />
@@ -46,6 +48,7 @@ pub fn App() -> impl IntoView {
             <PostsProvider>
                 <Router>
                     <NavMenu />
+                    <DarkModeToggleBtn />
                     <Routes>
                         <Route path="/" view=HomePage/>
                         <Route path="posts" view=PostListPage/>

diff --git a/src/pages/home.rs b/src/pages/home.rs
@@ -1,9 +1,7 @@
 use leptos::*;
+use leptos_router::A;
 
-use crate::{
-    components::{button::LinkBtn, divider::Divider},
-    pages::base::BasePage,
-};
+use crate::{components::divider::Divider, pages::base::BasePage};
 
 #[component]
 pub fn HomePage() -> impl IntoView {
@@ -16,31 +14,31 @@ pub fn HomePage() -> impl IntoView {
                 <h3 class="tw-text-base tw-font-light">"Desenvolvedor - Página em construção"</h3>
                 <Divider />
                 <div class="tw-hflex tw-gap-5">
-                    <LinkBtn href="mailto:[email protected]" class="!tw-text-3xl">
+                    <A href="mailto:[email protected]" class="tw-btn-primary !tw-text-3xl">
                         <i class="fa fa-envelope-square"/>
-                    </LinkBtn>
+                    </A>
 
-                    <LinkBtn href="https://github.com/seraphybr" class="!tw-text-3xl">
+                    <A href="https://github.com/seraphybr" class="tw-btn-primary !tw-text-3xl">
                         <i class="fa-brands fa-github"/>
-                    </LinkBtn>
+                    </A>
 
-                    <LinkBtn href="https://t.me/seraphybr" class="!tw-text-3xl">
+                    <A href="https://t.me/seraphybr" class="tw-btn-primary !tw-text-3xl">
                         <i class="fa-brands fa-telegram"/>
-                    </LinkBtn>
+                    </A>
                 </div>
                 <Divider />
                 <div class="tw-hflex tw-gap-5">
-                    <LinkBtn href="about" class="!tw-text-base !tw-font-normal !tw-min-w-24">
+                    <A href="about" class="tw-btn-primary !tw-text-base !tw-font-normal !tw-min-w-24">
                         Sobre
-                    </LinkBtn>
+                    </A>
 
-                    <LinkBtn href="posts" class="!tw-text-base !tw-font-normal !tw-min-w-24">
+                    <A href="posts" class="tw-btn-primary !tw-text-base !tw-font-normal !tw-min-w-24">
                         Posts
-                    </LinkBtn>
+                    </A>
 
-                    <LinkBtn href="projects" class="!tw-text-base !tw-font-normal !tw-min-w-24">
+                    <A href="projects" class="tw-btn-primary !tw-text-base !tw-font-normal !tw-min-w-24">
                         Projetos
-                    </LinkBtn>
+                    </A>
                 </div>
             </div>
         </BasePage>

diff --git a/src/pages/posts.rs b/src/pages/posts.rs
@@ -6,21 +6,18 @@ use leptos_router::A;
 
 use crate::components::content::BaseContent;
 use crate::models::posts::PostData;
-use crate::{
-    components::button::LinkBtn, contexts::posts::use_posts, models::posts::PostMetadata,
-    pages::base::BasePage,
-};
+use crate::{contexts::posts::use_posts, models::posts::PostMetadata, pages::base::BasePage};
 
 #[component]
 pub fn PostListPage() -> impl IntoView {
     let posts = use_posts();
 
     view! {
         <BasePage title="Todos os Posts">
-            <div class="tw-vflex tw-justify-center tw-items-center tw-gap-5 tw-text-neutral-800 tw-p-8">
+            <div class="tw-vflex tw-justify-center tw-items-center tw-gap-5 tw-text-neutral-800 dark:tw-text-white tw-p-8">
                 <div class="tw-vflex tw-items-center tw-gap-6 tw-pb-12">
                     <h1 class="tw-text-3xl tw-font-bold">Todas as postagens</h1>
-                    <LinkBtn href="/"><i class="fa fa-home"></i></LinkBtn>
+                    <A href="/" class="tw-btn-primary"><i class="fa fa-home"></i></A>
                 </div>
                 <ul class="tw-vflex tw-gap-8">
                     {
@@ -39,9 +36,9 @@ pub fn PostListPage() -> impl IntoView {
 fn PostItem(path: String, metadata: PostMetadata) -> impl IntoView {
     view! {
         <li class="tw-vflex tw-gap-4">
-            <A href=path.clone() class="tw-font-bold tw-text-xl hover:tw-text-greenLime">{metadata.title}</A>
+            <A href=path.clone() class="tw-font-bold tw-text-xl hover:tw-text-accent dark:hover:tw-text-accent-light">{metadata.title}</A>
             <p class="tw-font-light tw-text-base">{metadata.brief}</p>
-            <LinkBtn href=path>Ler Mais</LinkBtn>
+            <A href=path class="tw-btn-primary">Ler Mais</A>
         </li>
     }
 }

diff --git a/src/pages/projects.rs b/src/pages/projects.rs
@@ -2,7 +2,7 @@ use leptos::*;
 use leptos_router::{use_params, Params, Redirect, A};
 
 use crate::{
-    components::{button::LinkBtn, content::BaseContent},
+    components::content::BaseContent,
     contexts::posts::use_posts,
     models::posts::{PostData, PostMetadata},
     pages::base::BasePage,
@@ -14,10 +14,10 @@ pub fn ProjectsListPage() -> impl IntoView {
 
     view! {
         <BasePage title="Projetos">
-            <div class="tw-vflex tw-justify-center tw-items-center tw-gap-5 tw-text-neutral-800 tw-p-8">
+            <div class="tw-vflex tw-justify-center tw-items-center tw-gap-5 tw-text-neutral-800 dark:tw-text-white tw-p-8">
                 <div class="tw-vflex tw-items-center tw-gap-6 tw-pb-12">
                     <h1 class="tw-text-3xl tw-font-bold">Projetos</h1>
-                    <LinkBtn href="/"><i class="fa fa-home"></i></LinkBtn>
+                    <A href="/" class="tw-btn-primary"><i class="fa fa-home"></i></A>
                 </div>
                 <div class="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4">
                     {
@@ -35,14 +35,14 @@ pub fn ProjectsListPage() -> impl IntoView {
 #[component]
 fn ProjectItem(path: String, metadata: PostMetadata) -> impl IntoView {
     view! {
-        <div class="tw-max-w-sm tw-rounded-xl tw-overflow-hidden tw-shadow-lg">
+        <div class="tw-max-w-sm tw-rounded-xl tw-overflow-hidden tw-shadow-lg dark:tw-shadow-none dark:tw-border-2 dark:tw-border-gray-600">
             <img
                 class="tw-w-full tw-h-36"
                 src=metadata.front_image
                 alt=""
                 style:background-color=metadata.front_color
             />
-            <A href=path class="tw-text-gray-700 hover:tw-text-greenLime">
+            <A href=path class="tw-text-gray-700 dark:tw-text-white hover:tw-text-accent dark:hover:tw-text-accent-light">
                 <div class="tw-px-6 tw-py-4">
                     <div class="tw-font-bold tw-text-xl tw-mb-2">{metadata.title}</div>
                     <p class="tw-text-base">

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -4,17 +4,22 @@ module.exports = {
   content: {
     files: ['./index.html', './src/**/*.rs'],
   },
+  darkMode: 'selector',
   theme: {
     extend: {
       fontFamily: {
         sans: ['"Fira Sans"'],
       },
       colors: {
         graphite: '#222',
-        greenLime: '#348314',
+        accent: {
+          DEFAULT: '#348314',
+          light: '#56B045'
+        },
       },
       backgroundImage: {
         'forest-stairs': "url('/img/background-1.jpg')",
+        'road-trees': "url('/img/background-2.jpg')",
       },
       animation: {
         rotateIn: 'rotateIn 1s both'