From 4543ce9ea411610a8ae298deb65dac0ebc4432e7 Mon Sep 17 00:00:00 2001
From: geofmureithi <mureithinjuguna@gmail.com>
Date: Sat, 11 Apr 2026 13:12:06 +0300
Subject: [PATCH 1/2] chore: handle light mode on custom pages

---
 app/layout.tsx                   |  2 +-
 app/pricing/page.tsx             | 26 +++++++++++++-------------
 components/layout/navigation.tsx |  2 +-
 components/sections/pricing.tsx  | 16 ++++++++--------
 styles/globals.css               |  1 +
 5 files changed, 24 insertions(+), 23 deletions(-)
diff --git a/app/layout.tsx b/app/layout.tsx
index b2aa725..bc5fde5 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -48,7 +48,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html
       lang="en"
-      className={`relative ${inter.variable} ${calSans.variable}`}
+      className={`relative ${inter.variable} ${calSans.variable} dark`}
       suppressHydrationWarning
     >
       <meta name="algolia-site-verification"  content="2C97CAF9558A3A92" />
diff --git a/app/pricing/page.tsx b/app/pricing/page.tsx
index 86f5e6f..d010f83 100644
--- a/app/pricing/page.tsx
+++ b/app/pricing/page.tsx
@@ -77,10 +77,10 @@ export default function Pro() {
     <section className="w-full px-5 py-12 md:py-20 flex flex-col justify-center items-center">
       <div className="w-full flex flex-col justify-center items-center gap-12 p-2">
         <div className="flex flex-col justify-center items-center gap-2">
-          <h2 id='detailed-comparison' className="text-center text-foreground text-4xl md:text-5xl font-semibold leading-tight">
+          <h2 id='detailed-comparison' className="text-center dark:text-foreground text-4xl md:text-5xl font-semibold leading-tight">
             Detailed Feature Comparison
           </h2>
-          <p className="text-center text-muted-foreground text-sm md:text-base font-medium leading-relaxed">
+          <p className="text-center dark:text-muted-foreground text-sm md:text-base font-medium leading-relaxed">
             See exactly what's included in each plan
           </p>
         </div>
@@ -108,7 +108,7 @@ export default function Pro() {
                 <Fragment key={section.category}>
                   <tr >
                     <td colSpan={4} className="px-6 py-4 bg-accent/5 border-b border-border">
-                      <h3 className="text-sm font-semibold text-foreground">{section.category}</h3>
+                      <h3 className="text-sm font-semibold dark:text-foreground">{section.category}</h3>
                     </td>
                   </tr>
                   {section.features.map((feature, idx) => (
@@ -116,7 +116,7 @@ export default function Pro() {
                       key={feature.name}
                       className="border-b border-border hover:bg-muted/20 transition-colors"
                     >
-                      <td className="px-6 py-4 text-sm text-foreground font-medium">
+                      <td className="px-6 py-4 text-sm dark:text-foreground font-medium">
                         {feature.name}
                       </td>
                       <td className="px-6 py-4 text-center">
@@ -128,10 +128,10 @@ export default function Pro() {
                               </div>
                             </div>
                           ) : (
-                            <span className="text-muted-foreground text-sm">—</span>
+                            <span className="dark:text-muted-foreground text-sm">—</span>
                           )
                         ) : (
-                          <span className="text-sm text-foreground font-medium">{feature.free}</span>
+                          <span className="text-sm dark:text-foreground font-medium">{feature.free}</span>
                         )}
                       </td>
                       <td className="px-6 py-4 text-center">
@@ -143,10 +143,10 @@ export default function Pro() {
                               </div>
                             </div>
                           ) : (
-                            <span className="text-muted-foreground text-sm">—</span>
+                            <span className="dark:text-muted-foreground text-sm">—</span>
                           )
                         ) : (
-                          <span className="text-sm text-foreground font-medium">{feature.pro}</span>
+                          <span className="text-sm dark:text-foreground font-medium">{feature.pro}</span>
                         )}
                       </td>
                       <td className="px-6 py-4 text-center">
@@ -158,10 +158,10 @@ export default function Pro() {
                               </div>
                             </div>
                           ) : (
-                            <span className="text-muted-foreground text-sm">—</span>
+                            <span className="dark:text-muted-foreground text-sm">—</span>
                           )
                         ) : (
-                          <span className="text-sm text-foreground font-medium">{feature.ultra}</span>
+                          <span className="text-sm dark:text-foreground font-medium">{feature.ultra}</span>
                         )}
                       </td>
                     </tr>
@@ -179,15 +179,15 @@ export default function Pro() {
     <section className="w-full px-5 py-12 md:py-20 flex flex-col justify-center items-center">
       <div className="max-w-2xl w-full flex flex-col justify-center items-center gap-8 p-8 md:p-12 rounded-lg bg-gradient-to-br from-accent/10 to-accent/5 border border-accent/20">
         <div className="flex flex-col justify-center items-center gap-3">
-          <h2 className="text-center text-foreground text-3xl md:text-4xl font-semibold">
+          <h2 className="text-center dark:text-foreground text-3xl md:text-4xl font-semibold">
             Ready to get started?
           </h2>
-          <p className="text-center text-muted-foreground text-base md:text-lg">
+          <p className="text-center dark:text-muted-foreground text-base md:text-lg">
             Choose your plan and start building today. Upgrade or downgrade anytime.
           </p>
         </div>
         <div className="flex flex-col sm:flex-row gap-3 w-full">
-          <a href='mailto:sales@apalis.dev' className="mx-auto px-6 py-3 rounded-md border border-border text-foreground font-semibold hover:bg-muted transition-colors">
+          <a href='mailto:sales@apalis.dev' className="mx-auto px-6 py-3 rounded-md border border-border dark:text-foreground font-semibold dark:hover:bg-muted transition-colors">
             Talk to Sales
           </a>
         </div>
diff --git a/components/layout/navigation.tsx b/components/layout/navigation.tsx
index 181da4a..b7431ba 100644
--- a/components/layout/navigation.tsx
+++ b/components/layout/navigation.tsx
@@ -103,7 +103,7 @@ function NavigationLink({ name, href, reload }: NavigationLink) {
   return (
     <Component
       href={href}
-      className={`h-8 cursor-pointer flex border bg-black border-[#333333] hover:border-white/50 transition duration-300 ease-in-out rounded items-center px-3 text-[13px] justify-center ${
+      className={`h-8 cursor-pointer flex border dark:bg-black border-[#333333] hover:border-white/50 transition duration-300 ease-in-out rounded items-center px-3 text-[13px] justify-center ${
         pathname?.startsWith(href)
           ? "text-black font-normal dark:text-white dark:font-light"
           : ""
diff --git a/components/sections/pricing.tsx b/components/sections/pricing.tsx
index 3c039bd..a7216b1 100644
--- a/components/sections/pricing.tsx
+++ b/components/sections/pricing.tsx
@@ -71,16 +71,16 @@ export function PricingSection() {
         <section className="w-full px-5 overflow-hidden flex flex-col justify-start items-center my-0 py-8 md:py-14">
             <div className="self-stretch relative flex flex-col justify-center items-center gap-2 py-0">
                 <div className="flex flex-col justify-start items-center gap-4">
-                    <h2 className="text-center text-foreground text-4xl md:text-5xl font-semibold leading-tight md:leading-[40px]">
+                    <h2 className="text-center dark:text-foreground text-4xl md:text-5xl font-semibold leading-tight md:leading-[40px]">
                         Pricing built for every developer
                     </h2>
-                    <p className="self-stretch text-center text-muted-foreground text-sm font-medium leading-tight">
+                    <p className="self-stretch text-center dark:text-muted-foreground text-sm font-medium leading-tight">
                         Choose a plan that fits your background processing requirements, from individuals starting out to <br /> growing professionals
                         and large organizations.
                     </p>
                 </div>
                 <div className="pt-4">
-                    <div className="p-0.5 bg-muted rounded-md outline outline-1 outline-[#0307120a] outline-offset-[-1px] flex justify-start items-center gap-1 md:mt-0">
+                    <div className="p-0.5 dark:bg-muted rounded-md outline outline-1 outline-[#0307120a] outline-offset-[-1px] flex justify-start items-center gap-1 md:mt-0">
                         <button
                             onClick={() => setIsAnnual(true)}
                             className={`pl-2 pr-1 py-1 flex justify-start items-start gap-2 rounded-md ${isAnnual ? "bg-accent shadow-[0px_1px_1px_-0.5px_rgba(0,0,0,0.08)]" : ""}`}
@@ -114,7 +114,7 @@ export function PricingSection() {
                         <div className="self-stretch flex flex-col justify-start items-start gap-6">
                             <div className="self-stretch flex flex-col justify-start items-start gap-8">
                                 <div
-                                    className={`w-full h-5 text-sm font-medium leading-tight ${plan.popular ? "text-primary-foreground" : "text-zinc-200"}`}
+                                    className={`w-full h-5 text-sm font-medium leading-tight ${plan.popular ? "dark:text-primary-foreground" : "dark:text-zinc-200"}`}
                                 >
                                     {plan.name}
                                     {plan.popular && (
@@ -128,7 +128,7 @@ export function PricingSection() {
                                 <div className="self-stretch flex flex-col justify-start items-start gap-1">
                                     <div className="flex justify-start items-center gap-1.5">
                                         <div
-                                            className={`relative h-10 flex items-center text-3xl font-medium leading-10 ${plan.popular ? "text-primary-foreground" : "text-zinc-50"}`}
+                                            className={`relative h-10 flex items-center text-3xl font-medium leading-10 ${plan.popular ? "dark:text-primary-foreground" : "dark:text-zinc-50"}`}
                                         >
                                             <span className="invisible">{isAnnual ? plan.annualPrice : plan.monthlyPrice}</span>
                                             <span
@@ -171,7 +171,7 @@ export function PricingSection() {
                         </div>
                         <div className="self-stretch flex flex-col justify-start items-start gap-4">
                             <div
-                                className={`self-stretch text-sm font-medium leading-tight ${plan.popular ? "text-primary-foreground/70" : "text-muted-foreground"}`}
+                                className={`self-stretch text-sm font-medium leading-tight ${plan.popular ? "dark:text-primary-foreground/70" : "dark:text-muted-foreground"}`}
                             >
                                 {plan.name === "Free" ? "Get Started today:" : "Everything in Free +"}
                             </div>
@@ -181,12 +181,12 @@ export function PricingSection() {
                                         <div className="w-4 h-4 flex items-center justify-center">
                                             <Icon
                                                 name="check"
-                                                className={`w-full h-full ${plan.popular ? "text-primary-foreground" : "text-muted-foreground"}`}
+                                                className={`w-full h-full ${plan.popular ? "dark:text-primary-foreground" : "dark:text-muted-foreground"}`}
                                                 strokeWidth={2}
                                             />
                                         </div>
                                         <div
-                                            className={`leading-tight font-normal text-sm text-left ${plan.popular ? "text-primary-foreground" : "text-muted-foreground"}`}
+                                            className={`leading-tight font-normal text-sm text-left ${plan.popular ? "dark:text-primary-foreground" : "dark:text-muted-foreground"}`}
                                         >
                                             {feature}
                                         </div>
diff --git a/styles/globals.css b/styles/globals.css
index 9861ecb..d052985 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -26,6 +26,7 @@
     --input: 210 15% 80%;
     --ring: 190 100% 50%;
     --radius: 0.4rem;
+    color-scheme: dark;
   }
 
   .dark {

From f12884caefacc21166af0bbd018507970ab48d0f Mon Sep 17 00:00:00 2001
From: geofmureithi <mureithinjuguna@gmail.com>
Date: Sat, 11 Apr 2026 13:56:31 +0300
Subject: [PATCH 2/2] chore: fix appearance in code

---
 contentlayer.config.ts |  7 ++++++-
 styles/globals.css     | 34 +++++++++++++++-------------------
 2 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/contentlayer.config.ts b/contentlayer.config.ts
index 43650ba..8957c43 100644
--- a/contentlayer.config.ts
+++ b/contentlayer.config.ts
@@ -75,7 +75,12 @@ export default makeSource({
 
       [
         rehypePrettyCode,
-        { ...DEFAULT_REHYPE_PRETTY_CODE_OPTIONS, theme: "github-dark" },
+        {
+          ...DEFAULT_REHYPE_PRETTY_CODE_OPTIONS, theme: {
+            light: "github-light",
+            dark: "github-dark"
+          },
+        },
       ] as any,
 
       [rehypeSlug],
diff --git a/styles/globals.css b/styles/globals.css
index d052985..c3b3032 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -26,7 +26,6 @@
     --input: 210 15% 80%;
     --ring: 190 100% 50%;
     --radius: 0.4rem;
-    color-scheme: dark;
   }
 
   .dark {
@@ -115,8 +114,8 @@ body.no-scroll {
 .toc code {
   @apply inline-block bg-zinc-100 dark:bg-white/10 border border-zinc-200 dark:border-white/10 px-1 rounded-sm font-normal leading-snug;
 }
-.prose code {
-  @apply text-zinc-800 dark:text-zinc-300;
+.prose pre.shiki code {
+  @apply text-zinc-300 dark:text-zinc-300;
 }
 .prose h1 code,
 .prose h2 code,
@@ -143,6 +142,10 @@ body.no-scroll {
   @apply px-4 text-[#C9D1DA];
 }
 .shiki code {
+  @apply py-4 px-0 min-w-full bg-gray-900 !important;
+}
+
+.dark .shiki code {
   @apply py-4 px-0 min-w-full bg-transparent !important;
 }
 
@@ -247,22 +250,11 @@ body.no-scroll {
   display: block;
 }
 
-.shiki.github-dark {
-  display: none;
-}
-
 pre.shiki div.highlight {
   opacity: 1;
   background-color: #cacad4;
 }
 
-.dark .shiki.github-light {
-  display: none;
-}
-
-.dark .shiki.github-dark {
-  display: block;
-}
 
 .dark pre.shiki div.highlight {
   opacity: 1;
@@ -320,22 +312,26 @@ pre.shiki span.line {
 
 pre.shiki .line::before {
   content: counter(line-number);
-  color: hsl(240 5.3% 26.1%);
   display: inline-block;
   margin-right: 0.5em;
   margin-left: 0.5em;
   width: 2em;
 }
 
+.dark pre.shiki .line::before  {
+  color: hsl(240 5.3% 26.1%);
+}
+
+pre.shiki .line::before  {
+  color: hsl(240, 4%, 64%);
+}
+
 pre.shiki code {
   border: 0;
   background: none;
 }
 
-/** Don't show the language identifiers */
-pre.shiki .language-id {
-  display: none;
-}
+
 
 
 .video-container {
