Skip to content

chore: handle light mode on custom pages #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
geofmureithi merged 2 commits into from
Apr 11, 2026
Merged

chore: handle light mode on custom pages #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4543ce9
chore: handle light mode on custom pages
geofmureithi Apr 11, 2026
f12884c
chore: fix appearance in code
geofmureithi Apr 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
26 changes: 13 additions & 13 deletions app/pricing/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -108,15 +108,15 @@ 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) => (
<tr
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">
Expand All @@ -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">
Expand All @@ -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">
Expand All @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion components/layout/navigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
: ""
Expand Down
16 changes: 8 additions & 8 deletions components/sections/pricing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)]" : ""}`}
Expand Down Expand Up @@ -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 && (
Expand All @@ -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
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
7 changes: 6 additions & 1 deletion contentlayer.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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],
Expand Down
33 changes: 15 additions & 18 deletions styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,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,
Expand All @@ -142,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;
}

Expand Down Expand Up @@ -246,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;
Expand Down Expand Up @@ -319,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 {
Expand Down
Loading