diff --git a/apps/web/src/components/content/pre.tsx b/apps/web/src/components/content/pre.tsx
index ff049fff..a0ff9e4b 100644
--- a/apps/web/src/components/content/pre.tsx
+++ b/apps/web/src/components/content/pre.tsx
@@ -3,7 +3,6 @@
 import { Button } from "@openstatus/ui/src/components/button";
 import { Clipboard, ClipboardCopy } from "lucide-react";
 import React from "react";
-
 export interface PreProps extends React.HTMLAttributes<HTMLPreElement> {}
 
 export default function Pre({ children, ...props }: PreProps) {
@@ -31,7 +30,7 @@ export default function Pre({ children, ...props }: PreProps) {
   };
 
   return (
-    <div className="relative overflow-hidden">
+    <div className="relative hidden overflow-hidden dark:[&:has([data-theme='dark'])]:block [&:has([data-theme='light'])]:block dark:[&:has([data-theme='light'])]:hidden">
       <Button
         variant="outline"
         size="icon"
diff --git a/apps/web/src/contentlayer/plugins/pretty-code.ts b/apps/web/src/contentlayer/plugins/pretty-code.ts
index 3508580e..f096fc5b 100644
--- a/apps/web/src/contentlayer/plugins/pretty-code.ts
+++ b/apps/web/src/contentlayer/plugins/pretty-code.ts
@@ -7,7 +7,10 @@ import type * as unified from "unified";
 const prettyCode: unified.Pluggable<any[]> = [
   rehypePrettyCode,
   {
-    theme: "github-light",
+    theme: {
+      dark: "github-dark-dimmed",
+      light: "github-light",
+    },
     // biome-ignore lint/suspicious/noExplicitAny: <explanation>
     onVisitLine(node: any) {
       // Prevent lines from collapsing in `display: grid` mode, and