From 16e04980b510dca3fcabc2f193e25923126a9222 Mon Sep 17 00:00:00 2001 From: Tuan-Dat Tran Date: Tue, 11 Feb 2025 19:24:10 +0100 Subject: [PATCH] feat(dark-mode): removed dark mode, made it default Signed-off-by: Tuan-Dat Tran --- assets/tailwind.css | 188 ++++++++++++++++++++++++++---------------- src/components/mod.rs | 20 ++--- src/cv.rs | 32 +++---- src/layout/footer.rs | 6 +- src/layout/header.rs | 6 +- src/main.rs | 2 +- src/publications.rs | 20 ++--- 7 files changed, 159 insertions(+), 115 deletions(-) diff --git a/assets/tailwind.css b/assets/tailwind.css index 71a710f..cb0fd78 100644 --- a/assets/tailwind.css +++ b/assets/tailwind.css @@ -797,11 +797,6 @@ video { border-radius: 0.375rem; } -.rounded-e-lg { - border-start-end-radius: 0.5rem; - border-end-end-radius: 0.5rem; -} - .rounded-s-lg { border-start-start-radius: 0.5rem; border-end-start-radius: 0.5rem; @@ -828,11 +823,26 @@ video { border-color: rgb(229 231 235 / var(--tw-border-opacity)); } +.border-gray-600 { + --tw-border-opacity: 1; + border-color: rgb(75 85 99 / var(--tw-border-opacity)); +} + +.border-gray-700 { + --tw-border-opacity: 1; + border-color: rgb(55 65 81 / var(--tw-border-opacity)); +} + .border-white { --tw-border-opacity: 1; border-color: rgb(255 255 255 / var(--tw-border-opacity)); } +.border-gray-900 { + --tw-border-opacity: 1; + border-color: rgb(17 24 39 / var(--tw-border-opacity)); +} + .bg-blue-100 { --tw-bg-opacity: 1; background-color: rgb(219 234 254 / var(--tw-bg-opacity)); @@ -848,9 +858,14 @@ video { background-color: rgb(229 231 235 / var(--tw-bg-opacity)); } -.bg-gray-50 { +.bg-gray-700 { --tw-bg-opacity: 1; - background-color: rgb(249 250 251 / var(--tw-bg-opacity)); + background-color: rgb(55 65 81 / var(--tw-bg-opacity)); +} + +.bg-gray-800 { + --tw-bg-opacity: 1; + background-color: rgb(31 41 55 / var(--tw-bg-opacity)); } .bg-green-100 { @@ -888,6 +903,46 @@ video { background-color: rgb(254 249 195 / var(--tw-bg-opacity)); } +.bg-gray-900 { + --tw-bg-opacity: 1; + background-color: rgb(17 24 39 / var(--tw-bg-opacity)); +} + +.bg-blue-900 { + --tw-bg-opacity: 1; + background-color: rgb(30 58 138 / var(--tw-bg-opacity)); +} + +.bg-green-900 { + --tw-bg-opacity: 1; + background-color: rgb(20 83 45 / var(--tw-bg-opacity)); +} + +.bg-indigo-900 { + --tw-bg-opacity: 1; + background-color: rgb(49 46 129 / var(--tw-bg-opacity)); +} + +.bg-pink-900 { + --tw-bg-opacity: 1; + background-color: rgb(131 24 67 / var(--tw-bg-opacity)); +} + +.bg-purple-900 { + --tw-bg-opacity: 1; + background-color: rgb(88 28 135 / var(--tw-bg-opacity)); +} + +.bg-red-900 { + --tw-bg-opacity: 1; + background-color: rgb(127 29 29 / var(--tw-bg-opacity)); +} + +.bg-yellow-900 { + --tw-bg-opacity: 1; + background-color: rgb(113 63 18 / var(--tw-bg-opacity)); +} + .bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); } @@ -1068,9 +1123,9 @@ video { color: rgb(30 64 175 / var(--tw-text-opacity)); } -.text-cyan-600 { +.text-cyan-400 { --tw-text-opacity: 1; - color: rgb(8 145 178 / var(--tw-text-opacity)); + color: rgb(34 211 238 / var(--tw-text-opacity)); } .text-gray-400 { @@ -1137,6 +1192,46 @@ video { color: rgb(133 77 14 / var(--tw-text-opacity)); } +.text-blue-300 { + --tw-text-opacity: 1; + color: rgb(147 197 253 / var(--tw-text-opacity)); +} + +.text-gray-300 { + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} + +.text-green-300 { + --tw-text-opacity: 1; + color: rgb(134 239 172 / var(--tw-text-opacity)); +} + +.text-indigo-300 { + --tw-text-opacity: 1; + color: rgb(165 180 252 / var(--tw-text-opacity)); +} + +.text-pink-300 { + --tw-text-opacity: 1; + color: rgb(249 168 212 / var(--tw-text-opacity)); +} + +.text-purple-300 { + --tw-text-opacity: 1; + color: rgb(216 180 254 / var(--tw-text-opacity)); +} + +.text-red-300 { + --tw-text-opacity: 1; + color: rgb(252 165 165 / var(--tw-text-opacity)); +} + +.text-yellow-300 { + --tw-text-opacity: 1; + color: rgb(253 224 71 / var(--tw-text-opacity)); +} + .shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); @@ -1174,20 +1269,17 @@ video { transition-duration: 300ms; } -.hover\:bg-gray-100:hover { +@custom-variant dark (&:where(.dark, .dark *)); + +.hover\:bg-gray-700:hover { --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)); + background-color: rgb(55 65 81 / var(--tw-bg-opacity)); } .hover\:bg-gradient-to-br:hover { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); } -.hover\:text-blue-700:hover { - --tw-text-opacity: 1; - color: rgb(29 78 216 / var(--tw-text-opacity)); -} - .hover\:text-white:hover { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); @@ -1206,9 +1298,9 @@ video { z-index: 10; } -.focus\:text-blue-700:focus { +.focus\:text-white:focus { --tw-text-opacity: 1; - color: rgb(29 78 216 / var(--tw-text-opacity)); + color: rgb(255 255 255 / var(--tw-text-opacity)); } .focus\:outline-none:focus { @@ -1228,14 +1320,14 @@ video { box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } -.focus\:ring-blue-700:focus { +.focus\:ring-blue-500:focus { --tw-ring-opacity: 1; - --tw-ring-color: rgb(29 78 216 / var(--tw-ring-opacity)); + --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity)); } -.focus\:ring-cyan-300:focus { +.focus\:ring-cyan-800:focus { --tw-ring-opacity: 1; - --tw-ring-color: rgb(103 232 249 / var(--tw-ring-opacity)); + --tw-ring-color: rgb(21 94 117 / var(--tw-ring-opacity)); } .group:hover .group-hover\:from-green-400 { @@ -1288,9 +1380,9 @@ video { line-height: 1; } - .md\:text-blue-700 { + .md\:text-blue-500 { --tw-text-opacity: 1; - color: rgb(29 78 216 / var(--tw-text-opacity)); + color: rgb(59 130 246 / var(--tw-text-opacity)); } } @@ -1302,11 +1394,6 @@ video { } @media (prefers-color-scheme: dark) { - .dark\:border-gray-600 { - --tw-border-opacity: 1; - border-color: rgb(75 85 99 / var(--tw-border-opacity)); - } - .dark\:border-gray-700 { --tw-border-opacity: 1; border-color: rgb(55 65 81 / var(--tw-border-opacity)); @@ -1327,11 +1414,6 @@ video { background-color: rgb(55 65 81 / var(--tw-bg-opacity)); } - .dark\:bg-gray-800 { - --tw-bg-opacity: 1; - background-color: rgb(31 41 55 / var(--tw-bg-opacity)); - } - .dark\:bg-gray-900 { --tw-bg-opacity: 1; background-color: rgb(17 24 39 / var(--tw-bg-opacity)); @@ -1372,11 +1454,6 @@ video { color: rgb(147 197 253 / var(--tw-text-opacity)); } - .dark\:text-cyan-400 { - --tw-text-opacity: 1; - color: rgb(34 211 238 / var(--tw-text-opacity)); - } - .dark\:text-gray-300 { --tw-text-opacity: 1; color: rgb(209 213 219 / var(--tw-text-opacity)); @@ -1426,38 +1503,5 @@ video { --tw-text-opacity: 1; color: rgb(253 224 71 / var(--tw-text-opacity)); } - - .dark\:hover\:bg-gray-700:hover { - --tw-bg-opacity: 1; - background-color: rgb(55 65 81 / var(--tw-bg-opacity)); - } - - .dark\:hover\:text-white:hover { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); - } - - .dark\:focus\:text-white:focus { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); - } - - .dark\:focus\:ring-blue-500:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity)); - } - - .dark\:focus\:ring-cyan-800:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(21 94 117 / var(--tw-ring-opacity)); - } } -@media (min-width: 768px) { - @media (prefers-color-scheme: dark) { - .md\:dark\:text-blue-500 { - --tw-text-opacity: 1; - color: rgb(59 130 246 / var(--tw-text-opacity)); - } - } -} \ No newline at end of file diff --git a/src/components/mod.rs b/src/components/mod.rs index 0d3de27..ce6556b 100644 --- a/src/components/mod.rs +++ b/src/components/mod.rs @@ -14,7 +14,7 @@ pub fn P(props: PProps) -> Element { div { class: "{props.class}", p { - class: "mb-2 font-normal text-gray-900 dark:text-white", + class: "mb-2 font-normal text-white", {props.children} }, } @@ -27,7 +27,7 @@ pub fn Title(props: PProps) -> Element { div { class: "{props.class}", h1 { - class: "mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white", + class: "mb-2 text-2xl font-bold tracking-tight text-white", {props.children} } } @@ -40,7 +40,7 @@ pub fn H1(props: PProps) -> Element { div { class: "{props.class}", h1 { - class: "mb-4 text-3xl font-extrabold text-gray-900 dark:text-white md:text-5xl lg:text-6xl", + class: "mb-4 text-3xl font-extrabold text-white md:text-5xl lg:text-6xl", span { class: "text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400", {props.children} @@ -56,7 +56,7 @@ pub fn H4(props: PProps) -> Element { class: "{props.class}", class: "mb-4", h3 { - class: "text-lg uppercase text-cyan-600 dark:text-cyan-400 tracking-widest mb-4 font-bold", + class: "text-lg uppercase text-cyan-400 tracking-widest mb-4 font-bold", {props.children} } } @@ -69,7 +69,7 @@ pub fn H5(props: PProps) -> Element { div { class: "{props.class}", h5 { - class: "mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white", + class: "mb-2 text-2xl font-bold tracking-tight text-white", {props.children} } } @@ -89,7 +89,7 @@ pub struct CardProp { pub fn Card(prop: CardProp) -> Element { rsx! { div { - class: "flex flex-col py-10 items-center min-w-fit text-white bg-gradient-to-r from-purple-500 to-blue-500 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 rounded-lg px-5 py-2.5 min-w-fit max-w-8", + class: "flex flex-col py-10 items-center min-w-fit text-white bg-gradient-to-r from-purple-500 to-blue-500 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-cyan-800 rounded-lg px-5 py-2.5 min-w-fit max-w-8", div { class: "pb-4", div { @@ -97,7 +97,7 @@ pub fn Card(prop: CardProp) -> Element { Picture {src: "{prop.picture}"}, } } - Title { "{prop.name}", span { class: "text-grey-600 dark:text-grey-500 text-lg", " {prop.gender}" } }, + Title { "{prop.name}", span { class: "text-grey-500 text-lg", " {prop.gender}" } }, { prop.children } } } @@ -123,11 +123,11 @@ fn Picture(prop: PictureProp) -> Element { pub fn UnderConstruction() -> Element { rsx! { div { - class:"rounded justify-between w-full p-4 border-b border-gray-200 bg-gray-50 dark:bg-gray-700 dark:border-gray-600 my-8", + class:"rounded justify-between w-full p-4 border-b bg-gray-700 border-gray-600 my-8", div { class:"items-center mx-auto", p { - class:"items-center text-sm font-normal text-gray-500 dark:text-gray-400", + class:"items-center text-sm font-normal text-gray-400", span { { t!("component_under_construction") } } } } @@ -137,7 +137,7 @@ pub fn UnderConstruction() -> Element { pub fn HR() -> Element { rsx! { - hr { class:"h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"} + hr { class:"h-px my-8 border-0 bg-gray-700"} } } diff --git a/src/cv.rs b/src/cv.rs index 82cd2c7..88c9e4e 100644 --- a/src/cv.rs +++ b/src/cv.rs @@ -45,7 +45,7 @@ fn WorkExperience() -> Element { class: "ms-8 max-w-3/4", H4 { { t!("cv_workexperience_title") } }, ol { - class:"relative border-s border-gray-200 dark:border-gray-700", + class:"relative border-s border-gray-700", CVEntry {time: t!("cv_workexperience_dd_devops_time"), title: t!("cv_workexperience_dd_devops_title"), technologies: vec!["Kubenertes".to_string(), "ArgoCD".to_string(), "Ansible".to_string(), "Azure".to_string(), "Docker".to_string(), "ELK".to_string()], description: t!("cv_workexperience_dd_devops_description") @@ -93,7 +93,7 @@ fn Education() -> Element { H4 { { t!("cv_education_title") } }, Entry { title: t!("cv_education_bachelor_title"), - time { class:"mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500", { t!("cv_education_bachelor_time") } }, + time { class:"mb-1 text-sm font-normal leading-none text-gray-500", { t!("cv_education_bachelor_time") } }, }, } } @@ -160,7 +160,7 @@ fn Entry(props: EntryProps) -> Element { rsx! { div { class: "{props.class}", - h6 { class: "font-semibold text-gray-900 dark:text-white", "{props.title}"} + h6 { class: "font-semibold text-white", "{props.title}"} {props.children}, } } @@ -183,16 +183,16 @@ fn CVEntry(props: CVEntryProps) -> Element { li { class: "max-w-xl", class: "{props.class}", - div { class:"absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -start-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"}, - time { class:"mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500", "{props.time}"}, - h6 { class: "text-lg font-semibold text-gray-900 dark:text-white", "{props.title}"} + div { class:"absolute w-3 h-3 rounded-full mt-1.5 -start-1.5 border border-gray-900 bg-gray-700"}, + time { class:"mb-1 text-sm font-normal leading-none text-gray-500", "{props.time}"}, + h6 { class: "text-lg font-semibold text-white", "{props.title}"} ul { class: "flex flex-wrap gap-2", for (index, value) in props.technologies.iter().enumerate() { li { key: "{index}", RandomBadge { text: "{value}"} } } } - p { class:"text-base font-normal text-gray-500 dark:text-gray-400", "{props.description}"}, + p { class:"text-base font-normal text-gray-400", "{props.description}"}, {props.children} } } @@ -211,14 +211,14 @@ fn RandomBadge(text: String) -> Element { fn random_badge_color(seed: usize) -> String { let colors = [ - "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300", - "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300", - "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300", - "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300", - "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300", - "bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300", - "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300", - "bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-300", + "bg-blue-900 text-blue-300", + "bg-gray-700 text-gray-300", + "bg-red-900 text-red-300", + "bg-green-900 text-green-300", + "bg-yellow-900 text-yellow-300", + "bg-indigo-900 text-indigo-300", + "bg-purple-900 text-purple-300", + "bg-pink-900 text-pink-300", ]; colors[seed % colors.len()].to_string() @@ -241,7 +241,7 @@ fn Socials() -> Element { fn P(children: Element) -> Element { rsx! { p { - class: "text-base font-normal text-gray-500 dark:text-gray-400", + class: "text-base font-normal text-gray-400", {children}, } } diff --git a/src/layout/footer.rs b/src/layout/footer.rs index c14ba29..b043619 100644 --- a/src/layout/footer.rs +++ b/src/layout/footer.rs @@ -6,17 +6,17 @@ pub fn Footer() -> Element { div { class: "container mx-auto pb-4", footer { - class:"bg-white rounded-lg shadow dark:bg-gray-800", + class:"rounded-lg shadow bg-gray-800", div { class:"w-full mx-auto p-4 flex items-center justify-between", span { - class:"text-sm text-gray-500 sm:text-center dark:text-gray-400", + class:"text-sm sm:text-center text-gray-400", { t!("footer_year") }, a { href: "#", class: "hover:underline", { t!("footer_name") }}, { t!("footer_rights") } } ul { - class:"flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0", + class:"flex flex-wrap items-center mt-3 text-sm font-medium text-gray-400 sm:mt-0", li { Link { to:"mailto:tuan-dat.tran@tudattr.dev", class:"hover:underline", { t!("footer_contact") } } }, diff --git a/src/layout/header.rs b/src/layout/header.rs index acdd031..d0ef0d7 100644 --- a/src/layout/header.rs +++ b/src/layout/header.rs @@ -40,11 +40,11 @@ fn LanguageButtonGroup() -> Element { div { class: "rounded-md shadow-sm justify-end", button { - class: "px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-s-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white", + class: "px-4 py-2 text-sm font-medium border rounded-s-lg focus:z-10 focus:ring-2 bg-gray-800 border-gray-700 text-white hover:text-white hover:bg-gray-700 focus:ring-blue-500 focus:text-white", onclick: change_to_english, label { { t!("headers_language_buttons_english") } } }, button { - class: "px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-e-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white", + class: "px-4 py-2 text-sm font-medium border rounded-s-lg focus:z-10 focus:ring-2 bg-gray-800 border-gray-700 text-white hover:text-white hover:bg-gray-700 focus:ring-blue-500 focus:text-white", onclick: change_to_german, label { { t!("headers_language_buttons_german") } } } } @@ -54,6 +54,6 @@ fn LanguageButtonGroup() -> Element { #[component] fn HeaderLink(url: Route, text: String) -> Element { rsx! { - Link { to: url, class:"md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500", {text} } + Link { to: url, class:"md:bg-transparent md:p-0 text-white md:text-blue-500", {text} } } } diff --git a/src/main.rs b/src/main.rs index a8687c1..6be5f61 100644 --- a/src/main.rs +++ b/src/main.rs @@ -81,7 +81,7 @@ fn App() -> Element { " } div { - class: "bg-white dark:bg-gray-900 min-h-screen", + class: "bg-gray-900 min-h-screen", Router:: {}, } } diff --git a/src/publications.rs b/src/publications.rs index 43855be..03fbd68 100644 --- a/src/publications.rs +++ b/src/publications.rs @@ -58,23 +58,23 @@ fn Publication(prop: PublicationProp) -> Element { let pattern = vec!["T.-D. Tran".to_string(), "Tuan-Dat Tran".to_string()]; rsx! { Link { - class:"block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700", + class:"block max-w-sm p-6 border rounded-lg shadow bg-gray-800 border-gray-700 hover:bg-gray-700", to:"{prop.doi}", new_tab: true, h5 { - class:"mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white", + class:"mb-2 text-2xl font-bold tracking-tight text-white", "{prop.title}", }, - span { class: "text-lg text-gray-900 dark:text-white", "{prop.conference}" }, + span { class: "text-lg text-white", "{prop.conference}" }, p { - class:"font-normal text-gray-700 dark:text-gray-400 italic", + class:"font-normal text-gray-400 italic", Bolding { authors: "{prop.authors}", patterns: pattern, }, } p { - class:"font-normal text-gray-700 dark:text-gray-400", + class:"font-normal text-gray-400", "{prop.description}", } } @@ -133,23 +133,23 @@ fn Project(prop: ProjectProp) -> Element { rsx! { Link { - class:"block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700", + class:"block max-w-sm p-6 border rounded-lg shadow bg-gray-800 border-gray-700 hover:bg-gray-700", to:"{prop.url}", new_tab: true, h5 { - class:"mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white", + class:"mb-2 text-2xl font-bold tracking-tight text-white", "{prop.title}", }, - p { class: "text-lg text-gray-900 dark:text-white", "{prop.kind}" }, + p { class: "text-lg text-white", "{prop.kind}" }, p { - class:"font-normal text-gray-700 dark:text-gray-400", + class:"font-normal text-gray-400", Bolding { authors: "{prop.authors}", patterns: pattern, }, } p { - class:"font-normal text-gray-700 dark:text-gray-400", + class:"font-normal text-gray-400", "{prop.description}", } }