diff --git a/components/arcade/showcase/project-view.js b/components/arcade/showcase/project-view.js
index a3d7b8cb..575cb6d2 100644
--- a/components/arcade/showcase/project-view.js
+++ b/components/arcade/showcase/project-view.js
@@ -98,6 +98,7 @@ const ProjectView = ({
   }, [readMeLink])
 
   return (
+    // export a css property for each of the color and dark color
     <div
       {...props}
       className="gaegu"
@@ -108,6 +109,15 @@ const ProjectView = ({
         minHeight: '100vh'
       }}
     >
+      <style>
+        {`
+      * {
+        --color: ${color};
+        --dark-color: ${darkColor};
+        --text-color: ${textColor};
+      }
+    `}
+      </style>
       <div
         sx={{
           py: 4,
diff --git a/components/arcade/showcase/readme-renderer.module.css b/components/arcade/showcase/readme-renderer.module.css
index 73bf5860..14a3e818 100644
--- a/components/arcade/showcase/readme-renderer.module.css
+++ b/components/arcade/showcase/readme-renderer.module.css
@@ -364,6 +364,8 @@ SOFTWARE.
 
 .reactMarkDown pre div {
 	margin: 0 !important;
+	background-color: var(--color) !important;
+	filter: brightness(105%);
 }
 
 .reactMarkDown code, .reactMarkDown pre tt {