From 8986eb925a6df7290681626e1b33f61d2fc6f2ef Mon Sep 17 00:00:00 2001
From: Ratnadeep <55341578+Ratnadeep2k@users.noreply.github.com>
Date: Thu, 1 Aug 2024 00:42:49 +0530
Subject: [PATCH] fix: add rehype-pretty-code dark mode support #930 (#973)

* fix Styling issue with copy to clipboard button on single code lines [CSS] #947

* make right-2 #947

* refactor: add rehype-pretty-code dark mode support #930

* ci: apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 apps/web/src/components/content/pre.tsx          | 3 +--
 apps/web/src/contentlayer/plugins/pretty-code.ts | 5 ++++-
 2 files changed, 5 insertions(+), 3 deletions(-)

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
-- 
2.51.2