From 1759c4ffba2386d5b90ed90f0a9a058ba03b34a5 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Thu, 25 Jul 2024 14:18:17 +0200
Subject: [PATCH] refactor: :lipstick: Change code block theme to Dark Plus

---
 components/Code.tsx |  2 +-
 mdx/rehype.mjs      | 15 +++++----------
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/components/Code.tsx b/components/Code.tsx
index d11abe2..2bfbef0 100644
--- a/components/Code.tsx
+++ b/components/Code.tsx
@@ -162,7 +162,7 @@ function CodePanel({
         <div className="group dark:bg-white/2.5">
             <CodePanelHeader tag={tag} label={label} />
             <div className="relative">
-                <pre className="overflow-x-auto p-4 text-xs text-white">
+                <pre className="overflow-x-auto p-4 text-xs text-white [&>code>pre]:!bg-transparent">
                     {children}
                 </pre>
                 <CopyButton code={code} />
diff --git a/mdx/rehype.mjs b/mdx/rehype.mjs
index 273b1ae..87c7c52 100644
--- a/mdx/rehype.mjs
+++ b/mdx/rehype.mjs
@@ -7,7 +7,7 @@ import { slugifyWithCounter } from "@sindresorhus/slugify";
 import * as acorn from "acorn";
 import { toString as mdastToString } from "mdast-util-to-string";
 import { mdxAnnotations } from "mdx-annotations";
-import { createCssVariablesTheme, createHighlighter } from "shiki";
+import { createHighlighter } from "shiki";
 import { visit } from "unist-util-visit";
 
 function rehypeParseCodeBlocks() {
@@ -22,13 +22,6 @@ function rehypeParseCodeBlocks() {
     };
 }
 
-const myTheme = createCssVariablesTheme({
-    name: "css-variables",
-    variablePrefix: "--shiki-",
-    variableDefaults: {},
-    fontStyle: true,
-});
-
 const highlighter = await createHighlighter({
     langs: [
         "typescript",
@@ -42,9 +35,11 @@ const highlighter = await createHighlighter({
         "php",
         "python",
     ],
-    themes: [myTheme],
+    themes: [],
 });
 
+highlighter.loadTheme("dark-plus");
+
 function rehypeShiki() {
     return async (tree) => {
         visit(tree, "element", (node) => {
@@ -60,7 +55,7 @@ function rehypeShiki() {
                 if (node.properties.language) {
                     const html = highlighter.codeToHtml(textNode.value, {
                         lang: node.properties.language,
-                        theme: myTheme,
+                        theme: "dark-plus",
                         transformers: [
                             transformerNotationFocus(),
                             transformerNotationHighlight(),