feat: update code blocks colors

Author: shadcn

components/docs/mdx.tsx

@@ -144,7 +144,7 @@ const components = {
   pre: ({ className, ...props }) => (
     <pre
       className={cn(
-        "mt-6 mb-4 overflow-x-auto rounded-lg bg-slate-50 py-4",
+        "mt-6 mb-4 overflow-x-auto rounded-lg bg-slate-900 py-4",
         className
       )}
       {...props}

content/blog/deploying-next-apps.mdx

@@ -68,7 +68,12 @@ Something a wise person once told me about typography is:
 
 It's probably important that images look okay here by default as well:
 
-![](/images/blog/blog-post-4.jpg)
+<Image
+  src="/images/blog/blog-post-4.jpg"
+  width="718"
+  height="404"
+  alt="Image"
+/>
 
 Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
 

content/blog/dynamic-routing-static-regeneration.mdx

@@ -68,7 +68,12 @@ Something a wise person once told me about typography is:
 
 It's probably important that images look okay here by default as well:
 
-![](/images/blog/blog-post-4.jpg)
+<Image
+  src="/images/blog/blog-post-4.jpg"
+  width="718"
+  height="404"
+  alt="Image"
+/>
 
 Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
 

content/blog/preview-mode-headless-cms.mdx

@@ -68,7 +68,12 @@ Something a wise person once told me about typography is:
 
 It's probably important that images look okay here by default as well:
 
-![](/images/blog/blog-post-4.jpg)
+<Image
+  src="/images/blog/blog-post-4.jpg"
+  width="718"
+  height="404"
+  alt="Image"
+/>
 
 Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
 

content/blog/server-client-components.mdx

@@ -68,7 +68,12 @@ Something a wise person once told me about typography is:
 
 It's probably important that images look okay here by default as well:
 
-![](/images/blog/blog-post-4.jpg)
+<Image
+  src="/images/blog/blog-post-4.jpg"
+  width="718"
+  height="404"
+  alt="Image"
+/>
 
 Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
 

content/docs/documentation/style-guide.mdx

@@ -65,7 +65,12 @@ Something a wise person once told me about typography is:
 
 It's probably important that images look okay here by default as well:
 
-![](/images/blog/blog-post-4.jpg)
+<Image
+  src="/images/blog/blog-post-4.jpg"
+  width="718"
+  height="404"
+  alt="Image"
+/>
 
 Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
 

content/guides/build-blog-using-contentlayer-mdx.mdx

@@ -71,7 +71,12 @@ Something a wise person once told me about typography is:
 
 It's probably important that images look okay here by default as well:
 
-![](/images/blog/blog-post-4.jpg)
+<Image
+  src="/images/blog/blog-post-4.jpg"
+  width="718"
+  height="404"
+  alt="Image"
+/>
 
 Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
 

content/guides/using-next-auth-next-13.mdx

@@ -71,7 +71,12 @@ Something a wise person once told me about typography is:
 
 It's probably important that images look okay here by default as well:
 
-![](/images/blog/blog-post-4.jpg)
+<Image
+  src="/images/blog/blog-post-4.jpg"
+  width="718"
+  height="404"
+  alt="Image"
+/>
 
 Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
 

contentlayer.config.js

@@ -151,7 +151,7 @@ export default makeSource({
       [
         rehypePrettyCode,
         {
-          theme: "css-variables",
+          theme: "github-dark",
           onVisitLine(node) {
             // Prevent lines from collapsing in `display: grid` mode, and allow empty
             // lines to be copy/pasted

styles/mdx.css

@@ -1,19 +1,3 @@
-:root {
-  --shiki-color-text: #414141;
-  --shiki-color-background: transparent;
-  --shiki-token-constant: #114b84;
-  --shiki-token-string: #0e7226;
-  --shiki-token-comment: #aaa;
-  --shiki-token-keyword: #d32f2f;
-  --shiki-token-parameter: #ff9800;
-  --shiki-token-function: #6f42c1;
-  --shiki-token-string-expression: #0e7226;
-  --shiki-token-punctuation: #212121;
-  --shiki-token-link: #0e7226;
-  --nextra-shiki-deleted: #f00;
-  --nextra-shiki-inserted: #0e7226;
-}
-
 [data-rehype-pretty-code-fragment] code {
   @apply grid min-w-full break-words rounded-none border-0 bg-transparent p-0 text-sm text-black;
   counter-reset: line;
@@ -32,13 +16,13 @@
   color: gray;
 }
 [data-rehype-pretty-code-fragment] .line--highlighted {
-  @apply bg-slate-500 bg-opacity-10;
+  @apply bg-slate-300 bg-opacity-10;
 }
 [data-rehype-pretty-code-fragment] .line-highlighted span {
   @apply relative;
 }
 [data-rehype-pretty-code-fragment] .word--highlighted {
-  @apply rounded-md bg-slate-500 bg-opacity-10 p-1;
+  @apply rounded-md bg-slate-300 bg-opacity-10 p-1;
 }
 [data-rehype-pretty-code-title] {
   @apply mt-4 py-2 px-4 text-sm font-medium;