Dark mode for Registry Landing page

package.json

@@ -21,6 +21,7 @@
     "dotenv": "^16.4.5",
     "next": "14.2.4",
     "next-contentlayer2": "^0.4.6",
+    "next-themes": "^0.4.4",
     "react": "^18",
     "react-dom": "^18",
     "react-intersection-observer": "^9.13.1",

src/app/(explore)/[...slug]/page.tsx

@@ -4,7 +4,6 @@ import Image from "next/image";
 import { notFound } from "next/navigation";
 import { ContentTreeArray } from "@/utils/data";
 import LinkIcon from "/public/svgs/link-icon.svg";
-import WorldIcon from "/public/svgs/world-icon.svg";
 import allSources from "@/public/sources-data.json";
 import { constructSlugPaths, deriveSourcesList, fetchTranscriptDetails, loopArrOrObject } from "@/utils";
 import { ArrowLinkRight } from "@bitcoin-dev-project/bdp-ui/icons";
@@ -13,6 +12,7 @@ import TranscriptDetailsCard from "@/components/common/TranscriptDetailsCard";
 import { SourcesBreadCrumbs } from "@/components/explore/SourcesBreadCrumbs";
 import TranscriptContentPage from "@/components/explore/TranscriptContentPage";
 import { LanguageCodes } from "@/config";
+import WorldIcon from "@/components/svgs/WorldIcon";
 
 // forces 404 for paths not generated from `generateStaticParams` function.
 export const dynamicParams = false;
@@ -90,7 +90,7 @@ const page = ({ params }: { params: { slug: string[] } }) => {
       <div className='flex items-start lg:gap-[50px]'>
         <div className='flex flex-col w-full gap-6 md:gap-8 2xl:gap-10 no-scrollbar'>
           <div
-            className={`flex flex-col ${
+            className={`flex flex-col dark:border-b-gray-custom-1800 ${
               isRoot ? "border-b border-b-[#9B9B9B] pb-6 md:border-b-0 md:pb-0" : "border-b border-b-[#9B9B9B] pb-6 lg:pb-10"
             } gap-5 2xl:gap-6`}
           >
@@ -106,7 +106,7 @@ const page = ({ params }: { params: { slug: string[] } }) => {
               <h3 className='text-xl 2xl:text-2xl font-medium pt-6 md:pt-3'>{metadata?.title ?? slug[slug.length - 1]}</h3>
               {isRoot && metadata?.website ? (
                 <div className='flex gap-1 items-center pt-3 md:pt-6'>
-                  <Image src={WorldIcon} alt='world icon' className='w-[18px] md:w-[20px]' />
+                  <WorldIcon className='w-[18px] md:w-[20px]' />
                   <Link
                     href={metadata?.website ?? ""}
                     target='_blank'
@@ -153,7 +153,9 @@ const page = ({ params }: { params: { slug: string[] } }) => {
                   <Link
                     key={`${value.route}-${i}}`}
                     href={`/${[...slug, value.route].join("/")}`}
-                    className='flex capitalize cursor-pointer border max-w-[100%] border-gray-custom-1200 rounded-[5px] justify-between items-center text-sm py-5 px-4 lg:py-7 2xl:px-6 2xl:text-lg font-semibold text-gray-custom-1100'
+                    className='flex capitalize cursor-pointer border max-w-[100%]
+                    border-gray-custom-1200 dark:border-gray-custom-1800 rounded-[5px] justify-between items-center
+                    text-sm py-5 px-4 lg:py-7 2xl:px-6 2xl:text-lg font-semibold text-gray-custom-1100 dark:text-black'
                   >
                     <span className='text-wrap break-words max-w-[80%]'>{value.title}</span>
                     <span>{value.count}</span>

src/app/about/page.tsx

@@ -8,11 +8,12 @@ import { ArrowLinkRight } from "@bitcoin-dev-project/bdp-ui/icons";
 import reviewers from "@/public/reviewers-data.json";
 import upperLineIcon from "@/public/svgs/upper-line-icon.svg";
 import lowerLineIcon from "@/public/svgs/lower-line-icon.svg";
+import CustomBorder from "@/components/svgs/CustomBorder";
 
 const page = () => {
   return (
     <main className='flex flex-col items-center justify-center w-full'>
-      <Wrapper className='text-black flex flex-col max-sm:px-3'>
+      <Wrapper className='text-black flex flex-col max-sm:px-3 '>
         <div className='text-center py-10 md:py-[104px] flex flex-col items-center justify-center'>
           <h1 className='text-[40px] leading-[48px] font-medium md:text-6xl 2xl:text-7xl'>What Is Bitcoin Transcripts?</h1>
           <p className='text-base md:text-xl 2xl:text-2xl 2xl:leading-[33.84px] md:max-w-[1050px] max-w-[1195px] pt-10 md:pt-12 2xl:pt-14 text-center w-full'>
@@ -22,7 +23,7 @@ const page = () => {
         </div>
       </Wrapper>
 
-      <div className='bg-gray-custom-900 w-full'>
+      <div className='bg-gray-custom-900 w-full dark:bg-dark-custom-200'>
         <Wrapper className='py-16 md:py-[104px] flex flex-col md:flex-row items-center justify-between gap-10 md:gap-8 lg:gap-[52px] max-sm:px-3'>
           <section className='max-w-full md:max-w-[50%]'>
             <h1 className='text-[40px] text-center md:text-start leading-[48px] font-medium md:text-5xl 2xl:text-6xl'>How We Got Here</h1>
@@ -59,6 +60,11 @@ const page = () => {
           </div>
 
           <div className='flex flex-col gap-10 md:gap-20 relative'>
+            <div
+            className="flex w-full max-w-24 md:max-w-[184px] z-[-1] h-full justify-center absolute">
+              <CustomBorder className='h-full' />
+            </div>
+
             {processFlowData.map((item) => (
               <div key={item.title} className='flex flex-row items-center gap-4 sm:gap-[31px]'>
                 <section
@@ -152,9 +158,9 @@ const GroupedImageSection = ({
                 alt={title}
                 width={132}
                 height={132}
-                className='w-[100px] md:w-[132px] h-[100px] md:h-[132px] bg-black rounded-full border-[0.5px]'
+                className='w-[100px] md:w-[132px] h-[100px] md:h-[132px] bg-black dark:bg-gray-custom-100 rounded-full border-[0.5px]'
               />
-              <p className='text-custom-black-custom-400 text-sm leading-[22.12px] font-medium md:text-base md:font-semibold md:leading-[25.28px] whitespace-nowrap max-w-full text-nowrap overflow-hidden text-ellipsis'>
+              <p className='text-custom-black-custom-400 dark:text-gray-custom-100 text-sm leading-[22.12px] font-medium md:text-base md:font-semibold md:leading-[25.28px] whitespace-nowrap max-w-full text-nowrap overflow-hidden text-ellipsis'>
                 {title}
               </p>
             </Link>

src/app/globals.css

@@ -34,10 +34,34 @@
   --basic-mono-font: basic-mono;
   --header-height: 86px;
   --stroke: #bfbfbf;
-  --primary-text: #292929;
+  --primary-text-light-1: #292929;
+  --primary-background:#FAFAFA;
+  --primary-text-secondary:#000;
   --accent: #F7931A;
 }
 
+.dark {
+     --primary-text-light-1: #636366;
+     --primary-background:#141414;
+     --primary-text-secondary:#FAFAFA;
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active{
+    -webkit-box-shadow: 0 0 0 30px white inset !important;
+    border-radius: 14px;
+}
+.dark{
+    input:-webkit-autofill,
+    input:-webkit-autofill:hover,
+    input:-webkit-autofill:focus,
+    input:-webkit-autofill:active{
+        -webkit-box-shadow: 0 0 0 30px #282828  inset !important;
+        border-radius: 20px ;
+    }
+}
 /* @media (prefers-color-scheme: dark) {
   :root {
     --foreground-rgb: 255, 255, 255;
@@ -95,6 +119,13 @@ body {
   z-index: -1;
 }
 
+.dark{
+    .selection-box::before {
+      background-color: #141414;
+
+    }
+}
+
 /* styling for non-interactive body
 this is a hack to make the body non-interactive
 IMPORTANT: elements oustide the element with data-freeze-body that needs interactivity must have the class "pointer-events-auto" else it will be frozen too */
@@ -150,7 +181,7 @@ body:has([data-freeze-body="true"]) {
   #main:has(form[data-input-focus="true"]) .navBar {
     display: none !important;
   }
-  
+
   .popout {
     position: absolute;
     width: 100vw;
@@ -175,4 +206,4 @@ body:has([data-freeze-body="true"]) {
     opacity: 1;
     transform: translateY(0) scale(1);
   }
-}
+}

src/app/layout.tsx

@@ -5,6 +5,7 @@ import "./globals.css";
 import Script from "next/script";
 import Header from "@/components/layout/Header";
 import QueryProvider from "./providers";
+import { ThemeProvider } from "next-themes";
 
 const manrope = Manrope({ subsets: ["latin"], display: "swap" });
 
@@ -25,8 +26,12 @@ export default function RootLayout({
     <html lang="en">
       <body className={manrope.className}>
         <QueryProvider>
-          <Header />
+          <ThemeProvider
+        attribute={"class"}
+        >
+        <Header />
             {children}
+        </ThemeProvider>
         </QueryProvider>
       </body>
       <Script

src/app/page.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import Header from "@/components/layout/Header";
 import HeroSection from "@/components/landing-page/HeroSection";
 import FeaturedTranscripts from "@/components/landing-page/featured-transcripts/FeaturedTranscripts";
 import WhyTranscripts from "@/components/landing-page/WhyTranscripts";
@@ -8,7 +7,7 @@ import FooterComponent from "@/components/layout/FooterComponent";
 
 export default function Home() {
   return (
-    <div className='bg-white flex flex-col items-center justify-center'>
+    <div className='bg-white dark:bg-dark-custom-100 flex flex-col items-center justify-center'>
       <div className='w-full'>
         <HeroSection />
         <FeaturedTranscripts />

src/app/search/page.tsx

@@ -22,7 +22,7 @@ const SearchPage = () => {
   if (isLoading) {
     return (
       <div className="mt-4">
-        <SkeletonResults count={4} />;
+        <SkeletonResults count={4} />
       </div>
     );
   }

src/components/common/BaseCrumbLists.tsx

@@ -15,14 +15,14 @@ const BaseCrumbLists = ({crumbsArray}:{crumbsArray:BaseCrumbType[]}) => {
             className={`capitalize hover:underline font-medium text-sm 2xl:text-base ${
               link.isActive
                 ? "text-orange-custom-100"
-                : "text-black md:text-gray-custom-800"
+                : "text-black md:text-gray-custom-800 dark:text-gray-custom-800"
             }`}
             href={link.link}
           >
             {link.name}
           </Link>
           {i !== crumbsArray.length - 1 && (
-            <p className="text-custom-black-custom-200">/</p>
+            <p className="text-custom-black-custom-200 dark:text-gray-custom-800">/</p>
           )}
         </div>
       ))}

src/components/common/Pill.tsx

@@ -31,19 +31,20 @@ const Pill = (props: PillProps) => {
 };
 
 const PillActionContainer = (props: React.PropsWithChildren<PillProps>) => {
-  const selectedPillClass = `data-[selected=true]:bg-orange-custom-100 data-[selected=true]:text-gray-custom-100`
+  const selectedPillClass = `data-[selected=true]:bg-orange-custom-100 data-[selected=true]:text-gray-custom-100 dark:data-[selected=true]:bg-orange-custom-100 dark:data-[selected=true]:text-black`
   const animationClass = `transition-all duration-300 `
   const prop = {
     "data-selected": Boolean(props.isSelected),
-    className: twMerge(selectedPillClass, animationClass, "max-content py-[4px] px-[6px] md:px-4 rounded-[5px] bg-gray-custom-700 hover:bg-gray-custom-600 hover:text-gray-custom-100 max-md:leading-[100%] cursor-pointer"),
+    className: twMerge(selectedPillClass, animationClass,
+      "max-content py-[4px] px-[6px] md:px-4 rounded-[5px] bg-gray-custom-700 hover:bg-gray-custom-600 hover:text-gray-custom-100 dark:bg-gray-custom-2100 dark:hover:bg-gray-custom-1800 dark:hover:text-black max-md:leading-[100%] cursor-pointer"),
   };
 
   const defaultOnClick = (e: React.MouseEvent) => {e.stopPropagation()}
   if (props.kind === "button") {
     const handleClick = (e: React.MouseEvent) => {
       e.preventDefault();
       defaultOnClick(e);
-      props.onClick 
+      props.onClick
       ? props.onClick(e)
       : props.toggleFilter({ filterType: props.type, filterValue: props.value });
     }
@@ -53,7 +54,7 @@ const PillActionContainer = (props: React.PropsWithChildren<PillProps>) => {
       </button>
     )
   }
-  
+
   return (
     <Link href={props.slug || ""} {...prop} onClick={defaultOnClick} prefetch={false}>
       {props.children}

src/components/common/Tabs.tsx

@@ -27,7 +27,8 @@ const Tabs = ({
 
   return (
     <div className="flex flex-col relative">
-      <div className="sticky bg-white z-10 top-0 lg:top-0  md:pt-6 h-full flex gap-4 md:gap-10 xl:gap-16 justify-start items-center border-b border-b-gray-custom-1200">
+      <div className="sticky bg-white dark:bg-dark-custom-100 z-10 top-0 lg:top-0  md:pt-6 h-full flex gap-4
+        md:gap-10 xl:gap-16 justify-start items-center border-b border-b-gray-custom-1200 dark:border-b-gray-custom-1800">
         <Tab
           title="Transcript"
           isOpen={openTabs === "transcript"}
@@ -116,7 +117,7 @@ const Tab = ({
       <section className="flex flex-col h-full items-center justify-between relative w-full">
         <p
           className={`text-sm md:text-base xl:text-lg 2xl:text-xl font-normal ${
-            isOpen ? "text-orange-custom-100" : "text-custom-black-custom-400"
+            isOpen ? "text-orange-custom-100" : "text-custom-black-custom-400 dark:text-gray-custom-100"
           }`}
         >
           {title}

src/components/common/TranscriptDetailsCard.tsx

@@ -33,7 +33,7 @@ const TranscriptDetailsCard = ({ data, pillCountLimit = 3, breadCrumbsComponent
   }
 
   return (
-    <div className='border border-gray-custom-1200 rounded-lg p-4 md:p-5 2xl:p-6 flex flex-col gap-3 md:gap-4'>
+    <div className='border border-gray-custom-1200 dark:border-gray-custom-1800 rounded-lg p-4 md:p-5 2xl:p-6 flex flex-col gap-3 md:gap-4'>
       <section className='flex md:flex-row flex-col justify-between gap-2 w-full'>
         <div className='flex flex-col gap-2 w-full'>
           {breadCrumbsComponent}
@@ -46,8 +46,8 @@ const TranscriptDetailsCard = ({ data, pillCountLimit = 3, breadCrumbsComponent
         </div>
         {date && (
           <div className='md:self-start flex gap-2 items-center shrink-0'>
-            <CalendarIcon className='w-[18px] md:w-[20px]' />
-            <p className='text-xs md:text-sm 2xl:text-base leading-[17.6px] font-medium text-gray-custom-800'>{formatDate(date!)}</p>
+            <CalendarIcon className='w-[18px] md:w-[20px] dark:text-gray-custom-600' />
+            <p className='text-xs md:text-sm 2xl:text-base leading-[17.6px] font-medium text-gray-custom-800 dark:text-gray-custom-600'>{formatDate(date!)}</p>
           </div>
         )}
       </section>
@@ -57,7 +57,7 @@ const TranscriptDetailsCard = ({ data, pillCountLimit = 3, breadCrumbsComponent
           <section className='flex gap-2'>
             <>
               <span>
-                <MicIcon className='w-5 md:w-6' />
+                <MicIcon className='w-5 md:w-6 ' />
               </span>
               <div className='flex gap-[9px] flex-wrap'>
                 <div className='flex flex-wrap gap-[9px] text-xs md:text-sm 2xl:text-base'>
@@ -89,7 +89,7 @@ const TranscriptDetailsCard = ({ data, pillCountLimit = 3, breadCrumbsComponent
                   ))}
 
                   {calculateRemaining(tagsDetailed) === 0 ? null : (
-                    <p className='py-[2px] px-5 rounded-[5px] bg-gray-custom-700 whitespace-nowrap text-nowrap max-md:px-3 lg:py-1 max-md:leading-[100%]'>
+                    <p className='py-[2px] px-5 rounded-[5px] dark:bg-gray-custom-2100 dark:hover:bg-gray-custom-1800 dark:hover:text-black bg-gray-custom-700 whitespace-nowrap text-nowrap max-md:px-3 lg:py-1 max-md:leading-[100%]'>
                       + {calculateRemaining(tagsDetailed)} more
                     </p>
                   )}
@@ -102,7 +102,7 @@ const TranscriptDetailsCard = ({ data, pillCountLimit = 3, breadCrumbsComponent
 
       {summary || body ? (
         <section>
-          <p className='text-sm md:text 2xl:text-base text-custom-black-custom-300 2xl:leading-[25px] line-clamp-3' style={{"wordBreak": "break-word"}}>{summary ? summary : body}</p>
+          <p className='text-sm md:text 2xl:text-base text-custom-black-custom-300 dark:text-black 2xl:leading-[25px] line-clamp-3' style={{"wordBreak": "break-word"}}>{summary ? summary : body}</p>
         </section>
       ) : null}
     </div>