diff --git a/packages/ui/app/src/api-page/examples/TitledExample.tsx b/packages/ui/app/src/api-page/examples/TitledExample.tsx
index b32fbd3435..1cae7c34d2 100644
--- a/packages/ui/app/src/api-page/examples/TitledExample.tsx
+++ b/packages/ui/app/src/api-page/examples/TitledExample.tsx
@@ -66,7 +66,7 @@ export const TitledExample: React.FC<TitledExample.Props> = ({
                     )}
                 >
                     <div
-                        className="bg-background-primary-dark flex-1 overflow-auto whitespace-pre py-4"
+                        className="bg-background-primary-light dark:bg-background-primary-dark flex-1 overflow-auto whitespace-pre py-4"
                         ref={setContentRef}
                     >
                         {typeof children === "function" ? children(contentRef ?? undefined) : children}
diff --git a/packages/ui/app/src/api-page/examples/curl-example/CurlExample.tsx b/packages/ui/app/src/api-page/examples/curl-example/CurlExample.tsx
index a3aac90cbc..84ecc902d7 100644
--- a/packages/ui/app/src/api-page/examples/curl-example/CurlExample.tsx
+++ b/packages/ui/app/src/api-page/examples/curl-example/CurlExample.tsx
@@ -148,7 +148,7 @@ export const CurlExample: React.FC<CurlExample.Props> = ({ endpoint, example, se
             }
         }
 
-        const curlElement = <span className="text-yellow-100">{CURL_PREFIX}</span>;
+        const curlElement = <span className="text-yellow-600 dark:text-yellow-100">{CURL_PREFIX}</span>;
         if (parts[0]?.type === "line") {
             parts[0] = {
                 ...parts[0],
diff --git a/packages/ui/app/src/api-page/examples/curl-example/CurlExampleLine.tsx b/packages/ui/app/src/api-page/examples/curl-example/CurlExampleLine.tsx
index dd4c5b6bfe..e134d36c37 100644
--- a/packages/ui/app/src/api-page/examples/curl-example/CurlExampleLine.tsx
+++ b/packages/ui/app/src/api-page/examples/curl-example/CurlExampleLine.tsx
@@ -17,7 +17,9 @@ export const CurlExampleLine: React.FC<CurlExampleLine.Props> = ({ part, indentI
         <JsonExampleLine>
             {" ".repeat(excludeIndent ? 0 : indentInSpaces)}
             {part.value}
-            {!excludeTrailingBackslash && !isLastPart && <span className="text-text-primary-dark">{" \\"}</span>}
+            {!excludeTrailingBackslash && !isLastPart && (
+                <span className="text-text-primary-light dark:text-text-primary-dark">{" \\"}</span>
+            )}
         </JsonExampleLine>
     );
 };
diff --git a/packages/ui/app/src/api-page/examples/curl-example/CurlParameter.tsx b/packages/ui/app/src/api-page/examples/curl-example/CurlParameter.tsx
index 5733183f67..1258cbccd5 100644
--- a/packages/ui/app/src/api-page/examples/curl-example/CurlParameter.tsx
+++ b/packages/ui/app/src/api-page/examples/curl-example/CurlParameter.tsx
@@ -11,12 +11,12 @@ export declare namespace CurlParameter {
 export const CurlParameter: React.FC<CurlParameter.Props> = ({ paramKey, value, doNotStringifyValue = false }) => {
     return (
         <>
-            <span className="text-text-primary-dark">{paramKey}</span>
+            <span className="text-text-primary-light dark:text-text-primary-dark">{paramKey}</span>
             {value != null && (
                 <>
                     {" "}
                     {doNotStringifyValue ? (
-                        <span className="text-text-primary-dark">{value}</span>
+                        <span className="text-text-primary-light dark:text-text-primary-dark">{value}</span>
                     ) : (
                         <JsonExampleString value={value} />
                     )}
diff --git a/packages/ui/app/src/api-page/examples/json-example/JsonExampleString.tsx b/packages/ui/app/src/api-page/examples/json-example/JsonExampleString.tsx
index fc3508a913..d8e7eb96a5 100644
--- a/packages/ui/app/src/api-page/examples/json-example/JsonExampleString.tsx
+++ b/packages/ui/app/src/api-page/examples/json-example/JsonExampleString.tsx
@@ -6,5 +6,5 @@ export declare namespace JsonExampleString {
 }
 
 export const JsonExampleString: React.FC<JsonExampleString.Props> = ({ value, doNotAddQuotes = false }) => {
-    return <span className="text-[#94d199]">{doNotAddQuotes ? value : `"${value}"`}</span>;
+    return <span className="text-green-600 dark:text-green-300">{doNotAddQuotes ? value : `"${value}"`}</span>;
 };
diff --git a/packages/ui/app/src/api-page/examples/json-example/JsonItemBottomLine.tsx b/packages/ui/app/src/api-page/examples/json-example/JsonItemBottomLine.tsx
index 0fada91500..6b3759a9e6 100644
--- a/packages/ui/app/src/api-page/examples/json-example/JsonItemBottomLine.tsx
+++ b/packages/ui/app/src/api-page/examples/json-example/JsonItemBottomLine.tsx
@@ -11,8 +11,14 @@ export declare namespace JsonItemBottomLine {
 
 export const JsonItemBottomLine: React.FC<JsonItemBottomLine.Props> = ({ value, isNonLastItemInCollection }) => {
     const element = visitJsonItem(value, {
-        object: (object) => (size(object) === 0 ? undefined : <span className="text-text-primary-dark">{"}"}</span>),
-        list: (list) => (list.length === 0 ? undefined : <span className="text-text-primary-dark">{"]"}</span>),
+        object: (object) =>
+            size(object) === 0 ? undefined : (
+                <span className="text-text-primary-light dark:text-text-primary-dark">{"}"}</span>
+            ),
+        list: (list) =>
+            list.length === 0 ? undefined : (
+                <span className="text-text-primary-light dark:text-text-primary-dark">{"]"}</span>
+            ),
         string: () => undefined,
         number: () => undefined,
         boolean: () => undefined,
diff --git a/packages/ui/app/src/api-page/examples/json-example/JsonItemTopLineContent.tsx b/packages/ui/app/src/api-page/examples/json-example/JsonItemTopLineContent.tsx
index e8c35f0e63..d46926220c 100644
--- a/packages/ui/app/src/api-page/examples/json-example/JsonItemTopLineContent.tsx
+++ b/packages/ui/app/src/api-page/examples/json-example/JsonItemTopLineContent.tsx
@@ -20,21 +20,29 @@ export const JsonItemTopLineContent: React.FC<JsonItemTopLineContent.Props> = ({
                 object: (object) =>
                     size(object) > 0
                         ? {
-                              content: <span className="text-text-primary-dark">{"{"}</span>,
+                              content: (
+                                  <span className="text-text-primary-light dark:text-text-primary-dark">{"{"}</span>
+                              ),
                               isEndOfElement: false,
                           }
                         : {
-                              content: <span className="text-text-primary-dark">{"{}"}</span>,
+                              content: (
+                                  <span className="text-text-primary-light dark:text-text-primary-dark">{"{}"}</span>
+                              ),
                               isEndOfElement: true,
                           },
                 list: (list) =>
                     list.length > 0
                         ? {
-                              content: <span className="text-text-primary-dark">{"["}</span>,
+                              content: (
+                                  <span className="text-text-primary-light dark:text-text-primary-dark">{"["}</span>
+                              ),
                               isEndOfElement: false,
                           }
                         : {
-                              content: <span className="text-text-primary-dark">{"[]"}</span>,
+                              content: (
+                                  <span className="text-text-primary-light dark:text-text-primary-dark">{"[]"}</span>
+                              ),
                               isEndOfElement: true,
                           },
                 string: (value) => ({
@@ -54,7 +62,9 @@ export const JsonItemTopLineContent: React.FC<JsonItemTopLineContent.Props> = ({
     return (
         <span className="whitespace-nowrap">
             {content}
-            {isNonLastItemInCollection && isEndOfElement && <span className="text-text-primary-dark">,</span>}
+            {isNonLastItemInCollection && isEndOfElement && (
+                <span className="text-text-primary-light dark:text-text-primary-dark">,</span>
+            )}
         </span>
     );
 };
diff --git a/packages/ui/app/src/api-page/examples/json-example/JsonObjectProperty.tsx b/packages/ui/app/src/api-page/examples/json-example/JsonObjectProperty.tsx
index cd52b8dfd1..9b8ba725ef 100644
--- a/packages/ui/app/src/api-page/examples/json-example/JsonObjectProperty.tsx
+++ b/packages/ui/app/src/api-page/examples/json-example/JsonObjectProperty.tsx
@@ -83,7 +83,7 @@ export const JsonObjectProperty: React.FC<JsonObjectProperty> = ({
     return (
         <JsonPropertySelectionContext.Provider value={propertySelectionContextValue}>
             <JsonExampleLine ref={topLineRef}>
-                <span className="text-text-primary-dark">
+                <span className="text-text-primary-light dark:text-text-primary-dark">
                     &quot;{propertyKey}&quot;{": "}
                 </span>
                 <JsonItemTopLineContent value={propertyValue} isNonLastItemInCollection={!isLastProperty} />
diff --git a/packages/ui/app/src/docs/Docs.tsx b/packages/ui/app/src/docs/Docs.tsx
index ede37d1993..09b59d3f0a 100644
--- a/packages/ui/app/src/docs/Docs.tsx
+++ b/packages/ui/app/src/docs/Docs.tsx
@@ -47,7 +47,7 @@ export const Docs: React.FC = memo(function UnmemoizedDocs() {
             />
             <div className="relative flex min-h-0 flex-1 flex-col">
                 {searchService.isAvailable && <SearchDialog isOpen={isSearchDialogOpen} onClose={closeSearchDialog} />}
-                <div className="border-border-default-light dark:border-border-default-dark sticky inset-x-0 top-0 z-20 h-16 border-b backdrop-blur-xl">
+                <div className="border-border-default-light dark:border-border-default-dark bg-background/50 sticky inset-x-0 top-0 z-20 h-16 border-b backdrop-blur-xl">
                     <Header
                         className="max-w-8xl mx-auto"
                         docsDefinition={docsDefinition}
diff --git a/packages/ui/app/src/mdx/base-components.tsx b/packages/ui/app/src/mdx/base-components.tsx
index daab67381c..c9650172f6 100644
--- a/packages/ui/app/src/mdx/base-components.tsx
+++ b/packages/ui/app/src/mdx/base-components.tsx
@@ -2,7 +2,7 @@ import classNames from "classnames";
 import Link from "next/link";
 import React, { AnchorHTMLAttributes, HTMLAttributes } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { vscDarkPlus } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import * as prism from "react-syntax-highlighter/dist/cjs/styles/prism";
 import { AbsolutelyPositionedAnchor } from "../commons/AbsolutelyPositionedAnchor";
 import { CopyToClipboardButton } from "../commons/CopyToClipboardButton";
 import { useDocsContext } from "../docs-context/useDocsContext";
@@ -19,11 +19,11 @@ export const CodeBlockInternalCore: React.FC<HTMLAttributes<HTMLElement>> = ({ c
     return (
         <pre
             className={classNames(
-                "w-full mb-5 border-l border-r border-b rounded-bl-lg rounded-br-lg bg-gray-950/90 border-border-default-light dark:border-border-default-dark"
+                "w-full mb-5 border-l border-r border-b rounded-bl-lg rounded-br-lg bg-gray-100/90 dark:bg-gray-950/90 border-border-default-light dark:border-border-default-dark"
             )}
         >
             <SyntaxHighlighter
-                style={vscDarkPlus}
+                style={prism.oneLight}
                 customStyle={{
                     width: "100%",
                     overflowX: "auto",
@@ -32,7 +32,13 @@ export const CodeBlockInternalCore: React.FC<HTMLAttributes<HTMLElement>> = ({ c
                     paddingLeft: 16,
                     paddingBottom: 20,
                     fontSize: "0.9rem",
-                    backgroundColor: "transparent",
+                    background: "unset",
+                    backgroundColor: "unset",
+                }}
+                codeTagProps={{
+                    style: {
+                        background: "unset",
+                    },
                 }}
                 language={language}
                 PreTag="div"
@@ -52,7 +58,7 @@ export const CodeBlockInternal: React.FC<HTMLAttributes<HTMLElement>> = ({ child
 
     return (
         <div className="relative w-full">
-            <div className="border-border-default-light dark:border-border-default-dark flex h-2.5 rounded-t-lg border-x border-t bg-gray-950/90 px-3" />
+            <div className="border-border-default-light dark:border-border-default-dark flex h-2.5 rounded-t-lg border-x border-t bg-gray-100/90 px-3 dark:bg-gray-950/90" />
             <CopyToClipboardButton className="absolute right-4 top-4 ml-auto" content={content} />
             <CodeBlockInternalCore {...rest}>{children}</CodeBlockInternalCore>
         </div>