Updated codeblock styling documentation with new theme options (#1252)

* Update settings.mdx

* Update code.mdx

* Update components/code-groups.mdx

* Update settings.mdx

* Update code.mdx

* Update components/code-groups.mdx

* Update settings.mdx

* Update code.mdx

* Update components/code-groups.mdx

* copy edits

---------

Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com>
Co-authored-by: Ethan Palm <[email protected]>

Author: mintlify[bot]

code.mdx

@@ -59,6 +59,8 @@ Enable syntax highlighting by specifying the programming language after the open
 
 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) {

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

@@ -127,8 +127,52 @@ See [Themes](themes) for more information.
     <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>