feat(dark-mode): removed dark mode, made it default

Signed-off-by: Tuan-Dat Tran <tuan-dat.tran@tudattr.dev>

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));
-    }
-  }
-}

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"}
     }
 }
 

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"},
+            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-400 dark:text-gray-500", "{props.time}"},
+            time { class:"mb-1 text-sm font-normal leading-none text-gray-500", "{props.time}"},
-            h6 { class: "text-lg font-semibold text-gray-900 dark:text-white", "{props.title}"}
+            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-blue-900 text-blue-300",
-        "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300",
+        "bg-gray-700 text-gray-300",
-        "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300",
+        "bg-red-900 text-red-300",
-        "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300",
+        "bg-green-900 text-green-300",
-        "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300",
+        "bg-yellow-900 text-yellow-300",
-        "bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300",
+        "bg-indigo-900 text-indigo-300",
-        "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300",
+        "bg-purple-900 text-purple-300",
-        "bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-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},
         }
     }

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") } }
                         },

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} }
     }
 }

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::<Route> {},
         }
     }

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}",
             }
         }