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

···
 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) {
···
   };
 
   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"

apps/web/src/contentlayer/plugins/pretty-code.ts

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