Skip to content

Fix dark theme in cookbook #121

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
lukasbindreiter merged 1 commit into from
Jun 22, 2026
Merged

Fix dark theme in cookbook #121

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
16 changes: 8 additions & 8 deletions guides/cookbook.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,30 +192,30 @@ export const cookbookSections = [
export const GuideCard = ({ guide }) => (
<a
href={guide.href}
className="group flex h-full flex-col border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 p-6 transition hover:border-gray-300 dark:hover:border-gray-700 hover:shadow-sm"
className="group flex h-full flex-col border border-gray-200 dark:border-[#3a3a3a] bg-white dark:bg-[#171717] p-6 transition hover:border-gray-300 dark:hover:border-[#525252] hover:shadow-sm"
>
<div className="flex items-start justify-between gap-4">
<div className="flex h-10 w-10 items-center justify-center border border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900 text-primary dark:text-primary-light">
<div className="flex h-10 w-10 items-center justify-center border border-gray-200 dark:border-[#3a3a3a] bg-gray-50 dark:bg-[#262626] text-primary dark:text-primary-light">
<Icon icon={guide.icon} />
</div>
<div className="flex flex-wrap justify-end gap-2 text-xs font-medium">
<span className="border border-gray-200 dark:border-gray-800 px-2 py-1 text-gray-600 dark:text-gray-400">
<span className="border border-gray-200 dark:border-[#3a3a3a] px-2 py-1 text-gray-600 dark:text-gray-300">
{guide.level}
</span>
<span className="border border-gray-200 dark:border-gray-800 px-2 py-1 text-gray-600 dark:text-gray-400">
<span className="border border-gray-200 dark:border-[#3a3a3a] px-2 py-1 text-gray-600 dark:text-gray-300">
{guide.time}
</span>
</div>
</div>
<h3 className="mt-5 text-lg font-semibold tracking-tight text-gray-950 dark:text-white group-hover:text-primary dark:group-hover:text-primary-light">
{guide.title}
</h3>
<p className="mt-3 text-sm leading-6 text-gray-600 dark:text-gray-400">
<p className="mt-3 text-sm leading-6 text-gray-600 dark:text-gray-300">
{guide.description}
</p>
<div className="mt-5 flex flex-wrap gap-2">
{guide.tags.map((tag) => (
<span key={tag} className="bg-gray-100 dark:bg-gray-900 px-2 py-1 text-xs text-gray-600 dark:text-gray-400">
<span key={tag} className="bg-gray-100 dark:bg-[#262626] px-2 py-1 text-xs text-gray-600 dark:text-gray-300">
{tag}
</span>
))}
Expand All @@ -231,7 +231,7 @@ export const GuideSection = ({ section }) => (
{section.category}
</p>
</div>
<p className="max-w-2xl text-sm leading-6 text-gray-600 dark:text-gray-400">
<p className="max-w-2xl text-sm leading-6 text-gray-600 dark:text-gray-300">
{section.description}
</p>
</div>
Expand All @@ -251,7 +251,7 @@ export const GuideSection = ({ section }) => (
<h1 className="mt-4 text-4xl font-semibold tracking-tight text-gray-950 dark:text-white lg:text-6xl">
Tilebox Cookbook
</h1>
<p className="mt-6 max-w-3xl text-lg leading-8 text-gray-600 dark:text-gray-400">
<p className="mt-6 max-w-3xl text-lg leading-8 text-gray-600 dark:text-gray-300">
Recipes for going from question to running system: query satellite catalogs, ingest your own data, ship workflows, and debug what happened.
</p>
<div className="mt-8 grid gap-3 sm:grid-cols-3">
Expand Down
Loading