From be4dc0a85ac5d8cf04240a95f427c1970480109e Mon Sep 17 00:00:00 2001
From: Lukas Bindreiter <lukas.bindreiter@tilebox.com>
Date: Mon, 22 Jun 2026 11:53:11 +0200
Subject: [PATCH] Fix dark theme in cookbook

---
 guides/cookbook.mdx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/guides/cookbook.mdx b/guides/cookbook.mdx
index d7a075a..dd085ee 100644
--- a/guides/cookbook.mdx
+++ b/guides/cookbook.mdx
@@ -192,17 +192,17 @@ 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>
@@ -210,12 +210,12 @@ export const GuideCard = ({ guide }) => (
     <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>
       ))}
@@ -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>
@@ -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">