refactor: 💄 Change code block theme to Dark Plus

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} />

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(),