Updated codeblock styling documentation with new theme options

code.mdx

@@ -13,7 +13,7 @@
 To denote a `word` or `phrase` as code, enclose it in backticks (\`).
 
 ```mdx
 To denote a `word` or `phrase` as code, enclose it in backticks (`).
 ```
 
 ### Code blocks
@@ -57,8 +57,10 @@
 
 Enable syntax highlighting by specifying the programming language after the opening backticks of a code block.
 
 We use [Shiki](https://shiki.style/) for syntax highlighting and support all available languages. See the full list of [languages](https://shiki.style/languages) in Shiki's documentation.
 
+Customize code block themes globally using `styling.codeblocks` in your `docs.json` file. Set simple themes like `system` or `dark`, or configure custom [Shiki themes](https://shiki.style/themes) for light and dark modes. See [Settings](/settings#styling) for detailed configuration options.
+
 ```java
 class HelloWorld {
     public static void main(String[] args) {
@@ -105,7 +107,7 @@
 ```
 ````
 
 ### Line Highlighting
 
 Highlight specific lines in your code blocks using `highlight` with the line numbers or ranges you want to highlight.
 
@@ -302,12 +304,12 @@
 
 ### Diff
 
 Show a visual diff of added or removed lines in your code blocks. Added lines are highlighted in green and removed lines are highlighted in red.
 
 To create diffs, add these special comments at the end of lines in your code block:
 
 - `// [!code ++]`: Mark a line as added (green highlight).
 - `// [!code --]`: Mark a line as removed (red highlight).
 
 For multiple consecutive lines, specify the number of lines after a colon:
 

components/code-groups.mdx

@@ -26,6 +26,8 @@ class HelloWorld {
 
 </CodeGroup>
 
+Code groups inherit global styling from your `docs.json` file. Customize your theme using `styling.codeblocks`. See [Settings](/settings#styling) for configuration options.
+
 ## Creating code groups
 
 To create a code group, wrap multiple code blocks with `<CodeGroup>` tags. Each code block must include a title, which becomes the tab label.

settings.mdx

@@ -20,8 +20,8 @@
 ```json
 {
   "$schema": "https://mintlify.com/docs.json",
   "theme": "mint",
   "name": "Your Docs",
   "colors": {
     "primary": "#ff0000"
   },
@@ -127,8 +127,52 @@
     <ResponseField name="eyebrows" type="&quot;section&quot; | &quot;breadcrumbs&quot;">
       The style of the page eyebrow. Choose `section` to show the section name or `breadcrumbs` to show the full navigation path. Defaults to `section`.
     </ResponseField>
-    <ResponseField name="codeblocks" type="&quot;system&quot; | &quot;dark&quot;">
-      The theme of the code blocks. Choose `system` to match the site theme or `dark` for always dark code blocks. Defaults to `system`.
+    <ResponseField name="codeblocks" type="&quot;system&quot; | &quot;dark&quot; | object">
+      Code block theme configuration. Defaults to `"system"`.
+
+      **Simple options:**
+      - `"system"`: Match current site mode (light or dark)
+      - `"dark"`: Always use dark mode
+
+      **Custom theme configuration:**
+      Use an object to specify [Shiki themes](https://shiki.style/themes). Choose a single theme for both modes or separate themes for light and dark.
+
+      <Expandable title="codeblocks">
+      <ResponseField name="theme" type="string">
+        A single Shiki theme name to use for both light and dark modes.
+
+        ```json
+        "styling": {
+          "codeblocks": {
+            "theme": "dracula"
+          }
+        }
+        ```
+      </ResponseField>
+
+      <ResponseField name="themes" type="object">
+        Separate themes for light and dark modes.
+
+        <Expandable title="themes">
+        <ResponseField name="light" type="string" required>
+          A Shiki theme name for light mode.
+        </ResponseField>
+        <ResponseField name="dark" type="string" required>
+          A Shiki theme name for dark mode.
+        </ResponseField>
+        ```json
+        "styling": {
+          "codeblocks": {
+            "themes": {
+              "light": "github-light",
+              "dark": "github-dark"
+            }
+          }
+        }
+        ```
+        </Expandable>
+      </ResponseField>
+      </Expandable>
     </ResponseField>
   </Expandable>
 </ResponseField>
@@ -1449,7 +1493,7 @@
 
 </CodeGroup>
 
 If you already have the CLI installed, make sure it is up to date:
 
 ```bash
 mint update
@@ -1463,7 +1507,7 @@
 mint upgrade
 ```
 
 This command will create a `docs.json` file from your existing `mint.json`. Review the generated file to ensure all settings are correct.
 </Step>
 <Step title="Delete your mint.json file">
 After verifying your `docs.json` is configured properly, you can safely delete your old `mint.json` file.